左右交互サービス紹介
画像とテキストのブロックを行ごとに左右入れ替えて見せる、定番のサービス紹介レイアウトです。各行は display:grid の 1fr 1fr で 2 列に分割し、偶数行には direction:rtl を当てて画像とテキストの並びを反転させています（テキスト内部は ltr に戻して文字組みは正常に保つ）。
このパーツの使いどころと実装ポイント
画像とテキストのブロックを行ごとに左右入れ替えて見せる、定番のサービス紹介レイアウトです。各行は display:grid の 1fr 1fr で 2 列に分割し、偶数行には direction:rtl を当てて画像とテキストの並びを反転させています（テキスト内部は ltr に戻して文字組みは正常に保つ）。視線が左右にジグザグと流れ、複数の特長を飽きさせず読ませられるのが利点です。
向いている場面
- 制作会社やコンサルの提供サービス詳細
- 製品の機能を1つずつ説明する物販ページ
- 導入メリットを順番に見せる BtoB サイト
画像枠は aspect-ratio:16/10 で比率を固定しているため、差し替えても高さが揃います。実画像を入れるときは object-fit:cover を添えると枠いっぱいに収まります。
実装上の注意
狭い画面では 2 列だと窮屈なので、メディアクエリで 1 列縦積みに切り替えてください。その際、左右反転（rtl）は解除し、すべて画像→テキストの順に揃えると読みやすくなります。direction を使った反転は手軽ですが、要素が増えると挙動が複雑になるため、行数が多い場合は order プロパティでの並べ替えも検討すると安全です。
よくある質問
左右の反転にdirection:rtlを使って大丈夫ですか。
2列の入れ替えには手軽で有効です。ただし文字組みまで右からになるので、テキスト側はltrに戻す指定が必要です。要素が複雑になる場合はflexのorderやgridのカラム指定で並べ替える方が見通しが良くなります。
行を増やしていくと単調になりませんか。
左右が交互に入れ替わるため視線が動いて単調さは抑えられますが、行が多いと長くなります。見出しの言い回しや画像の構図に変化を付け、4〜6行程度を目安にまとめると読み疲れしにくくなります。