今回のポイント
マージンとパディング
インラインでのマージン指定と印刷

　前回，ヘッダやフッタ，ナビゲーションなどを付けたページ構成を一通り完成させたわけですが，一度プレーンなHTMLの世界に戻ります。何の装飾もなくシンプルなHTMLを書くと，テキストはブラウザ画面の左一杯から右端一杯までいって折り返すという表示になります（図1）。

図1●特に何の加工もないHTML。中身は<p>タグだけで，長めのテキストを入れている
図1●特に何の加工もないHTML。中身は<p>タグだけで，長めのテキストを入れている

　画面一杯に文字があるというのは，単位面積あたりの情報量が最も多いということです。何らかの情報を提供するのがHTMLの役割だとすれば，図1の状態はHTMLも目的を達するうえでは非常に効率が良いということになります。だけれども，これでは読みにくくてしかたありません。

　まず画面全体に文字がびっしりと並んでいるというのは，読む人に圧迫感を与えます。また画面全体に目を通さなくてはならないのでポイントが散漫になり，注視すべき部分を特定できなくなって集中力を阻害します。学生の頃に誰もが「字ばかりの本を見ると読む気がなくなる」と感じたことがあったと思います。大人の本は字が多くていけないと。

　図1はまさにそんな様相です。内容が難しいとか，興味の沸かないことであるということ以前に，文字の黒い塊が与える第一印象の圧迫感と散漫感が読む意欲を萎えさせてしまうわけです。つまり，いかに記述内容が優れていても，単位面積あたりの情報が多くても，このページは読んでもらいにくくなってしまっているわけですね。

　書籍や雑誌などの印刷物が，常にHTMLレイアウトの最良の手本というわけではありませんが（日本の印刷物は縦書き文化として成長してきたというだけでもWebとは異なります），ここはひとつ印刷物のノウハウを参考にしてみましょう。

CSSで文章の周りに余白を付ける――margin

　まずは文章の周りに余白を付けます。CSSでの余白にはマージン（margin）とパディング（padding）というふたつの種類があります。まずはマージンからやってみます。単純な<p>だけがあるサンプルです（リスト1）。<p>に対してCSSでマージンを指定してみます。

リスト1●マージンを指定して文章の周りに余白を設定した例 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSSでのレイアウト</title>
<style type="text/css">

p{
  /*左右に5em分，上下に2em分のマージン*/
  margin:2em 5em 2em 5em;
/*
上の指定は下記と同意
  margin-top:2em;
  margin-right:5em;
  margin-bottom:2em;
  margin-left:5em;
*/
}
</style>
  </head>
  <body>
<p>
～ここに適当な長さのテキストを入れてください～
</p>
  </body>
</html>

　結果は図2のようになります。<p>で囲まれたテキストの部分に対して上下左右に余白を付けました。図1と比較すると横幅が詰まった分だけ縦に長くはなってしまいましたが，テキストの黒い塊がページ全体に広がっていることから来る圧迫感からだいぶ解放されているのがわかります。読むべきテキストがぎゅっと中央に集約されたことで読む際の集中力もでてきます。余白はデザインというよりも心理効果面での影響が大きい装飾だと言えます。

図2●リスト1のブラウザ表示
図2●リスト1のブラウザ表示

　余談になりますが，印刷物の余白というのは心理効果以前に，印刷後にページを整えるための裁断や，ページ綴じ込みのためののりしろのため，端一杯まで活字を並べると切れてしまうことがあるからという工程上の問題もあってのことです。プリンタなどでも，通常は端一杯の文字で文字欠けが発生しないようにある程度の余白が出るように印刷は調整されていますね。

　マージンはここまで解説はしていませんでしたが，以前の数回の記事中で何回かサンプルの中で指定しています。CSSでの設定は次のように書きます。 

p{
  /*左右に5em分，上下に2em分のマージン*/
  margin:2em 5em 2em 5em;
}

　余白の大きさの指定は，境界線のborderで線の太さを指定したborder-widthプロパティと同様に，上を起点として右，下，左の時計回りです。値は半角スペースで区切ります。サンプルは余白にピクセルなどではなくem（1emはおよそ1文字相当の幅）を使っています。

　この指定は個別に次のように書くこともできます。 

  margin-top:2em;
  margin-right:5em;
  margin-bottom:2em;
  margin-left:5em;

　それぞれtopやrightとしてmargin-*を指定する方法です。margin-*で個別に設定しても，margin:2em 5em 2em 5em;のように一括指定しても結果は変わりません。