# ヒーローセクションのCSS実装

> ファーストビューの中央寄せヒーロー。place-itemsによる一発センタリングと、clamp()による画面幅連動の見出しサイズが柱です。

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/hero-section/

## HTML

```html
<section class="hero">
  <p class="eyebrow">日本語で引けるCSSリファレンス</p>
  <h1>CSSを、辞書で引くように。</h1>
  <p class="lead">実務で使うプロパティを、動く実例と一緒に学べます。</p>
  <div class="actions">
    <a class="btn-primary" href="#">はじめる</a>
    <a class="btn-ghost" href="#">詳しく見る</a>
  </div>
</section>
```

## CSS

```css
.hero {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 320px;
  padding: 48px 24px;
  text-align: center;
  background: linear-gradient(180deg, #fdfaf3, #f3ecd9);
  border: 1px solid #e2d8c2;
  border-radius: 12px;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #8a6d3b;
}

.hero h1 {
  margin: 0;
  /* 最小24px〜画面幅の5%〜最大40pxで自動伸縮 */
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1.3;
}

.lead {
  margin: 0;
  color: #5c5445;
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn-primary, .btn-ghost {
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
}

.btn-primary {
  background: #b0413e;
  border: 1px solid #b0413e;
  color: #fff;
}

.btn-ghost {
  border: 1px solid #cbbfa5;
  color: #5c5445;
}

.btn-primary:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid #1a1712;
  outline-offset: 2px;
}
```

## 仕組みの解説

中央寄せは display: grid + place-items: center の2行で完了します（縦横同時に効く現代の定番）。見出しの font-size: clamp(24px, 5vw, 40px) は「最小・推奨・最大」の3値指定で、メディアクエリを書かずにモバイルからデスクトップまで滑らかにサイズが変わります。要素間の余白はgapに寄せ、個別marginを最小限にしています。

## 実装のポイント

背景に画像を敷く場合は、テキストとのコントラスト確保のため半透明のオーバーレイを重ねてください。

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

LPのヒーローセクションを作ってください。display: gridとplace-itemsで中央寄せ、見出しはclamp()で画面幅に応じて伸縮、CTAボタンを2つ（メインとゴースト）並べてください。

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

- [display-grid](https://www.css-dictionary.com/property/display-grid.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [clamp](https://www.css-dictionary.com/property/clamp.md)
- [text-align](https://www.css-dictionary.com/property/text-align.md)