ページ左右の余白とは?PC・スマホで画面端の余白を決める基本

ページ左右の余白の基本

まずは、ページ左右の余白がどこを指すのか、なぜ必要なのかを押さえましょう。

あわせて、PCとスマホで余白の決まり方が違う理由も見ていきます。

ページ左右の余白とは

ページ左右の余白とは、画面(ブラウザの表示領域)の左右の端から、文字や画像などの中身までの間に取る空きのことです。

レイアウトの土台になる「グリッド」(画面を縦の列に分けて配置の目安にする考え方)では、この部分を「マージン」と呼びます(グリッドの仕組みはグリッドと余白の記事で解説しています)。

ここでのマージンは「画面の端と中身の間の空き」を指すデザイン用語です。CSSにも同じ名前のmargin(要素の外側の余白)がありますが、画面端の余白をCSSで作るときは、中身を包む箱にpadding(内側の余白)をつけて、中身を内側に押し込む方法がよく使われます(この記事後半のCSSの例もこの方法です)。

CSSのmarginとpaddingの違いは、marginとpaddingの記事で解説しています。

似た言葉に「コンテンツ幅」がありますが、こちらは中身そのものが並ぶ横幅のことです。

画面の横幅は「コンテンツ幅+左右の余白」でできている、と考えると関係がつかみやすくなります。

次の見本は、スマホの画面を想定して、同じ内容を左右の余白だけ変えて並べたものです。

NGの見本は、文字の書き出しが画面の縁にぴったりついていて、読み始めの位置が窮屈に見えます。

OKの見本は、左右に16pxの余白を取っただけで、同じ内容でも落ち着いて読めるようになります。

左右の余白が必要な理由

ページ左右の余白は、中身を読みやすくし、画面全体を整って見せるために必要です。

理由は大きく3つあります。

• 圧迫感をなくす:中身が画面の端ギリギリまで詰まっていると、情報が多く、窮屈に感じられます。
• 読み始めの位置を分かりやすくする:行の頭が画面の縁と重なると、目が行の始まりを見つけにくくなります。
• 端末の形に邪魔されない:スマホは画面の角が丸かったり、ケースの縁が画面にかかったりするため、端の近くは見えにくく、指でも触りにくい場所です。

AppleのデザインガイドラインであるHuman Interface Guidelinesでも、カメラ部分などの画面の特徴と重ならない「セーフエリア」(中身を安全に置ける範囲)や、システムが用意するマージンを守ることが勧められています(Human Interface Guidelines「レイアウト」(Apple))。

つまり左右の余白は、見た目を整えるだけでなく、どの端末でも中身をきちんと届けるための「守りの余白」でもあるのです。

PCとスマホで余白の決まり方が違う

ページ左右の余白は、PCとスマホで決まり方が大きく違います。

PCの広い画面では、中身の横幅に上限を決めて画面の中央に置くことが多く、その結果、左右に大きな余白が自然に生まれます。

一方、横幅の狭いスマホでは中身が画面いっぱいに広がるため、「最低限これだけは空ける」という左右の余白を自分で決めておく必要があります。

画面	左右の余白の決まり方	考えること
PC(広い画面)	コンテンツ幅に上限をつけて中央に置くと、余った分が左右の余白になる	コンテンツ幅をどのくらいにするか
タブレット(中くらい)	画面幅によって、上限に届いたり届かなかったりする	スマホより少し広めの最低限の余白
スマホ(狭い画面)	中身が画面いっぱいに広がるので、左右の余白を直接決める	最低限の余白を何pxにするか

次の見本は、PCの広い画面を想定して、中身を画面いっぱいに広げた場合と、横幅に上限をつけて中央に置いた場合を比べたものです。

NGの見本は、中身が画面の端近くまで広がり、1行も長くて目で追いにくくなっています。

OKの見本は、横幅に上限をつけたことで左右に余白ができ、内容がひとかたまりに見えます。

ページ左右の余白の決め方

ここからは、スマホとPCそれぞれで、ページ左右の余白を実際にどう決めればよいかを見ていきます。

スマホは「最低限の余白」を決める

スマホでは、左右の余白を16〜24px程度にしているWebサイトやアプリが多く見られます。

スマホの画面はもともと狭いため、余白を取りすぎると、中身に使える幅がどんどん減ってしまうからです。

たとえば横幅375pxの画面で左右に16pxずつ空けると、中身の幅は343px残ります。

これを左右48pxずつにすると中身の幅は279pxになり、16pxの本文なら1行に入る文字数がかなり減って、改行だらけの読みにくい文章になります。

NGの見本のように、PCで決めた広い余白をそのままスマホに当てはめると、中身が細長くなって読みにくくなります。

スマホの左右の余白は「端にくっつかない最低限」と考え、まずは16pxから試して、窮屈に感じたら24pxに広げる、という順で調整すると失敗しにくくなります。

PCはコンテンツ幅を先に決める

PCでは、左右の余白の数値を直接決めるより、先にコンテンツ幅の上限を決めるのが基本です。

PCの画面幅は人によって大きく違うため、「左右100px」のように余白を固定すると、広いモニターでは中身が横に伸びすぎ、狭いノートPCでは窮屈になってしまうからです。

中身の横幅に上限をつけて中央に置けば、画面が広いほど左右の余白も自動的に広がり、どの画面でも中身の幅は一定に保てます。

本文が中心のページなら、1行の長さが長くなりすぎない幅が目安になります(1行の長さの考え方は行間と行長の記事で解説しています)。

ただし、画面幅がコンテンツ幅の上限より狭くなったときには、スマホと同じように最低限の左右の余白が必要です。

PCでは「コンテンツ幅の上限」と「最低限の左右の余白」の2つをセットで決めておく、と覚えておきましょう。

数値は間隔のルールから選ぶ

左右の余白の数値は、ページ内のほかの余白と同じ「間隔のルール」から選ぶと、全体に統一感が出ます。

余白の数値を場所ごとに感覚で決めると、17pxや22pxのような中途半端な値が混ざり、ページ全体の揃い方がばらばらになるからです。

よく使われるのは、8の倍数(8・16・24・32…)を基準にする方法で、デジタル庁のデザインシステムでも8 CSS pxを基準の単位にする考え方が紹介されています(余白(デジタル庁デザインシステム))。

13pxや19pxのようなばらばらの数値を使わず8の倍数に揃えておくと、選ぶ候補が絞られて迷いにくくなり、ページ全体の余白にも自然と規則的なリズムが生まれます。なぜ8が選ばれるのかは、8pxグリッドの記事で詳しく解説しています。

たとえば「スマホは16px、タブレットは24px、PCで画面が狭いときは32px」のように、画面の大きさに合わせて同じ段階の中から選ぶと、まとまりのある余白になります。

CSSで左右の余白をつける例

ここからは、コーディングする人向けの補足です。

デザインツールだけを使う人は、「コンテンツ幅の上限」と「最低限の左右の余白」の2つを決める、という考え方だけ押さえておけば十分です。

CSSでは、次のように中身を包む箱に上限の幅と左右の内側の余白を指定します。

.container {
  max-width: 1080px;    /* コンテンツ幅の上限 */
  margin-inline: auto;  /* 左右の外側を自動にして中央に置く */
  padding-inline: 16px; /* 最低限の左右の余白(スマホ) */
}

@media (min-width: 768px) {
  .container {
    padding-inline: 24px; /* 画面が広くなったら少し広げる */
  }
}

margin-inlineやpadding-inlineは「論理プロパティ」と呼ばれる比較的新しい書き方で、横書きのページでは「左右をまとめて指定する便利な書き方」と考えて大丈夫です。従来の書き方なら、margin-inline: autoはmargin-left: auto; margin-right: auto;、padding-inline: 16pxはpadding-left: 16px; padding-right: 16px;と同じ意味です(よく見かけるmargin: 0 auto;も中央に置く書き方ですが、こちらは上下の余白も0にする点が違います)。

max-widthは横幅の上限、margin-inline: autoは左右の外側の余白を自動で均等に割り振って中央に置く指定です(MDN「max-width」)。

padding-inlineは左右の内側の余白をまとめて指定するプロパティで、画面幅が上限より狭いときでも、この分だけは中身が端から離れます(MDN「padding-inline」)。

@media (min-width: 768px)は「画面幅が768px以上のときだけ」という条件で、画面の大きさに合わせて余白を切り替えるときに使います。

実践のポイント

ページ左右の余白で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• PCのデザインで決めた左右の余白を、そのままスマホにも使ってしまうことがあります。
  スマホでは中身の幅が足りなくなるので、画面の大きさごとに余白の値を用意しましょう。
• PCのデザインだけを作り、スマホ表示で左右の余白がほぼ0になっていることに気づかないことがあります。
  必ず実際のスマホで開いて、文字が画面の端にくっついていないか確認しましょう。
• ページの一部分だけ左右の余白が違い、行の頭の位置がずれて見えることがあります。
  見出し・本文・画像など、ページの中身は同じ左右の余白の線に揃えるのが基本です。

よくある質問

• Q. 写真や背景色も、左右の余白の内側に収めないといけない?
  A. 必ずしもそうではありません。
  メインビジュアルの写真やセクションの背景色は、あえて画面の端まで広げて迫力を出すこともあります。
  その場合も、上に重ねる文字やボタンは左右の余白の内側に置くと、読みやすさを保てます。
  作り方としては、背景や写真を受け持つ画面幅いっぱいの大きな箱を外側に用意し、その中に文字を入れる箱(上限の幅と左右の余白をつけた箱)を入れる、二重の箱にするのが基本です(詳しくはコンテンツ幅の記事のよくある質問で解説しています)。
• Q. スマホを横向きにしたときも同じ余白でいい?
  A. 基本は同じ考え方で大丈夫ですが、カメラ部分が画面に食い込んでいる機種では、横向きにするとその部分に中身が隠れることがあります。
  CSSではenv(safe-area-inset-left)などで、端末ごとのセーフエリアの幅を余白に足せます(MDN「env()」)。
• Q. 左と右で余白の量を変えてもいい?
  A. ふつうのWebページでは、左右を同じ量にするのが基本です。
  左右の余白がずれていると、中身が片側に寄って見え、不安定な印象になるためです。

まとめ

ページ左右の余白とは、画面の左右の端から中身までの間に取る空きのことで、圧迫感をなくし、どの端末でも中身を読みやすく届けるために欠かせません。

スマホでは16〜24px程度の「最低限の余白」を決め、PCではコンテンツ幅の上限を先に決めて中央に置くことで、画面の大きさに合った余白が生まれます。

まずは自分が作ったページ(またはよく見るWebサイト)をスマホで開き、文字の書き出しが画面の端から何pxくらい離れているかを確かめてみてください。