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

縦型シンプルプロフィールカード

アバター・氏名・肩書のみの基本構成。会社概要ページの代表挨拶欄などに使える最小構成のカードです。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">田</div>
          <h4 class="name">田中 誠一</h4>
          <p class="role">代表取締役</p>
        </div>

CSS

.d06-06-01 .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
        .d06-06-01 .avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;font-family:sans-serif;}
        .d06-06-01 .name{margin:0;font-size:16px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-06-01 .role{margin:0;font-size:12px;color:#64748b;font-family:sans-serif;}

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