【CSS】引用符（blockquote）のカスタマイズ

公開日：2013/12/31

更新日：2017/05/07

カテゴリー: HTML・CSS

新聞記事や書籍などの引用文献の抜粋時は引用符（blockquote）で囲みますが、CSSに何も記述していない場合、何の装飾もされません。

ここでは、私が実装している引用符のカスタマイズを紹介したいと思います。

引用符のカスタマイズ

サンプルその１

おはよう

こんにちは

こんばんは

このような引用符にする場合、CSSに以下を記述します。

/*---------- blockquote ----------*/
blockquote {
color: #064599;
border: 3px solid #e1e1e1;
margin:20px 30px 20px 30px;
padding: 10px 10px 0 10px;
}

概要

文字色は「#064599」
枠線は3pxの実線で色は「#e1e1e1」
外要素との余白は上20px　右30px　下20px　左30px
内要素との余白は上10px　右10px　下0px　左10px

※padding（下）が0pxなのは、pタグのmargin（下）を10pxにしているため

サンプル２

おはよう

こんにちは

こんばんは

上の引用符の場合、CSSはこのようになります。

/*---------- blockquote ----------*/
blockquote {
  color: #064599;
  border-left: 3px solid #FF8C00;
  margin: 20px 0 20px 30px;
  padding: 10px 10px 0 10px;
  background: #F2F2F2;
}

概要

文字色は「#064599」
枠線（左のみ）は3pxの実線で色は「#FF8C00」
外要素との余白は上20px　右0px　下20px　左30px
内要素との余白は上10px　右10px　下0px　左10px
背景色は「#F2F2F2」

あわせて読んでほしい！

Follow @ysklog_net 　

まだコメントはありません。

コメントフォーム

引用符のカスタマイズ

サンプルその１

概要

サンプル２

概要

関連してそうなオススメ記事

コメント