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

インタビュー記事レイアウト

質問と回答を色分けした枠で視覚的に区別した誌面構成。インタビューや対話形式の記事を整理して見せたい場合に適する。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-06-wrap">
          <div class="d01-09-06-q"><span class="d01-09-06-label">Q</span><p>今回のプロジェクトで意識したことは？</p></div>
          <div class="d01-09-06-a"><span class="d01-09-06-label">A</span><p>使う人の日常に溶け込む形を探しました。</p></div>
        </div>

CSS

.d01-09-06{background:#fff;align-items:flex-start;}
        .d01-09-06-wrap{width:100%;display:flex;flex-direction:column;gap:10px;}
        .d01-09-06-q,.d01-09-06-a{display:flex;gap:8px;padding:9px 10px;border-radius:3px;}
        .d01-09-06-q{background:#eef3f6;}
        .d01-09-06-a{background:#fbf1e8;}
        .d01-09-06-label{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
        .d01-09-06-q .d01-09-06-label{background:#3d6d8c;}
        .d01-09-06-a .d01-09-06-label{background:#c07d3a;}
        .d01-09-06-q p,.d01-09-06-a p{margin:0;font-size:11px;line-height:1.6;color:#333;}

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