領域に関するスタイル

ウェブページの要素は全て「領域（Box）」という四角形の範囲を持っています．

青い部分は，「マージン」と呼ばれ，ボックス領域とその内部のボックス領域の外境界線との間隔を表します．
赤い部分は，「ボーダー」と呼ばれ，ボックス領域を囲む境界線線を表します．
緑の部分は，「パディング」と呼ばれ，ボックス領域と「コンテンツ」との間隔を表します．

dammy: この部分が，「コンテンツ」と呼ばれ，文字や画像など実際に表示される内容です．
dammy: dammy

境界線の設定
マージンの設定
パディングの設定
領域の大きさの設定
領域からあふれた内容の表示方法の設定

境界線の設定

境界線の色を指定

プロパティ	値	意味
border-color	色の指定	境界線の色を設定

上下左右に別々の色を指定することもできます。

値	意味
値１	上下左右に同じ色を設定
値１値２	値１で上下、値２で左右の色を、それぞれ設定
値１値２値３	値１で上、値２で左右、値３で下の色を、それぞれ設定
値１値２値３値４	それぞれ、上、右、下、左の色を設定

境界線のスタイルを指定

プロパティ	値	意味
border-style	none（既定値）	境界線線なし
	solid	直線
	double	二重線
	groove	溝線
	ridge	稜線
	inset	領域が沈んで見える線
	outset	領域が浮かんで見える線
	dotted	点線
	dashed	破線

上下左右に別々のスタイルを指定することもできます。

値	意味
値１	上下左右に同じスタイルを設定
値１値２	値１で上下、値２で左右のスタイルを、それぞれ設定
値１値２値３	値１で上、値２で左右、値３で下のスタイルを、それぞれ設定
値１値２値３値４	それぞれ、上、右、下、左のスタイルを設定

境界線の太さを指定

プロパティ	値	意味
border-width	数値＋単位	境界線の太さを数値で指定
	thin	細めの線
	medium （既定値）	通常の線
	thick	太めの線

上下左右に別々の太さを指定することもできます。

値	意味
値１	上下左右に同じ太さを設定
値１値２	値１で上下、値２で左右の太さを、それぞれ設定
値１値２値３	値１で上、値２で左右、値３で下の太さを、それぞれ設定
値１値２値３値４	それぞれ、上、右、下、左の太さを設定

境界線の設定をまとめてする

プロパティ	値
border	A B C

A、B、C は、border-style、 border-width、 border-color を任意の順番で指定し、省略したときは既定値が使われます。

境界線の例

この領域の境界線線は、次のように設定されています。

上側	二重線	#ff0000	0.5cm
右側	破線	#00ff00	0.2cm
下側	直線	#0000ff	0.3cm
左側	稜線	#000000	0.4cm

境界線の角を丸くする

プロパティ	値	意味
border-top-left-radius	１つまたは２つの値を「数値＋単位」か「数値＋％」で指定	左上の角を指定した半径の円（値が１つの場合）または楕円（値が２つの場合）の一部で表示
border-top-right-radius		右上の角を指定した半径の円（値が１つの場合）または楕円（値が２つの場合）の一部で表示
border-bottom-right-radius		右下の角を指定した半径の円（値が１つの場合）または楕円（値が２つの場合）の一部で表示
border-bottom-left-radius		左下の角を指定した半径の円（値が１つの場合）または楕円（値が２つの場合）の一部で表示

角を丸くする設定をまとめてする

各値は「数値＋単位」か「数値＋％」をスペースで区切って指定する．
楕円形の角にする場合は，（横方向の半径をまとめた設定）/（縦方向の半径をまとめた設定）のように「/」で区切って指定する．

プロパティ	値	意味
border-radius	値１ ( / 値１)	全ての角に同じ半径を設定
	値１値２（ / 値１値２）	値１で左上と右下、値２で右上と左下の半径を，それぞれ設定
	値１値２値３（ / 値１値２値３）	値１で左上，値２で右上と左下，値３で右下の半径を，それぞれ設定
	値１値２値３値４（ / 値１値２値３値４）	それぞれ、左上，右上，右下，左下の半径を設定

角が丸い境界線の例

境界線を画像にする

注意： 直接スタイルを設定する方法ではうまく行きません．ページのヘッダーか外部ファイルに記述して下さい．また，Safariで表示するには「-webkit-border-image」を，FireFoxで表示するには「-moz-border-image」を「border-image」の代わりに使用して下さい．

プロパティ	値	意味
border-image	url("画像ファイル") （各辺からの距離）/（境界線の幅）（画像の繰り返し方法）	指定したURLの画像を「各辺からの距離」に指定した値で分割し，「境界線の幅」に指定した幅で，「画像の繰り返し方法」を用いて境界線として表示

「各辺からの距離」と「境界線の幅」はそれぞれ１つから４つの「数値＋単位」か「数値＋％」をスペースで区切って設定します．複数指定した場合は次のような指定になります．

値	意味
値１	全ての辺に同じ値を設定
値１値２	値１で上下、，値２で左右の辺の値をそれぞれ設定
値１値２値３	値１で上，値２で左右，値３で下の辺の値を，それぞれ設定
値１値２値３値４	それぞれ、上，右，下，左の辺の値を設定

境界線は，元の画像をボックスのサイズに合わせて拡大，縮小，繰り返しして表示します．どのように設定するかを「画像の繰り返し方法」に指定します．設定できる値は次のものです．

値	意味
stretch	境界線の長さに合わせて引き伸ばして表示
repeat	境界線の長さになるまで繰り返して表示．
round	境界線の長さに丁度合うように画像を拡大・縮小し，繰り返して表示．

境界線を画像にした例

マージンの設定

マージンというのは、領域とその内側にある領域の外境界線との間隔のことです。

プロパティ	値	意味
margin	数値＋単位	数値で直接指定。負の値も設定可能
	数値＋％	マージンを指定する領域が含まれる一つ上位の領域に対する割合で指定
	auto	自動的にマージンを調整する

上下左右に別々のマージンを指定することもできます。

値	意味
値１	上下左右に同じマージンを設定
値１値２	値１で上下、値２で左右のマージンを、それぞれ設定
値１値２値３	値１で上、値２で左右、値３で下のマージンを、それぞれ設定
値１値２値３値４	それぞれ、上、右、下、左のマージンを設定

別々に設定する場合、次のようなプロパティを使用することもできます。

プロパティ	値	意味
margin-top	margin と同様	上側のマージンを設定
margin-right		左側のマージンを設定
margin-bottom		下側のマージンを設定
margin-left		右側のマージンを設定

マージンの例

dammy

この領域のマージンは、次のように設定されています。
ここではマージンがわかり易いように色付けしてあります。

上側	0.5cm
右側	5cm
下側	1cm
左側	2cm

dammy

パディングの設定

パディンングというのは、領域の境界線と内容（コンテンツ）の間隔のことです。

プロパティ	値	意味
padding	数値＋単位	数値で直接指定。負の値は設定できない
	数値＋％	パディングを指定する領域が含まれる一つ上位の領域に対する割合で指定
	auto	自動的にマージンを調整する

上下左右に別々のパディングを指定することもできます。

値	意味
値１	上下左右に同じパディングを設定
値１値２	値１で上下、値２で左右のパディングを、それぞれ設定
値１値２値３	値１で上、値２で左右、値３で下のパディングを、それぞれ設定
値１値２値３値４	それぞれ、上、右、下、左のパディングを設定

別々に設定する場合、次のようなプロパティを使用することもできます。

プロパティ	値	意味
padding-top	margin と同様	上側のパディングを設定
padding-right		左側のパディングを設定
padding-bottom		下側のパディングを設定
padding-left		右側のパディングを設定

パディングの例

ここでは、パディングが次のように設定されています。

上側

1cm

右側

0.2cm

下側

2cm

左側

3cm

領域の大きさの設定

領域の高さを指定

プロパティ	値	意味
height	数値＋単位	数値で直接領域の高さを指定
	数値％	上位の領域に対する割合で指定
	auto	自動的に領域の高さを設定

領域の幅を指定

プロパティ	値	意味
width	数値＋単位	数値で直接領域の幅を指定
	数値％	上位の領域に対する割合で指定
	auto	自動的に領域の高さを設定

領域の大きさの設定例

この領域は、高さが３cm、幅がブラウザのウィンドウの５０％の大きさになるよう設定してあります。

領域のサイズの基準を設定

プロパティ	値	意味
box-sizing	content-box	「width」と「height」の値を内容領域の大きさとして適用
box-sizing	border-box	「width」と「height」の値を境界線の領域の大きさとして適用

領域に影を付ける

プロパティ	値	意味
box-shadow	none	影を付けない
	色	影の色を設定
	数値＋単位	１つ目の値：右方向へのズレを設定（負の場合は左）
		２つ目の値：下方向へのズレを設定（負の場合は上）
		３つ目の値：影をぼかす範囲の設定（省略可）
		４つ目の値：影を広げる距離の設定（省略可）
	inset	領域の内側に影が出来る

Safariで設定するには「-webkit-box-shadow」を「box-shadow」の代わりに使用して下さい．

例

影をつけた段落

領域からあふれた内容の表示方法の設定

領域の大きさを設定した場合に，内容がその領域の大きさを超えてしまったとき，あふれた部分の表示方法を指定します．

プロパティ	値	意味
overflow	visible	全領域を表示させる．
	hidden	領域を超えた部分は表示しない．
	scroll	領域にスクロールバーを付ける．
	auto	ブラウザに依存．領域を超えた場合にスクロールバーを付けることが多い．

overflowの設定例

「scroll」の設定をした場合．

この領域は、高さが３cm、幅がブラウザのウィンドウの７cmの大きさになるよう設定してあります。この領域は、高さが３cm、幅がブラウザのウィンドウの７cmの大きさになるよう設定してあります。この領域は、高さが３cm、幅がブラウザのウィンドウの７cmの大きさになるよう設定してあります。この領域は、高さが３cm、幅がブラウザのウィンドウの７cmの大きさになるよう設定してあります。この領域は、高さが３cm、幅がブラウザのウィンドウの７cmの大きさになるよう設定してあります。

「hidden」の設定をした場合．

内容があふれた場合の横方向の表示方法の設定

プロパティ	値	意味
overflow-x	overflowと同じ	overflowと同じ

内容があふれた場合の縦方向の表示方法の設定

プロパティ	値	意味
overflow-y	overflowと同じ	overflowと同じ

アウトラインと境界線の間隔を設定

プロパティ	値	意味
outline-offset	数値＋単位	境界線と要素の外縁との間隔を設定

要素の大きさを変更可能にする

プロパティ	値	意味
resize	none	サイズ変更出来なくする
	both	縦横両方のサイズ変更を可能にする
	horizontal	横幅のみ変更可能
	vertical	高さのみ変更可能