コンテンツ幅とは?読みやすい横幅の決め方とmax-widthの基本を解説

ノートパソコンではきれいに見えていたWebページが、大きなモニターで開くと横にだだっ広く、文章が読みにくくなっていた、という経験はありませんか。

この問題を防ぐのが、文章や画像を置く範囲の横幅、つまり「コンテンツ幅」をあらかじめ決めておくことです。

この記事では、コンテンツ幅とは何か、読みやすい横幅の決め方、そしてCSSのmax-widthを使った指定の基本を初心者向けに解説します。

コンテンツ幅の基本

まずは、コンテンツ幅とは何か、そしてなぜ横幅を制限する必要があるのかを押さえましょう。

コンテンツ幅とは

コンテンツ幅とは、Webページの中で、文章・画像・ボタンなどの中身が実際に置かれる範囲の横幅のことです。

多くのWebサイトでは、中身を画面の端から端まで広げるのではなく、決まった幅の中に収めて、画面の中央に置いています。

コンテンツ幅の外側に残った部分は、ページの左右の余白になります。

つまりコンテンツ幅を決めることは、「中身をどこまで広げるか」と同時に「左右にどれだけ余白を残すか」を決めることでもあります。

横幅を制限する理由

コンテンツ幅を制限する一番の理由は、画面が大きくなっても、文章が読みにくくならないようにするためです。

幅を制限しないと、画面が広いほど1行に並ぶ文字が増え、行の終わりから次の行の頭へ目を戻すときに、どの行を読んでいたか見失いやすくなります。

次の見本は、同じ文章を、幅の制限なしで表示した場合と、幅を制限して中央に置いた場合です(画面の狭いスマートフォンでは差が小さく見えるので、パソコンで見ると違いが分かりやすくなります)。

コンテンツ幅を決めていないページでは、画面の幅が広がるほど1行の文字数が増えていきます。1行が長くなると、行の終わりまで読んだあとに次の行の頭を探す距離も長くなり、同じ行を読み直したり、1行飛ばしてしまったりしやすくなります。

NG:幅の制限なし。画面が広いと1行がどこまでも長くなる

OK:幅を制限して中央に置いた。画面が広くても1行の長さが一定に保たれる

NGの見本は、画面の幅いっぱいに文章が広がるため、大きな画面ほど1行が長くなり、目で追うのが大変になります。

OKの見本は、画面がどれだけ広くても文章の幅が一定なので、行を見失わずに読み進められます。

Webのアクセシビリティ(誰もが情報を利用できるようにすること)のガイドラインWCAGでも、文章のかたまりの幅は全角40字を超えないことが、最も厳しいレベルの基準として挙げられています(WCAG 2.1 達成基準 1.4.8 視覚的提示(WAICによる日本語訳))。

1行の文字数と読みやすさの関係は、「行間と行長」の黄金ルールで詳しく解説しています。

また、幅を制限すると、大きな画面でも中身が中央にまとまるので、ページ全体が間延びせず、落ち着いた印象になります。

ページ全体の幅と本文の幅は分けて考える

コンテンツ幅を決めるときは、「ページ全体の幅」と「本文(文章)の幅」を分けて考えるのがポイントです。

カードや写真を横に並べる部分は広い幅があると使いやすい一方、文章は1行が長くなりすぎないよう、もっと狭い幅に収めたほうが読みやすいからです。

ページ全体の幅(白い面)の中に、文章だけさらに狭い幅(灰色の線のかたまり)で置いた例。カードは広い幅を使って3枚並べている

この見本では、カードは白い面いっぱいに並べつつ、文章のかたまりだけを一回り狭い幅に収めています。

大きな箱(ページ全体の幅)の中に、カードを並べるエリアと、文章専用の小さな箱(本文の幅)が入っている、二重の構造だと考えると分かりやすくなります。

たとえば、ページ全体の幅を1,100px程度にしても、本文は1行40文字前後(文字サイズ16pxなら約640px)に収める、といった組み合わせが考えられます。

ページ全体の幅の数値はサイトによってさまざまなので、並べたいカードの数や写真の大きさから決めましょう。

コンテンツ幅の決め方とmax-widthの使い方

ここからは、コンテンツ幅を決める手順と、CSSやデザインツールでの指定方法を紹介します。

コンテンツ幅を決める手順

コンテンツ幅は、なんとなく数値を決めるのではなく、中に入る文章と要素から逆算して決めます。

本文の文字サイズを決める(Webでは16px前後が一般的です)
1行の文字数から、本文の幅を決める
全角40文字前後に収めるなら、文字サイズ×40文字が目安です。
カードや写真をいくつ並べたいかから、ページ全体の幅を決める
コンテンツ幅の外側に、左右の余白が残ることを確かめる
画面の幅を変えながら、パソコンでもスマートフォンでも読みやすいかを確認する

本文の文字サイズの決め方は、PC・スマホの文字サイズとはで解説しています。

widthではなくmax-widthで指定する

ここからはコーディングする人向けの補足です。
デザインツールだけを使う人も、「幅は固定ではなく上限で決める」という考え方だけ押さえておきましょう。

CSSでコンテンツ幅を指定するときは、幅を固定するwidthではなく、幅の上限を決めるmax-widthを使うのが基本です。

max-widthは「これより広くはならない」という上限を決めるプロパティなので、画面が広いときは上限の幅で止まり、画面が狭いときは画面に合わせて自動で縮みます(MDN「max-width」)。

一方、width: 600px;のように幅を固定すると、600pxより狭い画面では中身がはみ出してしまいます。

たとえるなら、widthは大きさが決まった固い箱、max-widthは置き場所が狭ければ縮むけれど、上限より大きくはならない箱です。

幅を600pxに固定した文章です。表示する場所がこの幅より狭いと、文章の続きが枠からはみ出して見えなくなり、横にスクロールしないと読めません。

NG:width: 600px で固定。枠より広いので、横スクロールしないと続きが読めない

上限を600pxにした文章です。表示する場所がこの幅より狭いときは、その幅に合わせて自動で折り返すので、横にスクロールしなくても読めます。

OK:max-width: 600px で上限だけ指定。枠に合わせて縮み、はみ出さない

NGの見本は、文章の幅が600pxに固定されているため、それより狭い枠では文章の続きがはみ出し、横にスクロールしないと読めません。

OKの見本は、上限だけを決めているので、枠が狭いときは自然に縮んで折り返されます。

WCAGでも、幅320px相当の画面で、縦と横の両方にスクロールしなくても内容を読めることが求められています(WCAG 2.1 達成基準 1.4.10 リフロー(WAICによる日本語訳))。

先ほどの二重の構造をHTMLで書くと、次のように大きな箱の中に小さな箱を入れた形になります。

<div class="container">      <!-- ページ全体の大きな箱 -->
  <div class="cards">…カード3枚…</div>
  <div class="article-body"> <!-- 文章専用の小さな箱 -->
    <p>本文…</p>
  </div>
</div>

次のCSSは、ページ全体の幅を最大1,100px、本文の幅を最大40文字分にして、どちらも画面の中央に置く例です。

.container {
  max-width: 1100px;    /* ページ全体の幅の上限 */
  margin-inline: auto;  /* 左右の余白を自動で等分して中央に置く */
  padding-inline: 16px; /* 画面が狭いときも端に余白を残す */
}

.article-body {
  max-width: 40em;      /* 本文は全角40文字分まで */
  margin-inline: auto;
}

margin-inline: auto;は、左右の外側の余白(マージン)を自動で同じ量に割り振る指定で、幅を決めた要素を中央に置くときの定番の書き方です(MDN「margin」)。

画面の幅から箱の幅を引いた残りを左右で半分ずつ分け合うので、箱が真ん中に来る、とイメージすると分かりやすいでしょう。
なお、inlineは横書きのページでは左右(横方向)を表します。

emは、その要素の文字サイズを基準にした単位です。
文字サイズが16pxなら1emは16pxなので、40emは16px×40＝640pxになります。

文字サイズを18pxに変えれば40emは720pxに広がるので、文字の大きさを変えても、全角約40文字分の幅が保たれます。

padding-inlineで左右に余白を入れておくと、スマートフォンのように画面がコンテンツ幅より狭いときでも、文字が画面の端にくっつきません(外側の余白marginと内側の余白paddingの違いはCSSのmarginとpaddingの違いとはで解説しています)。

デザインツールでコンテンツ幅を決める

FigmaなどのデザインツールでWebページを作るときも、最初にコンテンツ幅を決めておくと、要素の位置がぶれにくくなります。

Figmaなら、パソコン向けの幅のフレームに「レイアウトガイド」を追加し、種類を「列」、タイプを「中央」にして幅を指定すると、コンテンツ幅の範囲を画面中央に表示できます(Figmaヘルプ「レイアウトガイドを作成」)。

このガイドの内側にだけ要素を置くようにすれば、コーディングするときもそのままmax-widthの値として使えます(レイアウトガイドの追加のしかたやカラムの考え方はグリッドと余白の関係とはで解説しています)。

あわせて、フレームの幅を広げたり狭めたりして、大きなモニターでは間延びしないか、狭い画面では窮屈にならないかも確かめておきましょう。

実践のポイント

コンテンツ幅を決めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

ノートパソコンの画面だけで確認していると、大きなモニターで1行が長くなりすぎていることに気づきません。
ブラウザの幅を最大まで広げて、文章の1行が長くなりすぎていないかを確かめましょう。
ページ全体の幅と本文の幅を同じにしてしまい、本文の1行が60文字以上になっていることがあります。
文章の部分だけは、さらに狭い幅に収めましょう。
コンテンツ幅をwidthで固定してしまい、スマートフォンで横スクロールが出ることがあります。
幅はmax-widthで上限として指定するのが基本です。
コンテンツ幅をスマートフォンの画面幅ぴったりにして、文字が画面の端にくっついてしまうことがあります。
画面が狭いときも、左右に余白が残るようにしておきましょう。

よくある質問

Q. コンテンツ幅は何pxにすればいい?
A. 決まった正解はありません。
本文の幅は「文字サイズ×1行40文字前後」から、ページ全体の幅は並べたいカードや写真の数から逆算して決めましょう。
Q. 写真や背景色は、コンテンツ幅の外まで広げてもいい?
A. はい、背景色や大きな写真を画面の端から端まで広げ、その上の文章だけをコンテンツ幅に収めるデザインはよく使われます。
たとえば、ページ冒頭の大きな写真(メインビジュアル)や、セクションごとに色を変えた背景の帯は画面の端から端まで広げ、その上に載る見出しや文章だけを中央のコンテンツ幅にそろえる、という作りです。
広げてよいのは「見せるもの」、幅に収めるのは「読ませるもの」と考えると判断しやすいでしょう。
CSSでは、背景色をつける外側の箱には幅の上限をつけず、その内側の箱にだけmax-widthを指定すると、この形になります。
Q. スマートフォンでもコンテンツ幅を考える必要はある?
A. スマートフォンでは画面そのものが狭いので、本文の幅は画面幅から左右の余白を引いた幅になるのが一般的です。
その分、左右に何pxの余白を残すかが大切になります。