# プロフィールカードのCSS実装

> アバター・名前・肩書き・フォローボタンを縦に積んだプロフィールカード。円形アバターと中央揃えの基本形です。

- カテゴリ: カード
- URL: https://www.css-dictionary.com/recipes/profile-card/

## HTML

```html
<article class="profile">
  <div class="avatar" role="img" aria-label="山田花子のアバター"></div>
  <h3 class="name">山田 花子</h3>
  <p class="role">フロントエンドエンジニア</p>
  <dl class="stats">
    <div><dt>投稿</dt><dd>128</dd></div>
    <div><dt>フォロワー</dt><dd>1.2k</dd></div>
  </dl>
  <button type="button" class="follow">フォローする</button>
</article>
```

## CSS

```css
.profile {
  width: 240px;
  padding: 24px 20px 20px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 12px;
  text-align: center;
}

.avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d9c79a, #8a6d3b);
}

.name {
  margin: 0 0 2px;
  font-size: 17px;
}

.role {
  margin: 0 0 14px;
  font-size: 12px;
  color: #8a6d3b;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 0 0 16px;
}

.stats dt {
  font-size: 11px;
  color: #b5a583;
}

.stats dd {
  margin: 0;
  font-weight: 700;
}

.follow {
  width: 100%;
  padding: 8px 0;
  border: 1px solid #b0413e;
  border-radius: 6px;
  background: #b0413e;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.follow:hover { background: #97362f; }

.follow:focus-visible {
  outline: 2px solid #1a1712;
  outline-offset: 2px;
}
```

## 仕組みの解説

円形アバターは border-radius: 50% の定番技です。中身はカード全体の text-align: center で中央に寄せ、アバターだけは margin: 0 auto でブロックごと中央配置します。実数のペア（投稿数など）は dl/dt/dd でマークアップすると、ラベルと値の関係が支援技術にも伝わります。

## 実装のポイント

実際のアバター画像を使うときは img に object-fit: cover を指定すると、縦横比の違う画像でも円内に収まります。

## AIに依頼するときの文例

プロフィールカードを作ってください。円形アバター・名前・肩書き・投稿数とフォロワー数（dlでマークアップ）・フォローボタンの縦積み構成で、中央揃えにしてください。

## 使っているプロパティ

- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [text-align](https://www.css-dictionary.com/property/text-align.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [justify-content](https://www.css-dictionary.com/property/justify-content.md)
- [gap](https://www.css-dictionary.com/property/gap.md)