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

著者アイコン付き記事一覧

丸型アバターと著者名を各記事に添えたリスト。複数ライターが執筆するオウンドメディアの一覧に向く。

staticcss

プレビュー

ソースコード

HTML

<div class="au06-07-09">
          <span class="ic06-07-09 ic06-07-09-1"></span>
          <div class="tx06-07-09"><p class="ti06-07-09">初心者向けカメラ設定講座</p><span class="nm06-07-09">田中 円 / ライター</span></div>
        </div>
        <div class="au06-07-09">
          <span class="ic06-07-09 ic06-07-09-2"></span>
          <div class="tx06-07-09"><p class="ti06-07-09">パン作りで失敗しないコツ</p><span class="nm06-07-09">佐藤 陽 / 編集部</span></div>
        </div>
        <div class="au06-07-09">
          <span class="ic06-07-09 ic06-07-09-3"></span>
          <div class="tx06-07-09"><p class="ti06-07-09">ミニマル収納の実例集</p><span class="nm06-07-09">小林 楓 / ライター</span></div>
        </div>

CSS

.d06-07-09{display:flex;flex-direction:column;gap:12px;width:100%;}
        .d06-07-09 .au06-07-09{display:flex;gap:10px;align-items:center;}
        .d06-07-09 .ic06-07-09{width:30px;height:30px;border-radius:50%;flex-shrink:0;}
        .d06-07-09 .ic06-07-09-1{background:linear-gradient(135deg,#ffb6b9,#e8547a);}
        .d06-07-09 .ic06-07-09-2{background:linear-gradient(135deg,#b6d8ff,#3a7bd5);}
        .d06-07-09 .ic06-07-09-3{background:linear-gradient(135deg,#c3f2c3,#3aa85a);}
        .d06-07-09 .tx06-07-09{display:flex;flex-direction:column;gap:3px;}
        .d06-07-09 .ti06-07-09{margin:0;font-size:11px;color:#222;}
        .d06-07-09 .nm06-07-09{font-size:9px;color:#999;}

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