# 左右分割ヒーローのCSS実装

> 画像半分・テキスト半分の2カラムヒーロー。gridの2カラムを、狭い画面ではメディアクエリで縦積みに切り替える定番構成です。

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

## HTML

```html
<section class="split">
  <div class="split-media" role="img" aria-label="工房で器を作る様子"></div>
  <div class="split-copy">
    <p class="eyebrow">HANDMADE IN JAPAN</p>
    <h1>手仕事のうつわを、食卓へ。</h1>
    <p class="lead">産地から直接届く、日常使いの器を集めました。</p>
    <a href="#" class="cta">コレクションを見る</a>
  </div>
</section>
```

## CSS

```css
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
  border: 1px solid #e2d8c2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.split-media {
  background: linear-gradient(130deg, #d9c79a, #8a6d3b);
}

.split-copy {
  display: grid;
  place-content: center; /* コピー一式をまとめて中央に */
  gap: 10px;
  padding: 32px;
}

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

.split-copy h1 {
  margin: 0;
  font-size: clamp(20px, 4vw, 30px);
  line-height: 1.4;
}

.lead {
  margin: 0;
  font-size: 13px;
  color: #5c5445;
}

.cta {
  width: fit-content;
  margin-top: 8px;
  padding: 10px 22px;
  border-radius: 6px;
  background: #b0413e;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

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

/* 狭い画面では縦積みに */
@media (max-width: 520px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split-media {
    aspect-ratio: 16 / 9;
  }
}
```

## 仕組みの解説

grid-template-columns: 1fr 1fr の2カラムを、メディアクエリで 1fr に切り替えるだけの潔い構成です。テキスト側は place-content: center で「コピーのかたまりごと」中央に置きます（place-itemsだと各要素が個別に中央化されて揃いません）。縦積み時の画像は高さが失われるため、aspect-ratio で確保し直します。HTMLの記述順（画像→テキスト）がモバイルでの表示順になる点も設計時に意識してください。

## 実装のポイント

画像を右に置きたい場合はHTML順を変えず、メディア側にorder: 2を指定すればモバイルの順序を保てます。

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

画像半分・テキスト半分の左右分割ヒーローセクションを作ってください。gridの2カラムで、テキスト側はplace-content: centerで中央配置、狭い画面ではメディアクエリで縦積みに切り替えてください。

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

- [display-grid](https://www.css-dictionary.com/property/display-grid.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)
- [place-content](https://www.css-dictionary.com/property/place-content.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [clamp](https://www.css-dictionary.com/property/clamp.md)