Webサイトをデザインするとき、必ず決めなければならないのが「コンテンツ幅」です。コンテンツ幅は、文章の読みやすさと、レイアウトの安定感を左右する土台になります。
この記事では、PC・タブレット・スマートフォンそれぞれのコンテンツ幅と左右余白の決め方を、具体的な数値と、実際にこのサイトで使っている値をもとに解説します。最後に、そのまま使えるCSSの書き方も紹介します。
CONTENTS目次
コンテンツ幅とは何か
コンテンツ幅とは、Webページの中で文章・画像・ボタンなどが実際に配置される「本文領域の幅」のことです。ブラウザのウィンドウ幅とは別物で、ウィンドウがどれだけ広くても、コンテンツ幅には上限を設けるのが基本です。
- 広すぎると、1行の文字数が増えて視線の移動が大きくなり、読みづらくなる
- 狭すぎると、情報が窮屈に見えて、改行が増え、デザインに余裕がなくなる
つまりコンテンツ幅を決めるというのは、「1行に何文字入れるか」を決めることでもあります。ここが、この記事でいちばん覚えてほしいポイントです。
幅を決める基準は「1行の文字数」
日本語の本文は、1行あたり35〜45文字程度が読みやすいとされています。全角文字はフォントサイズとほぼ同じ幅なので、本文のフォントサイズが16pxなら、1行40文字で約640pxです。
| 本文のフォントサイズ | 1行35文字 | 1行40文字 | 1行45文字 |
|---|---|---|---|
| 16px | 約560px | 約640px | 約720px |
| 18px | 約630px | 約720px | 約810px |
「コンテンツ幅は1100px」とよく言われるのに、本文は640〜720pxでよいのか、と思うかもしれません。これは、ページ全体の幅と、本文テキストの幅を分けて考えるからです。ページ全体にはサイドバーや画像、カードを横に並べる領域が必要なので1000〜1200px程度にし、その中で長文のテキストだけは700〜800px程度に抑える、という二段構えにすると読みやすくなります。
PCにおけるコンテンツ幅の考え方
目安：全体は最大1000〜1200px、迷ったら1100px
PCの画面は横幅が広く、フルスクリーンにすると1920pxやそれ以上になることも珍しくありません。本文をそのまま全幅で表示すると、1行が100文字を超えて読みにくくなります。
そのため、ページ全体のコンテンツ幅は最大1000〜1200pxに収めるのが一般的です。迷ったら1100pxから始めて、デザインに合わせて調整するとよいでしょう。画面がこれより広い場合は、左右に余った分が自動的に余白になります。
- 画面幅 1440px → コンテンツ幅 1100px、左右の余白はそれぞれ 170px
- 画面幅 1920px → コンテンツ幅 1100px、左右の余白はそれぞれ 410px
どんなPC画面でも、コンテンツが中央にきれいに収まります。
コンテンツ幅より画面が狭いときの「最低限の余白」
画面幅が1100pxを下回るノートPCなどでは、コンテンツが画面の端にくっついてしまいます。これを防ぐために、「画面が狭くても、左右に最低これだけは余白を残す」という値を決めておきます。PCでは40〜100px程度が目安です。
タブレットにおけるコンテンツ幅の考え方
目安：左右の余白を40〜64pxに
タブレットは縦持ち・横持ちでレイアウトが大きく変わります。iPadでは横幅768pxや1024pxが代表的なサイズです。
PCと同じ100pxの余白を取ると、画面が狭く感じられます。タブレットでは左右の余白を40〜64px程度に調整するとバランスがよくなります。
- 横幅 768px → 余白 64px × 2 で、コンテンツ幅 約640px
- 横幅 1024px → 余白 64px × 2 で、コンテンツ幅 約896px
この幅なら、本文の1行が40文字前後に収まり、可読性を保ちつつ窮屈さを感じさせません。
スマートフォンにおけるコンテンツ幅の考え方
目安：左右の余白を16〜32pxに
スマートフォンは画面幅が限られるため、余白の設定が読みやすさに直結します。余白を狭くしすぎると文字が端まで詰まって読みにくく、広くしすぎると本文の幅が小さくなって改行が増えます。
左右16〜32pxの範囲で、サイトの雰囲気に合わせて決めます。余白を広めに取るとゆったりした印象に、狭めに取ると情報量を優先した印象になります。
- 横幅 375px（iPhoneの標準的なサイズ） → 余白 20px なら コンテンツ幅 335px、余白 32px なら 311px
- 横幅 414px → 余白 20px なら 374px、余白 32px なら 350px
本文が16pxなら、1行に20〜23文字程度。スマートフォンではこれくらいが片手で読みやすい幅です。
実例：このサイトではこう決めている
参考までに、いま読んでいるこのサイトの設定を紹介します。
| ページ | コンテンツ幅の上限 | 左右の余白 | 理由 |
|---|---|---|---|
| トップページ | 1100px | PC 100px → スマホ 20px | 画像やカードを横に並べる領域が必要 |
| ブログ記事（このページ） | 900px | 20px | 文章が主体なので、本文を読みやすい幅に寄せている |
同じサイトの中でも、ページの役割によって幅を変えています。「サイト全体で1つの値」と決めつけず、ページごとに「何を見せるページか」から逆算するのがコツです。
なぜデバイスごとに余白を変えるのか
余白は単なる「空白」ではなく、コンテンツを際立たせるための「デザインの呼吸」です。デバイスごとに余白を変える理由は次のとおりです。
- PC：画面に余裕があるので、余白を広めに取って本文を中央に集め、視線を誘導する
- タブレット：中間的なサイズなので、PCより狭く、スマホより広い余白にする
- スマートフォン：画面が小さいので、余白は最小限にして本文の幅を確保する
「デバイスに合わせて最適化する」ことが、レスポンシブデザインの基本的な考え方です。
実装例（CSS）
考え方をCSSに落とすと、次のようになります。ポイントは、max-width で上限を決め、padding で最低限の余白を確保することです。
/* 共通：上限 1100px、左右の最低余白は PC で 100px */
.container {
box-sizing: border-box; /* padding を幅に含める */
max-width: 1300px; /* 1100px + 左右の余白 100px × 2 */
margin: 0 auto; /* 中央寄せ */
padding: 0 100px;
}
/* タブレット（1024px 以下）：余白を 64px に */
@media screen and (max-width: 1024px) {
.container {
padding: 0 64px;
}
}
/* スマートフォン（768px 以下）：余白を 20px に */
@media screen and (max-width: 768px) {
.container {
padding: 0 20px;
}
}ひとつ注意点があります。box-sizing が初期値の content-box のままだと、max-width: 1100px に padding: 0 100px を足した1300pxが要素の幅になります。「コンテンツ幅を1100pxにしたい」なら、上の例のように box-sizing: border-box にして max-width を余白込みの1300pxにするか、次のように書きます。
/* 余白を差し引いた「中身の幅」を 1100px に固定したい場合 */
.container {
width: min(1100px, 100% - 40px); /* 画面が狭いときは左右 20px ずつ余白を残す */
margin: 0 auto;
}min() を使うと、メディアクエリなしで「広い画面では1100px、狭い画面では左右20pxの余白を残した幅」が実現できます。最近のブラウザならそのまま使えます。
まとめ
- コンテンツ幅を決めることは、「1行の文字数」を決めること。日本語の本文は1行35〜45文字が目安
- PC：全体は最大1000〜1200px（迷ったら1100px）、左右の最低余白は40〜100px
- タブレット：左右の余白は40〜64px
- スマートフォン：左右の余白は16〜32px
- ページの役割（画像主体か、文章主体か）によって、同じサイト内でも幅を変えてよい
- CSSでは
box-sizingに注意。min()を使うと記述がシンプルになる
コンテンツ幅は「見た目を整える」だけでなく、読みやすさに直結します。実際のプロジェクトでは、ブランドイメージやターゲットに合わせて微調整していくことも大切です。
見出しの構造については見出しタグ（h1〜h6）の正しい使い方とSEOとの関係、次の第8回はホームページ制作において「jQuery」は使うべきか？です。
