パーツ番号 02-04-07 ・ CSSのみ

角括弧装飾引用

大きな角括弧記号で本文を囲む引用スタイル。テクニカルな記事やドキュメント内の注記表現に向きます。

staticcss

プレビュー

ソースコード

HTML

<blockquote class="d02-04-07-quote">
          <span class="d02-04-07-bracket d02-04-07-l">[</span>
          <span class="d02-04-07-text">大きな角括弧が本文全体を静かに包み込み、引用であることを一目で伝えます。</span>
          <span class="d02-04-07-bracket d02-04-07-r">]</span>
        </blockquote>

CSS

.d02-04-07-quote{
          margin:0;
          display:flex;
          align-items:center;
          gap:6px;
          font-size:13px;
          line-height:1.8;
          color:#333;
        }
        .d02-04-07-bracket{
          font-size:38px;
          font-weight:300;
          color:#4a6cf7;
          font-family:Georgia, serif;
          flex-shrink:0;
        }
        .d02-04-07-text{
          display:block;
        }

クラス名 .d02-04-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。