整形モデル

スタイルシートでは単純なボックス指向の整形モデルを採用しています。

図に示すようにボックスの内側に表示する内容があり、その回りにはpadding、border、marginの各領域がある。

padding、border、marginの各属性はすべての要素の対して適用できます。

padding

表示する内容とborder(枠線)との間隔を指定する属性。

• この属性を指定していないときは表示する内容と枠線と間隔は0とみなされる。
• すべての要素で指定可能な属性

padding以外の属性は値をひとつだけしか指定できないが、paddingはひとつあるいは複数の値を指定できる。

例えば、上下左右をすべて10pxの間隔にしたいときのクラス定義は次のように記述する。

.P1 { padding : 10px }

以下のクラス定義は上記の記述と同等です。

.P1 {
  padding-top : 10px;
  padding-right : 10px;
  padding-bottom : 10px;
  padding-left : 10px;
}

次の段落はこのクラス定義を適用ものです。

このこの段落はpadding : 10pxを指定したものです。背景色を青、前景色を黄色にしています。

また、次のように記述したときは上下の間隔を10px、左右の間隔を20pxに指定したものとみなされる。

.P2 { padding : 10px 20px; }

この段落は上記のpaddingを指定した例です。

border

表示内容を囲む枠線の幅、色、種類を指定する属性。

枠線幅指定

枠線の指定には次の表に示す属性を使用する。

この属性に指定できる幅は次の4種類。

border-width以外はひとつの値を指定するがborder-widthは4つまで値を指定できる。

• ひとつだけ指定したときは上下左右がすべて同じ幅になる
• 二つ指定したときは最初の値が上下、次の値が左右の幅になる
• 三つ指定したときは最初の値が上、二つ目が左右、三つ目が下の幅になる
• 4つ指定したときは上、右、下、左の順で幅を指定したことになる

枠線を表示するには次のborder-style属性の指定が必要です。

枠線の種類指定

枠線の種類はborder-style属性で指定する。border-width属性と同様に4つまで値を指定できます。

枠線の種類は表に示すとおり。

色指定

枠線の色指定にはborder-color属性を使う。border-widthと同様に4つまで値を指定できる。

枠線の属性をまとめて指定する

枠線の上下左右の属性をそれぞれの辺ごとに指定する属性、border-top、border-bottom、border-left、border-rightとすべてをまとめて指定する属性borderがある。border属性では四辺の属性を別々には指定できない。

枠線の属性定義例を示す。P.bw1とP.bw2はまったく同じ結果になります。

P.bw1 {
  border-top-width : thin;
  border-right-wit : medium;
  border-bottom-width : thick;
  border-left-width : 5mm;
  border-color : black;
  border-style : solid;
}

P.bw2 {
  border-width : thin medium thick 5mm;
  border-color : black;
  border-style : solid;
}

P.bw3 { border : thin black solid }

• border属性のサンプルを見る

margin

marginは要素の最も外側の余白のことです。

• この属性を指定していないときは表示する内容と枠線と間隔は0とみなされる。
• すべての要素で指定可能な属性

marginもpaddingと同様に次の表に示す属性を持ちます。

margin以外の属性は数値、パーセンテージ、autoのいずれかの値をひとつだけしか指定できないが、marginはひとつ、あるいは複数の値を指定できる。

例えば、上下左右の余白をすべて10pxにしたいときは次のように記述する。

.P1 { margin : 10px }

また、次のように記述したときは上下余白を10px、左右余白を20pxに指定したものとみなされる。

.P2 { margin : 10px 20px; }

この段落はpadding属性を10px、border-width属性をthin、border-style属性をsolid、margin属性を20pxに指定しています。

width

要素の幅指定する属性。数値、パーセンテージ、autoのいずれかの値を指定する。

.P1 { width : 20cm }
.P2 { width : 80% }

この段落の幅は10cmです。

この段落の幅はページ幅の50%です。

height

要素の高さを指定する属性。数値、autoのいずれかの値を指定する。

この段落の高さは1cmです。

float

ボックスに対するテキストの回りこみを指定する属性。つぎの表に値を指定する。

画像をテキストの右側に配置するときは次のように記述する。

IMG.f1 { float : right }

• floatの使用例を表示する。

clear

回り込みの指定を解除する属性。つぎの表の値を指定する。