HTMLでWebページを作り始めると、「ヘッダーやメニュー、本文をどのタグで分ければよいの？」「横並びはHTMLだけで作れる？」と迷いますよね。
HTMLはページの構造を作り、CSSはその構造を横並び・縦並びに配置します。この記事では、よく使うレイアウトの種類とHTML要素の役割を確認し、PCでは2カラム、スマホでは1カラムになるページを実際に作ります。
HTMLとCSSでWebページのレイアウトを作る
レイアウトとは、Webページの各要素をどこへ、どの大きさで配置するかという設計です。たとえば、ページ上部にヘッダー、中央に本文とサイドバー、下部にフッターを置く構成があります。
HTMLではheaderやmainなどを使って内容の意味を表します。横幅、余白、列数、並ぶ方向などの見た目は、CSSのGridやFlexboxで指定します。
上の図では、PCのmainとasideが横に並び、画面の狭いスマートフォンでは縦に並びます。HTMLの順番は変えず、CSSだけで表示方法を切り替えられます。
レイアウトで使うHTML要素の役割
最初に、ページの大きな領域で使うHTML要素を整理します。見た目だけでdivを並べるより、内容に合う要素を使うと、コードを読む人や支援技術にも構造が伝わりやすくなります。
header：ロゴ、ページタイトル、紹介文などを置く導入部分nav：主要ページへ移動するナビゲーションmain：そのページ固有の中心的な内容section：見出しと内容をまとめた章や区切りarticle：単独でも内容が成り立つ記事やカードaside：関連記事や補足など、本文と間接的に関係する内容footer：著作権表記、補助リンク、運営情報などを置く末尾部分
mainには、ページ内で最も重要な固有コンテンツを入れます。サイト共通のロゴ、メニュー、著作権表記などをmainへ入れないようにしましょう。
要素の名前だけで配置は変わりません。たとえばasideを書いても、自動的に右側へ移動するわけではなく、CSSで列を作る必要があります。
作るレイアウトの完成形
今回は、次の構成を持つWebページを作ります。PCでは本文とサイドバーが横に並ぶ2カラム、幅が狭い画面では縦に並ぶ1カラムです。
- ページ上部の
header - 主要リンクを並べる
nav - 本文の
main - 関連記事を置く
aside - ページ末尾の
footer
変更前はHTMLを上から順番に書くだけなので、すべての領域が縦に並びます。そこへCSS Gridを追加すると、PC幅ではmainとasideを横に配置できます。
HTMLでページの構造を作る
まず、index.htmlへページの構造を書きます。CSSファイルを読み込むlinkタグと、スマートフォン表示に必要なviewportもhead内へ追加します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>レイアウトの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<div class="container">
<p class="site-name">Sample Site</p>
<p>HTMLとCSSを学ぶためのサンプルページです。</p>
</div>
</header>
<nav class="global-nav" aria-label="メインメニュー">
<ul class="container nav-list">
<li><a href="#about">サイトについて</a></li>
<li><a href="#articles">記事一覧</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
<div class="container page-layout">
<main>
<section id="about" class="content-box">
<h1>HTMLレイアウト入門</h1>
<p>このページでは、基本的なレイアウトを紹介します。</p>
</section>
<section id="articles" class="content-box">
<h2>新着記事</h2>
<div class="card-grid">
<article class="card">
<h3>HTMLの基本</h3>
<p>よく使うHTML要素を学びます。</p>
</article>
<article class="card">
<h3>CSSの基本</h3>
<p>文字色や余白の変え方を学びます。</p>
</article>
</div>
</section>
</main>
<aside class="sidebar">
<h2>関連情報</h2>
<ul>
<li>学習の進め方</li>
<li>おすすめ記事</li>
</ul>
</aside>
</div>
<footer id="contact" class="site-footer">
<div class="container">
<p><small>© Sample Site</small></p>
</div>
</footer>
</body>
</html>.page-layoutの中では、中心となるmainを先に、補足のasideを後に書いています。CSSが読み込まれない場合でも、重要な内容から自然な順序で読める構造です。
CSS Gridで2カラムにする
次に、style.cssへレイアウト用のCSSを追加します。ページ全体はGridで2列にし、メニューやカードのように一方向へ並べる部分はFlexboxや小さなGridを使います。
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #1f2937;
background: #f4f7fb;
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.7;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: min(100% - 32px, 1100px);
margin-inline: auto;
}
.site-header {
padding-block: 48px;
color: #ffffff;
background: #2563eb;
}
.site-name {
margin: 0;
font-size: 2rem;
font-weight: 700;
}
.global-nav {
background: #0f172a;
}
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin-block: 0;
padding-block: 16px;
list-style: none;
}
.nav-list a {
color: #ffffff;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
gap: 24px;
padding-block: 32px;
}
.content-box,
.sidebar {
padding: 24px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 6px 20px rgb(15 23 42 / 8%);
}
.content-box + .content-box {
margin-top: 24px;
}
.content-box h1,
.content-box h2,
.sidebar h2 {
margin-top: 0;
}
.card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.card {
padding: 20px;
border: 1px solid #dbe4f0;
border-radius: 8px;
}
.site-footer {
padding-block: 24px;
color: #ffffff;
background: #0f172a;
}display: gridを指定した要素はGridコンテナになり、その直下のmainとasideがGridアイテムになります。grid-template-columnsで、本文は残り幅、サイドバーは240〜300pxの範囲にしています。
minmax(0, 1fr)のfrは、利用できる空間の割合を表す単位です。先頭の最小値を0にすると、長いコードや文字が入ったときに列が必要以上に広がるのを防ぎやすくなります。
メディアクエリでスマホは1カラムにする
ここまでのCSSでは、画面が狭くても2列のままです。本文とサイドバーが窮屈になるため、768px以下では1列へ切り替えます。
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
}
.card-grid {
grid-template-columns: 1fr;
}
.site-header {
padding-block: 32px;
}
.site-name {
font-size: 1.6rem;
}
}@media (max-width: 768px)の中に書いたCSSは、表示領域が768px以下のときに適用されます。.page-layoutと.card-gridを1列にするため、横スクロールを起こさず読みやすい幅を確保できます。
ブレークポイントは端末名だけで決めるのではなく、実際の内容が窮屈になる幅を基準に調整します。ブラウザの幅を少しずつ狭め、文章やカードが読みにくくなる直前で切り替えるのが基本です。
CSS GridとFlexboxの使い分け
どちらも要素を並べるCSSですが、得意な方向が異なります。行と列をまとめて設計するならGrid、横または縦の一方向へ並べるならFlexboxと考えると選びやすいです。
- CSS Grid：ページ全体、本文とサイドバー、カード一覧など、行と列を使う配置
- Flexbox：メニュー、ボタンの並び、アイコンと文字など、一方向の配置と位置合わせ
今回の例では、ページの2カラムとカード一覧にGrid、ナビゲーションの横並びにFlexboxを使いました。どちらか一方に統一する必要はなく、役割に合わせて組み合わせます。
よく使うWebページのレイアウト
Webページでは、内容や目的に合わせて列数を選びます。初心者は、まず1カラムと2カラム、カード型の3種類を押さえると実践しやすいです。
本文を一列にする1カラムレイアウト
本文を1列に並べる最もシンプルな構成です。ランディングページ、問い合わせページ、読み物など、読者の視線を1つの流れへ集中させたい場合に向いています。
画面が広いと文章の1行が長くなりすぎるため、max-widthやwidth: min(...)で本文の最大幅を決めます。
本文とサイドバーを並べる2カラムレイアウト
メインコンテンツとサイドバーを横に並べる構成です。ブログやニュースサイトで、本文を読みながら関連記事、カテゴリー、プロフィールなどを確認できます。
スマートフォンでは2列を保つと本文が細くなるため、通常は1列にしてasideをmainの後へ表示します。
情報量の多い3カラムレイアウト
中央の本文と左右のサイドバーを並べる構成です。一度に多くの情報を見せられますが、各列が狭くなり、視線も分散しやすくなります。
情報量の多い管理画面などでは有効ですが、一般的な記事ページでは1〜2カラムから検討すると読みやすくなります。タブレットやスマートフォンでは、2列または1列へ段階的に切り替えます。
カード・タイルレイアウト
同じ種類の記事や商品を、カードとして格子状に並べる構成です。CSS Gridのrepeat()とminmax()を使うと、画面幅に合わせて列数を自動調整できます。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 20px;
}auto-fitは、利用できる幅に収まる数だけ列を作ります。各カードは基本240px以上ですが、画面がさらに狭い場合はmin(240px, 100%)によってコンテナ幅に収まります。
レイアウトでよくある失敗
表示が崩れたときは、複雑な指定を増やす前に、次の項目を確認してください。
- ページ全体の幅や高さを固定pxだけで決めている
- 画像に
max-width: 100%がなく、親要素からはみ出している box-sizing: border-boxがなく、paddingやborderの分だけ幅が増えている- GridやFlexboxを指定する親要素を間違えている
- 長いURLやコードが列を押し広げている
- メディアクエリを書いたのにviewportのmetaタグがない
- 見た目のためだけにHTMLの読み順を不自然にしている
特にheightを固定すると、文章が増えたときに内容がはみ出しやすくなります。必要な場面以外では、内容に合わせて高さが伸びる初期状態を活かしましょう。
まとめ
HTMLではheader、nav、main、aside、footerなどでページの意味と読み順を作り、CSS GridやFlexboxで見た目の配置を整えます。
最初は1カラムで内容を正しい順番に書き、PCで十分な幅があるときだけ2カラムやカードの横並びを追加すると作りやすいです。ブラウザ幅を変えながら、横スクロールや読みにくい列幅がないか確認してください。