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

枠線付きの出典表記ラベル

細い枠線で囲み「出典」ラベルを左端に配置した表記。グラフや図版の下に置く出典クレジットに適する。

staticcss

プレビュー

ソースコード

HTML

<div class="src-box">
          <span class="src-label">出典</span>
          <span class="src-name">総務省統計局「人口推計」2026年版より作成</span>
        </div>

CSS

.d02-14-02{ display:flex; align-items:center; justify-content:center; }
        .d02-14-02 .src-box{ display:flex; align-items:center; border:1px solid #d1d5db; border-radius:4px; overflow:hidden; max-width:100%; }
        .d02-14-02 .src-label{ flex-shrink:0; background:#f3f4f6; color:#4b5563; font-size:11px; font-weight:700; padding:8px 12px; border-right:1px solid #d1d5db; }
        .d02-14-02 .src-name{ font-size:12px; color:#6b7280; padding:8px 12px; line-height:1.5; }

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