CSS Stockを表示するスマートフォンのモック
デザインの例1デザインの例2デザインの例3

HTML・CSSでつくる引用(blockquote)ボックスのデザイン4選

他のサイトのコンテンツや文献を引用する際に必須な引用(blockquote)タグ。引用であることを明記するのはもちろんのこと、デザインにもこだわりたいところですよね。そこで今回はコピペでできる引用ボックスのデザインスニペットをまとめました。

シンプルな引用ボックス

スタンダード

スタンダード

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 出典(citeタグ)

アイコン付きの引用ボックス

かぎ括弧風

かぎ括弧風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 出典(citeタグ)
背景あり

背景あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 出典(citeタグ)
太めの左枠線

太めの左枠線

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 出典(citeタグ)