写真ヒーロー＋スクリム

ヒーロー ／ パターン集トップ

背景写真の上に見出しを載せる。暗いグラデーションで文字を4.5:1以上に保つ

プレビュー#

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="hero-scrim" aria-labelledby="hero-scrim-title">
  <div class="hero-scrim__bg" role="img" aria-label="店内の様子"></div>
  <div class="hero-scrim__inner page">
    <p class="hero-scrim__eyebrow">自家焙煎珈琲</p>
    <h1 id="hero-scrim-title"><span>朝の一杯から、</span><span>一日が始まる</span></h1>
    <p class="hero-scrim__lead">常盤野市中町の焙煎所。その日に焼いた豆だけを、一杯ずつ淹れます。</p>
    <a class="button button--secondary on-dark" href="#plan">定期便を見る</a>
  </div>
</section>

.hero-scrim {
  position: relative;
  min-block-size: clamp(20rem, 50vh, 32rem);
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
}
.hero-scrim__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,var(--scrim, .72)) 0%, rgba(0,0,0,calc(var(--scrim, .72) * .35)) 55%, rgba(0,0,0,.15) 100%),
    linear-gradient(135deg, #3d3428 0%, #6b5a45 100%);
  z-index: 0;
}
.hero-scrim__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-8);
  inline-size: 100%;   /* グリッドの子は中身の幅に縮む。広げてから .page の版面を効かせる */
  /* 文字は左の列だけを使い、右の列は写真を見せるために空ける。
     どこで折り返すかは文字の量ではなく、この列の幅が決める */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  column-gap: var(--space-6);
}
.hero-scrim__inner > * {
  grid-column: 1;
}
.hero-scrim__inner > .button {
  justify-self: start;
}
@media (max-width: 48rem) {
  .hero-scrim__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hero-scrim__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: .08em;
  opacity: .9;
}
.hero-scrim h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  text-wrap: balance;
}
/* 折ってよい位置を句のかたまりで示す。列が狭まると、ここで切れる */
.hero-scrim h1 span {
  display: inline-block;
}
.hero-scrim__lead {
  margin: 0 0 var(--space-5);
  line-height: var(--leading-body);
}
/* .button の基底と派生は「出発点のCSS」にある */

確認する#

• 文字と地のコントラスト比が4.5:1以上
• 写真だけでは意味が伝わる（装飾ではない）
• 375pxで見出しが2行以内に収まる
• ボタンの行き先が、同じページにある節の id を指している

関連#

• コントラストと色覚
• 構図のパターン
• 出発点のCSS