画像 + テキスト 左右交互セクション
1 行ごとに画像とテキストの左右が入れ替わる、サービス紹介の定番レイアウトです。各行は grid-template-columns:1fr 1fr の 2 列で組まれ、偶数行に当てた --reverse クラスが direction:rtl で並び順だけを反転させています。
解説
1 行ごとに画像とテキストの左右が入れ替わる、サービス紹介の定番レイアウトです。各行は grid-template-columns:1fr 1fr の 2 列で組まれ、偶数行に当てた --reverse クラスが direction:rtl で並び順だけを反転させています。中の文字まで逆向きにならないよう、子要素には direction:ltr を戻すのがこのテクニックの肝です。画像枠は aspect-ratio:4/3 で形を保ち、現状はグラデーションのプレースホルダになっています。狭い画面では @media(max-width:600px) で 1 列に切り替わります。JavaScript は不要です。
使う場面
- サービスの 3 つの特徴を交互に語る紹介ページ
- 製品の機能をビジュアルと文章で見せる構成
- ストーリー性のある実績・事例の紹介
画像枠は実運用では実写に差し替えてください（img に width・height・alt を付け、ヒーロー以外は loading="lazy" を推奨）。行を増やすときは交互の --reverse を忘れずに付けます。direction を使う方法は手軽ですが、子要素の ltr 戻し漏れに注意してください。ラベル（FEATURE 01 など）の色や文字間隔を変えると印象が引き締まります。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
左右の入れ替えはどうやって実現していますか？
偶数行に付けた reverse クラスで direction を rtl にし、グリッドの並び順だけを反転させています。文字が逆向きにならないよう、行の子要素には direction を ltr に戻しています。order プロパティを使う方法もありますが、ここでは direction で簡潔に切り替えています。
プレースホルダの画像は実写に変えるべきですか？
はい。実運用ではグラデーションの枠を実写の img に差し替えてください。その際は width・height・意味のある alt を付け、ヒーロー以外は loading="lazy" を指定すると表示と読み込みの両面で有利です。