トップページ＞タグを打ってみよう！＞マージンとパディング

マージンとパディング

このページではマージンとパディングを説明しています。空間を生かしたレイアウトをすると読みやすいページになります。
マージンとパディングを理解しやすくするために、下の画像をご覧ください。

スタイルシートはボックス型の構造になっていて、ボーダーの内側がパディング、外側がマージンとよばれる。 スタイルシートはボックス型の構造をもっています。
ボーダーの内側がパディング、ボーダーの外側がマージン、と考えればよいと思います。
コンテンツはテキストや画像です。

マージンとパディングはさまざまなところで応用できて、装飾やレイアウトに欠かすことができないプロパティです。

パディングの指定

パディング、マージンとも指定していない状態です。 マージン、パディングを指定していないときのブラウザ表示。

この例では見出しと青い線が近すぎて、見出しが読みにくいです。また、全体を囲んでいる点線がぎりぎりまできているので、窮屈です。
そこで、まず見出しと青い線（ボーダー）の間を広げます。

スタイルシートで、h2にパディングを指定 
div{
    border: dotted 5px #c0c0c0;
    width: 480px;
    }
h2{
    border-top: solid 1px blue;
    border-bottom: solid 1px blue;
    padding: 5px;
    }

ブラウザの表示、パディングで見出しの上下に空きをつくる。
h2に対し、パディングを５ピクセルに指定しました。見出しと、青い線の間が空いて、見やすくなりました。
padding: 5pxは、見出しと青い線（ボーダー）の間を５px空けるという指定です。しかし、まだ全体を囲んでいる点線と内容の間が窮屈です。

スタイルシートで、divにパディングを指定 
div{
    border: dotted 5px #c0c0c0;
    width: 480px; 
    padding: 10px;
    }
h2{
    border-top: solid 1px blue;
    border-bottom: solid 1px blue; 
    padding: 5px;
    }

パディングで点線を広げるようにする。
divに対して、パディングを１０pxに指定しました。全体を囲む点線が広がって見やすくなりました。
padding: 10pxは内容（コンテンツ）とボーダーの間を１０px空けるという指定です。このページの初めにある画像を参照してください。
内容全体を囲むdiv要素に対して指定したのがポイントです。

内容の体裁はよくなりましたが、内容全体が画面の左に寄っています。
そこで、画面の左側を少し空けて余裕をもたせます。

上に戻る

マージンの指定

スタイルシートでマージンを指定 
div{
    border: dotted 5px #c0c0c0;
    width: 480px;
    padding: 10px;
    margin-left: 15px;
    }
h2{
    border-top: solid 1px blue;
    border-bottom: solid 1px blue;
    padding: 5px;
    }

ブラウザの表示、マージンで画面左側の空きスペースを作る。
全体を囲むdiv要素に対して、マージンを1５pxに指定しています。
これで、画面左側にスペースができ、見やすくなったと思います。

パディングとマージンのポイント

どのくらいのスペースを空ければよいか、わからなくなったときは、パディングもマージンも一度０ゼロにして、ブラウザで表示させてみます。その後でpx数を入力して、ブラウザで確認すれば、見当がつけやすくなると思います。

指定とブラウザ表示を繰り返すのが、見やすくきれいなページをつくる秘訣だと思います。pxピクセル数の感じがつかめると指定もやりやすくなります。
HTMLエディタなどのソフトを使うと、プレビュー機能がついていて、プレビューで確認しながらタグ打ちができるので、作業の能率があがります。

用語：ボックス構造/ピクセル

ホームページ作成 用語集

ボーダーで見出しを装飾する前のページ | 次のページ横幅を決める

上に戻る

inserted by FC2 system