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

縦書き風引用(和文)

writing-modeを用いた縦書きの引用表現。和のテイストを持つ記事やコラムのアクセントに使えます。

staticcss

プレビュー

ソースコード

HTML

<blockquote class="d02-04-10-quote">
          言葉は縦に流れ、静かに佇む。和文らしい趣を添えた引用の見せ方です。
        </blockquote>

CSS

.d02-04-10-quote{
          margin:0;
          padding:6px 10px;
          writing-mode:vertical-rl;
          text-orientation:mixed;
          font-size:14px;
          line-height:1.9;
          color:#333;
          max-height:220px;
          border-right:3px solid #b23a3a;
          letter-spacing:0.08em;
        }

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