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

大きめアバター強調型プロフィールカード

アバター部分を大きく配置し人物の存在感を強調する形式。代表者紹介やキーマン紹介に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">林</div>
          <h4 class="name">林 千夏</h4>
          <p class="role">アートディレクター</p>
        </div>

CSS

.d06-06-09 .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
        .d06-06-09 .avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#dc2626,#f87171);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;font-family:sans-serif;}
        .d06-06-09 .name{margin:0;font-size:16px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-06-09 .role{margin:0;font-size:11px;color:#dc2626;font-family:sans-serif;}

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