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

縦書き俳句カード

短冊のように縦書きの句と作者名を並べたカード見本です。WordPressの文化施設サイトや文芸イベントの紹介ページの装飾要素に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-07-card">
          <p class="d02-13-07-poem">古池や<br>蛙飛びこむ<br>水の音</p>
          <p class="d02-13-07-author">松尾芭蕉</p>
        </div>

CSS

.d02-13-07{background:#fdfaf5}
        .d02-13-07-card{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:14px;height:100%}
        .d02-13-07-poem{writing-mode:vertical-rl;text-orientation:upright;font-family:"游明朝","Yu Mincho",serif;font-size:18px;line-height:2.1;letter-spacing:.05em;color:#292524;margin:0}
        .d02-13-07-author{writing-mode:vertical-rl;text-orientation:upright;font-size:11px;letter-spacing:.1em;color:#a8a29e;margin:0}

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