引用(blockquote)のCSSスタイルメモ

技術記事くらいにしか登場しないblockquoteタグのスタイルメモ．

See the Pen blockquotesStyle by Cartman (@Cartman0) on CodePen.

左端にborderがつくタイプ

Qiita Markdown

QiitaのMarkdown記法で表示される引用タグのスタイル．入れ子にも対応．

blockquote {
    border-left: 5px solid #ddd;
    color: #777;
    padding: 1em;
    padding-right: 0;
    margin: 1.5em 0;
    font-size: 17.5px;
}

元：qiita.com

github-markdown-css

GithubのMarkdown記法で表示される引用タグのスタイル．入れ子にも対応．

blockquote {
   margin: 0;
  margin-bottom: 16px;
  margin-top: 0;
  border-left: .25em solid #dfe2e5;
  color: #6a737d;
  padding: 0 1em;
}

blockquote>:first-child {
  margin-top: 0;
}

blockquote>:last-child {
  margin-bottom: 0;
}

元： github.com

引用符タイプ

両サイドに引用符

入れ子には対応しない．

blockquote{
  bpx-sizing: boder-box;
  margin: 1rem 0;
  padding: 0 24pt;
  position: relative;
}
blockquote::before,
blockquote::after{
  font-size: 24pt;
  text-align: center;
  color: #fff;
  background-color: #ddd;
  position: absolute;
  top: 0;
  bottom: 0;
}
blockquote::before {
  content: open-quote;
  left: 0;
}
blockquote::after {
  content: close-quote;
  right: 0;
}

参考： coliss.com

atmarkit

左端に開始引用符

/* atmarkit */
blockquote {
  background-color: #EEE;
  padding: 10px;
}
blockquote::before{
  content: open-quote;
  color: #ccc;
  display: inline;
  font-size: 4em;
  line-height: .8;
  vertical-align:middle;
}

blockquote>:first-child {
  margin-top: 0;
}