ボックス系のプロパティとして、「マージン」「ボーダー」「パディング」が存在します。 この他にも幅や高さなどのプロパティを「その他」としてまとめました。 ボックス系の詳細の説明は、「整形モデル」に記してありますので参照して下さい。
ボーダーは、ブロックレベル要素とインライン要素とで、 その枠線の付き方が変わってきます。ブロックレベル要素の場合は要素全体を1まとめにした枠線になりますが、 インライン要素の場合は1行1行に枠線が付きます。全体を囲みたい場合は、ブロックレベル要素にする必要があります。 代表的なHTMLに、DIV要素(汎用的なブロックレベル要素)があります。 (が、文法は守りましょう。例えば、P要素内にDIV要素は指定できません。 DIV要素を用いる場合は、<P>の後には</P>を付ける必要があります。・・・本来は省略可能ですが)
また、多くのプロパティが存在する分、その指定順序に留意しなければなりません。 例えば、ボーダー全体を指定しておいて、その後に上ボーダーを再度指定し直し、その際にある値を省略した場合などです。 サンプルを例に取ると、
P{ font-size : 36pt; /*フォントサイズ36pt:でかい*/ color : blue; /*フォントカラーを青*/ text-align : center; /*テキスト位置を中央寄せ*/ border : 0.8em solid red; /*全ボーダーを36ptの0.8倍、実線、赤*/ border-top : 0.8em solid; /*上ボーダーを36ptの0.8倍、実線*/ /*上ボーダーカラー未指定なのでフォントカラー青が初期値として用いられる*/ /*NN4はならないのでバグ(^^;; しかもこのサンプルもブロックレベルなのにインライン扱い・・・*/ }
UL{ border-style : solid; /*UL要素のボーダースタイルを実線*/ border-color : #0000ff; /*UL要素のボーダーカラーを青*/ border-top-width : 1em; /*UL要素の上ボーダーをフォントサイズの 1倍*/ border-right-width : 2em; /*UL要素の右ボーダーをフォントサイズの 2倍*/ border-bottom-width : 1em; /*UL要素の下ボーダーをフォントサイズの 1倍*/ border-left-width : 2em; /*UL要素の左ボーダーをフォントサイズの 2倍*/ }
上ボーダー(枠線)の幅を指定をします。 負の値は使用できません。
上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。
UL{ border-style : solid; /*UL要素のボーダースタイルを実線*/ border-color : #0000ff; /*UL要素のボーダーカラーを青*/ border-top-width : 1em; /*UL要素の上ボーダーをフォントサイズの 1倍*/ border-right-width : 2em; /*UL要素の右ボーダーをフォントサイズの 2倍*/ border-bottom-width : 1em; /*UL要素の下ボーダーをフォントサイズの 1倍*/ border-left-width : 2em; /*UL要素の左ボーダーをフォントサイズの 2倍*/ }
右ボーダー(枠線)の幅を指定をします。 負の値は使用できません。
上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。
UL{ border-style : solid; /*UL要素のボーダースタイルを実線*/ border-color : #0000ff; /*UL要素のボーダーカラーを青*/ border-top-width : 1em; /*UL要素の上ボーダーをフォントサイズの 1倍*/ border-right-width : 2em; /*UL要素の右ボーダーをフォントサイズの 2倍*/ border-bottom-width : 1em; /*UL要素の下ボーダーをフォントサイズの 1倍*/ border-left-width : 2em; /*UL要素の左ボーダーをフォントサイズの 2倍*/ }
下ボーダー(枠線)の幅を指定をします。 負の値は使用できません。
上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。
UL{ border-style : solid; /*UL要素のボーダースタイルを実線*/ border-color : #0000ff; /*UL要素のボーダーカラーを青*/ border-top-width : 1em; /*UL要素の上ボーダーをフォントサイズの 1倍*/ border-right-width : 2em; /*UL要素の右ボーダーをフォントサイズの 2倍*/ border-bottom-width : 1em; /*UL要素の下ボーダーをフォントサイズの 1倍*/ border-left-width : 2em; /*UL要素の左ボーダーをフォントサイズの 2倍*/ }
左ボーダー(枠線)の幅を指定をします。 負の値は使用できません。
上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。
UL{ border-style : solid; /*UL要素のボーダースタイルを実線*/ border-color : #0000ff; /*UL要素のボーダーカラーを青*/ border-width : 1em 2em; /*UL要素の上下、右左ボーダーをフォントサイズの 1倍 2倍*/ }
このプロパティは、border-top-width,border-right-width , border-bottom-width,border-left-width を同時に指定可能です。 指定する値は1〜4個の任意で、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順(0時から時計回りと覚えると良い)で指定します。 効率良い指定が可能です。
値 | 適用ボーダー | |||
上 | 右 | 下 | 左 | |
A | A | A | A | A |
A , B | A | B | A | B |
A , B , C | A | B | C | A |
A , B , C , D | A | B | C | D |
上記の曖昧な表現は、実際のボーダーの太さがブラウザに依るからです。 ただし、太さ関係は「thin」<=「medium」<=「thick」となります。
BODY{ color : #000000; /*文書全体のフォントカラーを黒*/ } P{ border-style : solid; /*P要素のボーダースタイルを実線*/ border-width : 1em; /*P要素の全ボーダーをフォントサイズの 1倍*/ /*ボーダーカラーはBODY要素のフォントカラーを継承し黒*/ } UL{ border-style : solid; /*UL要素のボーダースタイルを実線*/ border-color : #0000ff; /*UL要素のボーダーカラーを青*/ border-width : 1em 2em; /*UL要素の上下、右左ボーダーをフォントサイズの 1倍 2倍*/ }
ボーダー(枠線)の色を指定をします。 このプロパティは、一括指定が可能なプロパティで(逆に一辺ずつ色の指定をするプロパティは無い)、 指定する値は1〜4個の任意、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順(0時から時計回りと覚えると良い)で指定します。
値 | 適用ボーダー | |||
上 | 右 | 下 | 左 | |
A | A | A | A | A |
A , B | A | B | A | B |
A , B , C | A | B | C | A |
A , B , C , D | A | B | C | D |
UL{ /*こちらはスタイルが「none」のためボーダーは非表示*/ border-color : #0000ff; /*UL要素のボーダーカラーを青*/ border-width : 1em; /*UL要素の全ボーダーをフォントサイズの 1倍*/ } UL UL{ border-style : solid; /*UL要素内のUL要素のボーダースタイルを実線*/ border-color : #0000ff; /*UL要素内のUL要素のボーダーカラーを青*/ border-width : 1em; /*UL要素内のUL要素の全ボーダーをフォントサイズの 1倍*/ }
ボーダー(枠線)のスタイルを指定をします。 このプロパティは、一括指定が可能なプロパティで(逆に一辺ずつスタイルの指定をするプロパティは無い)、 指定する値は1〜4個の任意、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順(0時から時計回りと覚えると良い)で指定します。
プロパティ値において、Cascading Style Sheets, level 1(REC-CSS1-19990111)では、
「Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset
」となっています。
が、記述の中では{1,4}的であり、更にサンプルもそうなっているので、勝手に{1,4}を付け加えました。(^^;;
CSS1コア:「none」以外は「solid」として扱っても良い(サンプルで説明通りに表示されなければお使いのブラウザがサポートしていない証拠です)
H1{ border-top : medium solid #0000ff; /*H1要素の上ボーダーのみを幅普通、実線、青に指定*/ /*上以外のボーダーは初期値の非表示になります*/ }
上ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。
H1{ border-right : medium solid #0000ff; /*H1要素の右ボーダーのみを幅普通、実線、青に指定*/ /*右以外のボーダーは初期値の非表示になります*/ }
右ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。
H1{ border-bottom : medium solid #0000ff; /*H1要素の下ボーダーのみを幅普通、実線、青に指定*/ /*下以外のボーダーは初期値の非表示になります*/ }
下ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。
H1{ border-left : medium solid #0000ff; /*H1要素の左ボーダーのみを幅普通、実線、青に指定*/ /*左以外のボーダーは初期値の非表示になります*/ }
左ボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーの一辺だけを指定したいときに有効です。
P{ border : thin solid #0000ff; /*P要素の全ボーダーのみを細幅、実線、青に指定*/ }
全てのボーダー(枠線)の幅、スタイル、色を同時に指定します。 ボーダーを個々に指定する必要がないときはこのプロパティを使用します。