【Webデザイン】スマホとPCで縦横レイアウトを自在に切り替えるレスポンシブ対応の基本

Webサイトを構築する際、パソコンの広い画面では要素を横に並べ、スマートフォンの狭い画面では縦に積んで表示させるというレイアウトの切り替えは、現代のWeb制作において必須の技術となっています。

本記事では、CSSのFlexbox（フレックスボックス）を活用して、要素の並ぶ方向を柔軟にコントロールする考え方について解説いたします。

具体的なHTMLの構造や、画面幅に合わせてレイアウトを切り替えるCSSのソースコードについては、私の技術ブログにて詳しく解説しております。実際のコードをコピーして動作を確認したい方は、まず以下のリンクより詳細な記事をご覧ください。 https://morinokabu.com/2026/03/15/html-css-flexbox-direction-column/

デバイスごとに最適なレイアウトを提供する重要性

コーポレートサイトの「サービスの強み」や、ECサイトの「商品一覧」など、複数の情報を並べて見せるセクションは多数存在します。これらをパソコンの画面で見る場合は、横一列に並べることで画面を広く使い、ユーザーに一度に多くの情報を伝えることができます。

しかし、その横並びのレイアウトをそのままスマートフォンの縦長な画面に押し込んでしまうと、一つ一つの情報が極端に細く潰れてしまったり、文字が小さくて読めなくなったりと、ユーザーにとって非常に使いにくいサイトになってしまいます。そのため、閲覧している端末の画面サイズに合わせて、最適な並び方へと自動的に変化させる「レスポンシブデザイン」の視点が不可欠です。

Flexboxによる並び方向のコントロール

このようなレイアウトの切り替えを、複雑な計算を行うことなく直感的に実現できるのがCSSのFlexboxという機能です。Flexboxには、要素を並べる「方向（軸）」を自由に設定できるプロパティが用意されています。

標準の状態では、要素は左から右へと横方向に並んでいきます。しかし、特定のプロパティを指定することで、この流れを上から下への「縦方向」へと簡単に変更することができます。これにより、スマートフォンの縦長な画面にぴったりとフィットする、縦積みのレイアウトが完成します。

画面幅に応じたデザインの出し分け

縦並びの設定ができたら、次は「画面が広くなった時だけ横並びに戻す」という条件を追加します。CSSには、閲覧している画面の幅（ピクセル数）に応じて、適用するデザインのルールを切り替える機能が備わっています。

この機能を活用し、「基本はスマートフォン向けの縦並びにしておく」「タブレットやPCのような広い画面幅になったら、横並びに上書きする」というルールを組み合わせることで、どんなデバイスからアクセスされても美しく整頓されたユーザーインターフェースを提供できるようになります。

詳しい実装コードと解説はメインブログにて

こちらのnoteでは、デバイスに応じたレイアウトの切り替えの重要性や、Flexboxの方向制御の仕組みを中心にお伝えしました。

実際の開発現場ですぐに使える具体的なHTMLタグの書き方や、画面幅によってスタイルを切り替えるための詳しいCSSプロパティの記述方法につきましては、私のメインブログにて公開しております。

自社サービスの強みを紹介するセクションを想定し、そのままブラウザで横並びと縦並びの変化を確認できる完全な状態のソースコードを掲載しています。あらゆる画面サイズに対応する柔軟なレイアウトスキルを習得したい方は、ぜひ下記のリンクより詳細な実装手順をご確認ください。