Boxes

これは CSS Getting Started チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。

ボックスについて

ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。

中央に、要素(elment)がその内容を表示するのに必要なスペースがあります。その周りに パディング(padding) があり、その周りに ボーダー(border) があります。その周りには マージン(margin) があって、他要素とその要素を隔てています。

マージン

ボーダー

パディング

要素

薄い灰色がレイアウトの部品を示します。

 

 

 

要素nt

ブラウザではこう見えます。

パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。

彩色

パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。

マージン

ボーダー

パディング

要素

要素の背景色は緑です。

 

 

 

要素

ブラウザではこう見えます

ボーダー

ボーダーを使って、要素を線や枠囲みで装飾できます。

要素の境界線をすべて同じにするには、border プロパティを使います。幅(画面表示されるときの単位は通常 pixel です)、スタイル、色を定義します。

選べるスタイル:

solid
dotted
dashed
double
inset
outset
ridge
groove

また、スタイルを nonehidden にして、明示的にボーダーを消したり、色を transparent にして、レイアウトを変えずにボーダーを透明にしたりできます。

一辺ずつボーダーを定義するには、次のプロパティを使います: border-topborder-rightborder-bottomborder-left。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。

次のルールは、見出し要素の背景色と上辺のボーダーを定義します:

h3 {
  border-top: 4px solid #7c7; /* mid green */
  background-color: #efe;     /* pale green */
  color: #050;                /* dark green */
}

結果は次のようになります:

スタイルつきの見出し

次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:

img {border: 2px solid #ccc;}

結果は次のようになります:

画像: Image:Blue-rule.png

マージンとパディング

マージンとパディングで要素の位置を調整し、周りに余白を作ります。

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

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

チャレンジ

スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

. . .

(幅や色を正確に同じにする必要はありません。)

このチャレンジの解答を見る。

さて次は?

マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の レイアウト を変えます。

添付ファイル

ファイル サイズ 日時 添付者:
Canvas_bezierova_krivka.png
2894 バイト 2006-08-29 16:27:42 DJ.Maca
Blue-rule.png
559 バイト 2005-07-01 09:21:24 Rod Whiteley

Document Tags and Contributors

Contributors to this page: ethertank
最終更新者: ethertank,