XHTML/CSS・トップ | CSSプロパティ・目次

●パディングをまとめて指定する

 padding は上下左右のパディングをまとめて指定するプロパティです。すべての要素に適用でき、値を1〜4個並べて上下左右のパディングを一度に指定することができます。使える値は長さを表す単位付きの数値ですが、パーセンテージ(〜%)も使えます。


【パディングとは】

 すべての要素は四角い領域(ボックス)を持っています。(すべてを指定したとすると)外側から内側へ順にマージン(margin)領域、枠線(border)、パディング(padding)領域、内容(content)領域となっています。つまり、パディングとは枠線と要素の内容領域との中間にある空間のことです。要素に背景色や枠線を適用したとき、テキストなどの内容領域の周りに適度な空間があると見やすくなります。


■ 値を1〜4個の範囲内で指定し、値は半角スペースで区切ります。

値が一個 上下左右のパディング

値が二個 最初の値が上下、二つ目の値が左右のパディング

値が三個 上、左右、下のパディング

値が四個 上、右、下、左のパディング


【CSS】

body {
 background-color: #000000;
 color: #ffffff
}
h2 {
 font-size: 1.3em;
 background: #e6e6fa;
 color: #006400;
 padding: 0.5em 1em
}

【補足】

 要素内の背景色と文字色の指定は必要がなければ記載しなくても構いません。また、実際のソースはクラス名を使っていますが、シンプルに書くと上記のようになります。直接関係のある書式は h2 { padding: 0.5em 1em } です。(クラス名の使い方は別項を参照にしてください。)


h2の見出しに#e6e6faの背景色と#006400の文字色を指定し、上下に0.5em、左右に1emのパディングを指定しています。


【HTML】

<h2>h2の見出しに#e6e6faの背景色と#006400の文字色を指定し、上下に0.5em、左右に1emのパディングを指定しています。</h2>


■参考ソース(クラス名を使った場合)

【CSS】

body {
 background-color: #000000;
 color: #ffffff
}
.sample {
 font-size: 1.3em;
 background: #e6e6fa;
 color: #006400;
 padding: 0.5em 1em;
}

【補足】

 sample がクラス名で、作者が任意の名前を付けます。また、CSSの書式にどのようなデザイン・レイアウトするかは作者が勘案します。


【HTML】

<h2 class="sample">h2の見出しに#e6e6faの背景色と#006400の文字色を指定し、上下に0.5em、左右に1emのパディングを指定しています。</h2>


【まとめ】

 padding は padding-top、 padding-bottom、 padding-left、 padding-right のプロパティを一度に指定するときに使います。これらの解説は割愛しますが、値を付けることにより、 padding プロパティと同じように上下左右のパディングを個別に指定することができます。

h1 {
 padding-top:1.5em;
 padding-bottom:1em;
 padding-left: 2em;
 padding-right: 4em
}


■参考ページ、関連ページ

XHTML/CSS・目次 | 領域(ボックス)・目次

Copyright (C) 2004-2007 http://www.xml.vc/