ウェブページの周囲にある余白のサイズや装飾を調整したい

ウェブページの周囲には余白が設けられる

ウェブページの周囲には余白が設けられる

代表的なブラウザは標準で、ウェブページの周囲に数ピクセルの余白を設けて表示します。そのため、右図のようにウインドウ端とコンテンツとの間には若干の隙間ができます。

描画可能な領域を最大限に使ってウェブページをデザインしたい場合には、ウェブページ周囲の余白量をゼロにする必要があります。また、ゼロにはしなくても余白量を少し減らしたい場合や、余白部分にだけ色を塗りたい(=背景色や背景画像を加えたい)場合には、余白部分だけを対象にして装飾する方法が必要です。

このウェブページ周囲にある余白部分は、CSS(スタイルシート)を使うことで消すこともできますし、サイズを調節することもできますし、背景色や背景画像を加えることもできます。

ページ周囲の余白を消したり狭めたり色を塗ったりする

ウェブページの周囲にある余白を消したり狭めたり色を塗ったりしたい


今回は、このウェブページの周囲にある余白部分を自由に装飾する方法をご紹介いたします。

ウェブページ周囲の空白は、body要素に対する余白

本文領域全体を示すbody要素の周囲に余白が設定されている

本文領域全体を示すbody要素の周囲に余白が設定されている

ウェブページの周囲に標準で設けられる空白は、body要素に対する余白として定義されています。ですから、body要素の余白量をCSSで調節すれば、余白をなくしたり余白量を増減したりできます。余白部分に背景色を加えたい場合には若干の工夫が必要ですが、body要素に対する装飾を調整する点は同じです。

※body要素とは、HTMLソース中の<body>~</body>タグで囲まれた領域のことで、ウェブページの本文を記述する部分です。body要素は、HTMLソース中に必ず1回だけ登場します(条件によっては省略可能ですが)。

それでは、下記の順に具体的な記述方法をご紹介いたします。

【本記事の目次】
  1. ウェブページ周囲の余白を完全に消す記述方法
    :周囲の余白をゼロにして描画領域の端まで本文を表示する方法
  2. ウェブページ周囲の余白量を自由に指定する記述方法
    :上下左右に等しく余白を設ける方法, 上下と左右とで異なる量の余白を設ける方法
  3. ウェブページ周囲の余白部分にだけ背景色や画像を加える記述方法
    :上下左右の周囲に背景色を加える方法, ページの両端にだけ背景画像を加える方法


1. ウェブページ周囲の余白を完全に消す記述方法

周囲の余白を消す

周囲の余白を消す

ブラウザのウインドウ端ギリギリまで全体を使ってページをデザインしたい場合や、ウインドウ全体を使って1枚の画像を掲載したい場合など、ウェブページの周囲にある余白を完全に消したい(=余白量を0ピクセルにしたい)場合があります。

ウェブページ周囲の余白を完全に消すには、以下のようにCSSソースを記述します。
<style type="text/css">
body {
   margin: 0px;
   padding: 0px;
}
</style>
上記では、body要素に対して
  • 外側の余白(margin)を0pxにし、
  • 内側の余白(padding)も0pxにする
……という装飾を加えています。

ウェブページの周囲に設けられる標準の余白が「margin(外側の余白)だ」という解釈なのか「padding(内側の余白)だ」という解釈なのかがブラウザによって異なる可能性を考慮して、ここではmarginとpaddingの両方に値「0px」を指定しています。

※補足:余白には外側と内側の2種類がある
余白には外側(margin)と内側(padding)の2種類がある

余白には外側(margin)と内側(padding)の2種類がある

CSSで指定できる余白には、外側の余白(margin/マージン)と、内側の余白(padding/パディング)の2種類があります。枠線を基準にして、枠線の外側に余白を設けるか、枠線の内側に余白を設けるかの違いがあります。これらの位置関係は、記事「横幅を100%にした際、親ボックスからはみ出すのを防ぐ」でも紹介していますので、併せてご参照下さい。


 

2. ウェブページ周囲の余白量を自由に指定する記述方法

周囲の余白を自由調整

周囲の余白を自由調整

ウェブページの周囲にある余白のサイズを細かく調整したい場合があります。ゆったり広めの余白を上下左右に設けたい場合や、左右には広い余白を設けつつ上下は詰めて表示したい場合などです。余白量は上下左右を一括して指定することもできますし、個別に指定することもできます。

ウェブページ周囲の余白量を自由に指定するには、以下のようにCSSソースを記述します。


 
2A. ウェブページ周囲の上下左右に、等しく余白を設ける書き方
<style type="text/css">
body {
   margin: 0px;    /* 外側の余白をゼロに */
   padding: 40px;  /* 内側の余白を40pxに */
}
</style>
上記は、上下左右の余白量すべてを40ピクセルにする場合の記述例です。ここではmargin側をゼロにした上でpadding側に値「40px」を指定しましたが、margin側に値「40px」を指定しても同じ効果です。

2B. ウェブページ周囲の上下と左右とで異なる量の余白を設ける書き方
<style type="text/css">
body {
   margin: 0px;           /* 外側の余白をゼロに */
   padding: 3.5em 15px;  /* 内側の余白を、上下は3.5文字分に、左右は15pxに */
}
</style>
上記は、上下の余白量を3.5文字分にして、左右の余白量を15ピクセルにする場合の記述例です。marginプロパティやpaddingプロパティに値を2つ書いた場合は、上下の余白量→左右の余白量の順に指定したと解釈されます(※)。なお、「1em」は「1文字分」という意味なので、「3.5em」なら「3.5文字分」の意味になります。このように、px(ピクセル)以外の単位を使うこともできます。

※値を4つ書いた場合は、上側から順に時計回りに指定したことになります。つまり、上側の余白量→右側の余白量→下側の余白量→左側の余白量の順です。

3. ウェブページ周囲の余白部分にだけ背景色や画像を加える記述方法

周囲の余白に背景色を付加

周囲の余白に背景色を付加

ウェブページ全体に背景色を指定したい場合は、単にhtml要素またはbody要素に対して背景色を加えれば良いだけです。しかし、本文領域の背景色と、周囲の余白領域の背景色を別々にしたい場合もあるでしょう。例えば、ページの両端にだけ背景色を加えるデザインを作りたい場合などです。そのような装飾も簡単です。

ウェブページ周囲の余白部分にだけ背景色や背景画像を指定するには、以下のようにCSSソースを記述します。

3A. ウェブページ周囲の余白部分に(上下左右等しく)背景色を付加する書き方
<style type="text/css">
body {
   margin: 0px;   /* 外側の余白をゼロに */
   padding: 0px;  /* 内側の余白をゼロに */
   border: 30px solid yellowgreen; /* 枠線を指定(太さ30pxの実線で黄緑色) */
   background-color: #ddffdd;  /* 本文部分の背景色 */
}
</style>
ページ周囲の余白を黄緑色に

ページ周囲の余白を黄緑色に

上記の場合は、ページの周囲に黄緑色の余白が30pxほど表示され、本文部分は淡い緑色の背景色で表示されます。

ここでは、余白はmarginもpaddingも共にゼロにする代わりに、枠線(border)を指定している点がポイントです。「body要素の枠線」とはつまり「ページ全体の枠線」です。枠線には自由な色と太さを指定できますから、この方法を使えばページの周囲に自由な色とサイズで余白を設けられます。


 
3B. ウェブページの両端にだけ背景画像を付加する書き方
<style type="text/css">
html {
   background-color: #80dddd;  /* 両端部分に付ける背景色(黄緑色) */
   background-image: url("image.jpg");/* 両端部分に付ける背景画像 */
}
body {
   margin: 0px 15%;  /* 外側の余白を、上下はゼロで左右は画面横幅の15%に */
   padding: 0px;  /* 内側の余白をゼロに */
   background-color: white;  /* 本文部分の背景色は白色 */
}
</style>
ページの両端にだけ背景画像を表示

ページの両端にだけ背景画像を表示

上記の場合は、ページの両端15%分にだけ画像(image.jpg)が背景画像として表示されます。もしこの画像が読み込めなかった場合は、代わりに水色(#80dddd)が背景色としてページの両端にだけ表示されます。本文部分の背景色は白色です。

ここでのポイントは、body要素ではなくhtml要素に背景画像(背景色)を指定している点です。body要素自体には別の背景色(ここでは白色)を加えた上で、外側の余白(margin)を設ければ、その「外側の余白」部分にだけhtml要素側の背景画像が表示されることになります。

ここではmarginプロパティに値「0px」と「15%」を指定しています。そのため、上下の余白はゼロになり、左右の余白は「画面横幅全体に対する15%のサイズ」になります。このように、割合で余白量を指定することもできます。


 

ウェブページ周囲の余白を様々に調整・装飾した表示例

これまでにご紹介した記述方法を使ったサンプルページを用意しています。お使いのブラウザで表示確認をしてみたい場合は、下記の各ページをご覧下さい。


ウェブページの周囲にある余白のサイズや装飾を調整する方法

今回は、ウェブページの周囲にある余白量を調整したり、余白部分を自由に装飾したりする方法をご紹介いたしました。特に、デザイン上の都合で周囲の余白量をゼロにしたいケースは多々あるでしょう。数行のCSSソースを記述するだけで簡単に調整・装飾できます。ぜひ、試してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。