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

点線区切りのメタ情報ラベル

項目名と値の間を点線でつなぐリスト表記。写真の撮影データや商品スペック情報の一覧表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="row"><span class="k">撮影地</span><span class="dots"></span><span class="v">長野県 上高地</span></div>
        <div class="row"><span class="k">撮影日</span><span class="dots"></span><span class="v">2026年6月</span></div>
        <div class="row"><span class="k">機材</span><span class="dots"></span><span class="v">35mm フィルム</span></div>

CSS

.d02-14-09{ display:flex; flex-direction:column; justify-content:center; gap:12px; }
        .d02-14-09 .row{ display:flex; align-items:baseline; gap:6px; }
        .d02-14-09 .k{ flex-shrink:0; font-size:12px; font-weight:700; color:#374151; }
        .d02-14-09 .dots{ flex:1; border-bottom:1px dotted #d1d5db; height:0; margin-bottom:3px; }
        .d02-14-09 .v{ flex-shrink:0; font-size:12px; color:#6b7280; }

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