スポンサードリンク

【CSS】引用符(blockquote)のカスタマイズ

公開日:
更新日:
カテゴリー: HTML・CSS

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

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

スポンサードリンク

引用符のカスタマイズ

サンプルその1

おはよう

こんにちは

こんばんは

このような引用符にする場合、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にしているため

サンプル2

おはよう

こんにちは

こんばんは

上の引用符の場合、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」

コメント

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

コメントフォーム
お名前
コメント