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

シンプル横並びバイライン

アバター・氏名・肩書のみの最小構成。記事冒頭のタイトル直下に添える定番の著者表記に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="byline">
          <div class="av">中</div>
          <div class="tx">
            <p class="nm">中村 彩</p>
            <p class="rl">ライター</p>
          </div>
        </div>

CSS

.d06-13-01 .byline{display:flex;align-items:center;gap:12px;}
        .d06-13-01 .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;font-family:sans-serif;flex-shrink:0;}
        .d06-13-01 .tx{text-align:left;}
        .d06-13-01 .nm{margin:0;font-size:14px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-13-01 .rl{margin:2px 0 0;font-size:11px;color:#94a3b8;font-family:sans-serif;}

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