パーツ番号 06-06-03 ・ CSSのみ

SNSアイコン列付きプロフィールカード(静止)

氏名下にSNSアイコンを並べた構成。ライター紹介や制作チーム一覧でリンク先を示す用途に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">佐</div>
          <h4 class="name">佐藤 蓮</h4>
          <p class="role">デザイナー</p>
          <div class="sns">
            <span class="icon">X</span>
            <span class="icon">in</span>
            <span class="icon">@</span>
          </div>
        </div>

CSS

.d06-06-03 .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
        .d06-06-03 .avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#f97316,#facc15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;font-family:sans-serif;}
        .d06-06-03 .name{margin:0;font-size:15px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-06-03 .role{margin:0;font-size:11px;color:#94a3b8;font-family:sans-serif;}
        .d06-06-03 .sns{display:flex;gap:8px;margin-top:4px;}
        .d06-06-03 .icon{width:24px;height:24px;border-radius:50%;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:sans-serif;}

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