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

SNSリンク付き著者ボックス

氏名の右側にSNSアイコンを並べた箱型構成。記事末尾でSNSフォローを促したいメディアサイトに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="box">
          <div class="av">吉</div>
          <div class="tx">
            <p class="nm">吉田 陸</p>
            <p class="rl">編集者</p>
          </div>
          <div class="sns">
            <span class="ic">X</span>
            <span class="ic">in</span>
            <span class="ic">@</span>
          </div>
        </div>

CSS

.d06-13-02 .box{display:flex;align-items:center;gap:12px;width:100%;max-width:280px;padding:14px 16px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;}
        .d06-13-02 .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#22d3ee);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:sans-serif;flex-shrink:0;}
        .d06-13-02 .tx{flex:1;text-align:left;}
        .d06-13-02 .nm{margin:0;font-size:13px;font-weight:700;color:#0f172a;font-family:sans-serif;}
        .d06-13-02 .rl{margin:1px 0 0;font-size:10.5px;color:#0ea5e9;font-family:sans-serif;}
        .d06-13-02 .sns{display:flex;gap:6px;flex-shrink:0;}
        .d06-13-02 .ic{width:20px;height:20px;border-radius:50%;background:#e2e8f0;color:#475569;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:sans-serif;}

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