画像と本文の左右交互
LPの節 ／ パターン集トップ
画像と本文の左右交互。偶数セットで反転しスマホは縦積み
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<section class="media-text page" id="work" aria-labelledby="media-text-title">
<h2 id="media-text-title">つばめ珈琲の仕事</h2>
<div class="media-text__list">
<div class="media-text__item">
<div class="media-text__visual" role="img" aria-label="焙煎機から豆を出すところ"></div>
<div class="media-text__body">
<h3>朝いちばんに焙煎する</h3>
<p>開店前の2時間で、その日に出す分だけを焙煎します。深煎りは前日の夕方に仕込み、ひと晩おいてから挽きます。</p>
</div>
</div>
<div class="media-text__item">
<div class="media-text__visual media-text__visual--counter" role="img" aria-label="カウンターで一杯ずつ淹れるところ"></div>
<div class="media-text__body">
<h3>一杯ずつ淹れる</h3>
<p>注文を受けてから豆を挽き、ハンドドリップで淹れます。待ち時間は豆の説明書きを読んでお過ごしください。</p>
</div>
</div>
</div>
</section>.media-text__list {
margin-block-start: var(--space-6);
display: grid;
gap: var(--space-8);
}
.media-text__item {
display: grid;
gap: var(--space-5);
align-items: center;
}
.media-text__visual {
aspect-ratio: 3 / 2;
background: linear-gradient(135deg, #3d3428, #6b5a45); /* 実画像に差し替える */
}
.media-text__visual--counter {
background: linear-gradient(135deg, #2e3a38, #5f6e66);
}
.media-text__body h3 {
margin: 0 0 var(--space-3);
font-size: var(--text-lg);
}
.media-text__body p {
margin: 0;
color: var(--color-text-muted);
line-height: var(--leading-body);
}
@media (min-width: 48em) {
.media-text__item {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-7);
}
.media-text__item:nth-child(even) .media-text__visual {
order: 2; /* 反転は広い画面だけ。縦積みでは画像→本文の順 */
}
}確認する#
- 写真に内容を表す代替テキストがある（飾りなら空 alt）
- 反転は偶数セットだけで、スマホでは画像→本文の順に統一している
- 実画像に差し替えるとき width と height を書き、読み込みで画面が飛ばない