左右分割ヒーロー
ヒーロー ／ パターン集トップ
写真とコピーを2列に分けるLPの定番。狭い画面では1列に落ちる
プレビュー#
調整する#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<section class="hero-split" aria-labelledby="hero-split-title">
<div class="hero-split__media" role="img" aria-label="作業風景"></div>
<div class="hero-split__copy page">
<p class="hero-split__label">Web制作の相談窓口</p>
<h1 id="hero-split-title"><span>見せ方から、</span><span>仕事の仕組みまで</span></h1>
<p class="hero-split__lead">左に主張、右に状況。非対称で視線の入口を作る。</p>
<a class="button button--primary" href="#contact">相談する</a>
</div>
</section>.hero-split {
display: grid;
grid-template-columns: var(--hero-media, 1fr) 1fr;
min-block-size: clamp(20rem, 55vh, 36rem);
align-items: center;
}
@media (max-width: 48rem) {
.hero-split {
grid-template-columns: 1fr;
}
.hero-split__media {
min-block-size: 14rem;
}
}
.hero-split__media {
block-size: 100%;
min-block-size: inherit;
background: linear-gradient(135deg, #4a4035 0%, #7a6a55 100%);
}
.hero-split__copy {
inline-size: 100%; /* グリッドの子は中身の幅に縮む。列いっぱいに広げてから版面を効かせる */
padding-block: var(--space-8);
padding-inline: var(--space-6);
}
.hero-split__label {
margin: 0 0 var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
letter-spacing: .06em;
}
/* 行長はコピー列の幅で決まるので、見出しにも本文にも幅は持たせない */
.hero-split h1 {
margin: 0 0 var(--space-4);
font-size: var(--text-2xl);
text-wrap: balance;
}
.hero-split h1 span { display: inline-block; } /* 折ってよい位置だけを示す */
.hero-split__lead {
margin: 0 0 var(--space-5);
color: var(--color-text-muted);
line-height: var(--leading-body);
}
/* .button の基底と派生は「出発点のCSS」にある */確認する#
- 48rem 以下で1列に落ちる
- 見出しにも本文にも幅を持たせず、折り返しがコピー列の幅で決まる
- 写真列だけ min-block-size を確保する