前章に戻る
Lists これは CSS Getting Started チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。
ボックスについて
ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。
中央に、要素（elment）がその内容を表示するのに必要なスペースがあります。その周りに パディング（padding） があり、その周りに ボーダー（border） があります。その周りには マージン（margin） があって、他要素とその要素を隔てています。
|
マージン ボーダー パディング 要素 薄い灰色がレイアウトの部品を示します。 |
要素nt ブラウザではこう見えます。 |
パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。
彩色
パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。
|
マージン ボーダー パディング 要素 要素の背景色は緑です。 |
要素 ブラウザではこう見えます。 |
ボーダー
ボーダーを使って、要素を線や枠囲みで装飾できます。
要素の境界線をすべて同じにするには、border プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。
選べるスタイル:
solid |
dotted |
dashed |
double |
inset |
outset |
ridge |
groove |
また、スタイルを none か hidden にして、明示的にボーダーを消したり、色を transparent にして、レイアウトを変えずにボーダーを透明にしたりできます。
一辺ずつボーダーを定義するには、次のプロパティを使います: border-top、border-right、border-bottom、border-left。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。
次のルールは、見出し要素の背景色と上辺のボーダーを定義します:
h3 {
border-top: 4px solid #7c7; /* mid green */
background-color: #efe; /* pale green */
color: #050; /* dark green */
}
結果は次のようになります:
|
スタイルつきの見出し |
次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:
img {border: 2px solid #ccc;}
結果は次のようになります:
| 画像: |  |
マージンとパディング
マージンとパディングで要素の位置を調整し、周りに余白を作ります。
margin プロパティと padding プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。
幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。
幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。
4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left
次のルールは、remark クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。
パディングで囲むことで、テキストから枠が少し離れます。
左マージンは段落を他のテキストからインデントします:
p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
結果は次のようになります:
|
ここは通常の段落です。 ここは remark 用の段落です。 |
マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。
ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。
望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。
パディング、マージン、ボーダーについての詳しい情報は、リファレンスの ボックスモデル をご覧ください。
実習: ボーダーの追加
CSS ファイル style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください:
h3 {border-top: 1px solid gray;}
前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:
li {
list-style: lower-roman;
margin-bottom: 8px;
}
ブラウザを更新すると次の結果になります:
|
(A) The oceans
(B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:
|
(A) The oceans
(B) Numbered paragraphs . . . |
（幅や色を正確に同じにする必要はありません。）
さて次は？
次のセクション :
Layoutマージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の レイアウト を変えます。