SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [整形モデル]

CSS1 Reference

整形モデル

1. 各部分の定義

整形モデル(Formatting model)とは、ある要素が1つのボックスを持つというCSSの概念です。 ボックス系(マージン、パディング、ボーダーなど)のスタイル指定時にこれらの各部分の定義が必要になります。 ここでは、その名称と該当する整形モデルの箇所について触れてみます。

整形モデルには下記のような基本的名称とそれらの定義があります。 (視覚的に理解すると分かり易い)

マージン(margin)
余白を意味し、テキストや色、枠線の表示も無い、ボックス最も外側の部分
ボーダー(border)
枠線で、マージンの1つ内側にあり、パディングの1つ外側でボックスの外枠線の部分
パディング(padding)
枠線の内側で、内部のテキストとの余白を指し、背景色などは存在する枠線と内容の間の部分
幅(width -> その他)
ボックスの幅(上記3つを含む)と内容の幅(上記3つを含まない)の2種類有り、各々区別して呼ばれる

これらの各部分がどのような形状(大きな一塊りのボックスになるのか、行ごとのボックスになるか)は、HTMLにおけるブロックレベル要素インライン要素に委ねられます。 一部の例外を除いて、HTMLで定義される要素は殆どどちらかに分類(両方なり得るものもある)されています。 これらの違いは直感的には、BR要素無しに改行されるかどうかで判断できます。 詳細は以下の説明か或いはHTML4.0リファレンスをご覧下さい。

[Go To Top]

2. ブロックレベル要素

W3Cによると、

Elements with a 'display' value of 'block' or 'list-item' are block-level elements. Also, floating elements (elements with a 'float' value other than 'none') are considered to be block-level elements.

となっており、いかにも「display」プロパティを指定すればブロックレベル要素になるような記述ですが、実際はそうはいかないようです。 正確にはHTMLのDTDで定義されている要素がブロックレベル要素になるようで、現在CSSをサポートしているブラウザはそのように表現します。 (実際問題として、「display」をサポートしていないようです) また、「display」プロパティは必ずしもサポートされているとは限りません。

ただし話がややこしくなるので、浮動要素も含めてここではブロックレベル要素と呼称して進めることにします。

マージンやパディングは継承性を持ちませんが、視覚(感覚)上ではその要素の子要素に影響を与えることとなります。

[Go To Top]

2-1. 垂直方向の整形

垂直方向は上から順に

  1. margin-top
  2. border-top
  3. padding-top
  4. height
  5. padding-bottom
  6. border-bottom
  7. margin-bottom

で構成されます。仕様書には書かれていませんが、仮に全ての値を指定し、それらの合計が合わないとき、「auto」をとり自動的に調整されます。 また水平方向の整形とは異なり、隣接し合う要素同士のマージンはそれぞれの合計ではなく、いずれか大きい方の値をとります。 ただし、間に「padding」が存在すればこの限りではありません。

[Go To Top]

2-2. 水平方向の整形

水平方向は左から順に

  1. margin-left
  2. border-left
  3. padding-left
  4. width
  5. padding-right
  6. border-right
  7. margin-right

で構成されます。垂直方向の整形同様に仮に全ての値を指定し、それらの合計が合わないとき、「auto」をとり自動的に調整されます。 ただし、マージンの相殺は存在しないので、指定した通りのマージンがとられることになります。

[Go To Top]

2-3. リスト要素

display」プロパティを「list-item」に指定すればリスト要素として扱えます。 ただし、ブラウザがサポートしている必要があり、実状は UL要素OL要素LI要素などでリストを実現します。

リスト要素はブロックレベル要素で扱えますし、HTML上でもブロックレベル要素で且つ更にブロックレベル要素を持つことが可能です。 ですので、リストをネストすることも可能です。

[Go To Top]

2-4.浮動要素

浮動要素とは、ブロックレベル要素インライン要素とは異なり、 位置を固定せずに、周りの状態に合わせて位置決めする要素です。(イメージ的には、IMG要素のAlign属性をした状態で、 画像の周りにテキストを回り込ませるのと同じ)「float」プロパティを指定します。 ただし、ブロックレベル要素として扱われます。

浮動要素は、マージンの相殺などは起きずに、また他の要素にぶつかることもありません。 例えば、「float」プロパティを「left」に指定した場合、その親要素のパディングまで左によせられ、 その浮動要素の右側にテキストが書かれる(回り込む)ことになります。

[Go To Top]

3. インライン要素

インライン要素とは、改行を伴わない要素として考えておけば良いでしょう。 ですので、1行に2つのインライン要素が存在することもあります。強調などを示す要素、EM要素やSTRONG要素なども代表的なインライン要素です。

例えば、インライン要素の背景「background-color」を指定し、その要素が複数行に渡ると、 行間「line-height」分だけスペース(行間)が空いたように見えます。 NN4では、ブロックレベル要素でもこのような現象が発生してしまいます。

[Go To Top]

4. 置換要素

置換要素とは、IMG要素のように外部から代わりのものを持ってきて、それを代替えに使おうとするもので、 代表として画像があげられます。これらは、そのものがサイズを持っており、 IMG要素Width属性Height属性と同じく、 「width」「height」を省略すればそのもののサイズで、指定すればそのサイズで表現されます。

[Go To Top]

5. BR要素

BR要素とは強制的に改行を行うもので、CSS1では残念ながらこの機能は実現できませんでした。 ですので、あくまで例外として特別扱いにされています。 だからといって、BR要素を連発して行間をとるようなことは奨められません。このような場合は、的確にマージンやパディングをとって調整するようにしたいものです。 個人的には、フォームの内部の各要素の改行ぐらいに使えば良いかと思っています。

[Go To Top]

Last modified Apr,2002
Copyright(C)1999 Miyazaki , All Rights Reserved.