パーツ番号 01-09-09 ・ CSSのみ

対談・座談会記事レイアウト

複数の発言者を色分けして表示した対談形式の誌面構成。座談会やパネルディスカッションの記事化に用いる固定レイアウト。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-09-wrap">
          <div class="d01-09-09-line d01-09-09-a"><span class="d01-09-09-name">田中</span><p>最初はどんな印象でしたか。</p></div>
          <div class="d01-09-09-line d01-09-09-b"><span class="d01-09-09-name">佐藤</span><p>正直、驚きの方が大きかったです。</p></div>
          <div class="d01-09-09-line d01-09-09-c"><span class="d01-09-09-name">鈴木</span><p>私は逆に納得していました。</p></div>
        </div>

CSS

.d01-09-09{background:#fff;align-items:flex-start;}
        .d01-09-09-wrap{width:100%;display:flex;flex-direction:column;gap:8px;}
        .d01-09-09-line{display:flex;gap:8px;align-items:flex-start;padding:7px 9px;border-radius:3px;}
        .d01-09-09-name{flex:none;font-size:10px;font-weight:800;padding:2px 6px;border-radius:2px;color:#fff;}
        .d01-09-09-line p{margin:0;font-size:11px;color:#333;line-height:1.5;}
        .d01-09-09-a{background:#eef3f6;}
        .d01-09-09-a .d01-09-09-name{background:#3d6d8c;}
        .d01-09-09-b{background:#f6eef2;}
        .d01-09-09-b .d01-09-09-name{background:#a15a7c;}
        .d01-09-09-c{background:#f1f6ec;}
        .d01-09-09-c .d01-09-09-name{background:#5c8a44;}

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