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

二段組み図表番号+説明キャプション

図表番号を左側の縦帯に、説明文を右側に配置する二段組みキャプション。論文調・レポート調の資料デザインに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="fig">
          <span class="fig-num">Fig. 03</span>
        </div>
        <p class="fig-desc">四半期別の売上推移を示すグラフ。第3四半期に大きな伸びが見られる。</p>

CSS

.d02-14-10{ display:flex; align-items:stretch; gap:0; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; }
        .d02-14-10 .fig{ flex-shrink:0; width:74px; background:#1f2937; display:flex; align-items:center; justify-content:center; padding:10px; }
        .d02-14-10 .fig-num{ font-size:12px; font-weight:700; color:#fff; letter-spacing:0.04em; }
        .d02-14-10 .fig-desc{ all:unset; display:flex; align-items:center; font-size:12px; color:#4b5563; line-height:1.6; padding:14px; }

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