画像 × テキスト 交互レイアウト

このパーツの使いどころと実装ポイント

画像×テキスト交互レイアウトは、3つのサービスを画像と文章を左右入れ替えながら紹介するセクションです。各行は grid-template-columns:1fr 1fr の2分割で、偶数行に --rev を付け direction:rtl で画像と文章の位置を反転させています。番号（01・02・03）をセリフ体で大きく見せ、ストーリーが順に進む印象を作っています。

向いている場面

• 提供までの流れを順番に見せたい制作・コンサル
• 3つの主力サービスを並列で紹介したい企業
• 1つずつ丁寧に語りたいストーリー型のLP

固有の勘所は、画像枠を実写に差し替えること。デモはグラデーションのプレースホルダですが、本番では各サービスを表す写真を入れると訴求力が大きく変わります。aspect-ratio:4/3 で比率が固定されているので、写真の縦横が崩れにくい設計です。

実装上の注意

左右反転は direction を使っているため、子要素には direction:ltr を戻して文章の読み順が乱れないようにしています。スマートフォンでは2列だと画像も文章も小さくなるため、1列に積んで上に画像、下に文章とする並びが読みやすいです。画像を入れる際は alt と width / height を必ず指定します。