Webページのレイアウトパターン

1. シングルカラム・レイアウト

コンテンツを縦一列に並べる最もシンプルな構造です。スマホ表示との親和性が高く、ランディングページ(LP)などでよく使われます。

2. 2カラム・レイアウト

メイン記事とサイドバー(メニューや広告)を並べる、ブログやニュースサイトの定番です。

3. 3カラム・レイアウト

両サイドにメニューや情報を配置する構造です。情報量の多いポータルサイトや管理画面に向いています。

現代の必須技術:Flexbox レイアウト

要素を横や縦に「並べる」のが得意な技術です。要素の幅を自動調整したり、順番を入れ替えたりするのが非常に簡単です。

CSS例: display: flex;

高度な分割:CSS Grid レイアウト

格子状(グリッド)に領域を区切り、「何行目の何列目に配置するか」を自由に指定できます。複雑な新聞のようなレイアウトも作れます。

CSS例: display: grid;

愛知県豊川市の公式ホームページを見てみよう

まとめ:どう使い分ける?