broderコマンド（CSS）｜無料ホームページ教室

おふとんの人 → ホームページ教室 → broderコマンド（CSS）

broderの使い方

borderコマンドは、ブロック要素、インライン要素に限らず、罫線を設定するためのCSSコマンドです。四角い枠線や、アンダーライン、左の太短い縦線などを引くことができます。

borderコマンド

broderコマンドの使用方法は、下の使用例に示すように、「border」と入力した直後に、「:（コロン）」を入れて、次に

罫線の太さ
罫線のスタイル
罫線の色

の順序で、それぞれ半角スペースで区切って入力し、最後に「;（セミコロン）」を入れます。この順序は、入れ替えることはできません。個々の設定内容は、後ほど詳しく説明します。

● 使用例

border: 3px solid red;

● spanタグに適用した例

テスト

この使用例では、表示結果からわかるように、太さ3pxの赤い実線で、四角の枠ができます。このように、何かを罫線で囲みたいときに、borderコマンドを使用します。

上下左右の罫線の個別設定

borderコマンドでは、枠線の上線、右線、下線、左線は、それぞれ個別に太さやスタイルを設定することはできません。下の例に示すように、個別の罫線が設定できるborderコマンドを使って、四角の枠で囲むのではなく、上線、右線など、それぞれの罫線を設定できます。

● 上線の例

border-top: 3px solid red;

上線の例の表示結果

テスト

● 右線の例

border-right: 3px solid red;

● 下線の例

border-bottom: 3px solid red;

● 左線の例

border-left: 3px solid red;

これら４種類のコマンドも、「border」と同じように、罫線の太さ、スタイル、色の順に設定します。上線のみ、表示結果を示しましたが、右線、下線、左線も、それぞれ試してください。

また、これらを組み合わせることによって、４方向の罫線の太さ、スタイルなどを、自由に変えることができます。

● 罫線を組み合わせた例

● 表示結果

テスト

以下に、設定項目を詳細に説明したいと思います。

設定項目の詳細

罫線の太さ

罫線の太さは、数字と単位を組み合わせます。単位は主に、「px」、「em」、「pt」がございます。私は、「px」をよく使います。

背景色の個別指定 >>border-width

罫線のスタイル

罫線のスタイルは、次のようなものがございます。また、下表には、罫線のスタイルと表示方法について、まとめました。

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

罫線のスタイルと表示方法
スタイル	説明	太さ1px	2px	3px	4px	5px	6px
dotted	点線	テスト	テスト	テスト	テスト	テスト	テスト
dashed	波線	テスト	テスト	テスト	テスト	テスト	テスト
solid	実線	テスト	テスト	テスト	テスト	テスト	テスト
double	二重線	テスト	テスト	テスト	テスト	テスト	テスト
groove	境界線がくぼむ影	テスト	テスト	テスト	テスト	テスト	テスト
ridge	境界線が飛び出る影	テスト	テスト	テスト	テスト	テスト	テスト
inset	線内側がくぼむ影	テスト	テスト	テスト	テスト	テスト	テスト
outset	線内側が飛び出る影	テスト	テスト	テスト	テスト	テスト	テスト
none	線なし	テスト	テスト	テスト	テスト	テスト	テスト
hidden	線を隠す	テスト	テスト	テスト	テスト	テスト	テスト

「dotted（点線）」と「dashed（波線）」は、太さが細いときは、少し似ています。太くなってくると、「dotted（点線）」は点々なのに対して、「dashed（波線）」は四角型で、コーナーがＬ字になっていることが、わかります。

「double（二重線）」は、太さが1pxや2pxの細いときは、「solid（実線）」と同じですが、3pxから二重線になります。1pxとは画面表示される最小ドット（点）単位のことです。3pxになることによって、ようやく、内側の線、中間のスペース、外側の線に、それぞれ1pxずつの太さを確保できるので、二重線に見えてきます。線の太さ4pxでは、インターネットエクスプローラ（IE）での表示は、内側1px、中間スペース1px、外側2pxとなるようです。

「groove（境界線がくぼむ影）」から、「outset（線内側が飛び出る影）」までは、色の異なる実線が引かれて、影ができたように見えます。罫線の色が黒だと、影と色が重なるので、見分けが付かなくなります。

「none」は、罫線を引いていない、未設定状態と同じです。「hidden」は、通常であれば「none」と同じです。

背景色の個別指定 >>border-style

罫線の色

罫線の色の入力方法は、「#fd8355」のような１６進数を入力するカラーコード指定か、「red」や「blue」のような色を直接指定するカラー名指定ができます。カラーコードとカラー名を、表にまとめた「カラーコードとカラー名の関係」では、赤、緑、青、カラー名で、ソートができます。ご活用ください。

背景色の個別指定 >>border-color

罫線の個別指定

太さ、スタイル、色の個別指定

borderコマンドでは、四角の枠のそれぞれを、個別に設定できませんが、「border-top」や「border-right」を使うと、４方向の罫線それぞれに設定できると述べました。その他にも、罫線の太さやスタイルなど、それぞれの指定を、細かく個別で行うコマンドもございます。例えば

●罫線の例

border: 3px solid red;

この罫線の指定を、個別設定のコマンドで行うと

●罫線の個別設定の例

border-width: 3px;

border-style: #solid;

border-color: red;

この２つの例では、表示結果は同じになります。

●表示結果

テスト

以下に、border-widthコマンド、border-styleコマンド、border-colorコマンドの詳細な使い方を、説明したいと思います。

border-width

border-widthコマンドは、罫線の太さを一括で設定します。罫線の太さを１個～４個入れることができます。次の例に示すように、入れる個数によって、上下左右の４方向それぞれの太さを、個別に設定できます。

●罫線の太さを１個入れた場合

border-width: 4px;

この場合は、罫線の太さが、上線、右線、下線、左線の４方向とも、4pxに設定されます。

●罫線の太さを２個入れた場合

border-width: 4px 3px;

この場合は、罫線の太さが、上線と下線が4pxに、右線と左線が3pxに設定されます。

●罫線の太さを３個入れた場合

border-width: 4px 3px 2px;

この場合は、罫線の太さが、上線が4pxに、右線と左線が3pxに、下線が2pxに設定されます。

●罫線の太さを４個入れた場合

border-width: 4px 3px 2px 1px;

この場合は、罫線の太さが、上線が4pxに、右線が3pxに、下線が2pxに、左線が1pxに設定されます。また、例えば次に示すように、それぞれ４方向の線の太さを、個別のコマンドに分けることができます。

border-top-width: 4px;

border-right-width: 3px;

border-bottom-width: 2px;

border-left-width: 1px;

このようなコマンドを使って、罫線の太さを細かく設定する場面としては、「今までは、標準で、この罫線の太さを使っていたが、途中の、この部分のみ罫線の太さを変更したい。」などのときに使用します。

border-style

border-styleコマンドは、罫線のスタイルを一括で設定します。罫線のスタイルを１個～４個入れることができます。次の例に示すように、入れる個数によって、上下左右の４方向それぞれのスタイルを、個別に設定できます。

●罫線のスタイルを１個入れた場合

border-style: dotted;

この場合は、罫線のスタイルが、上線、右線、下線、左線の４方向とも、dottedに設定されます。

●罫線のスタイルを２個入れた場合

border-style: dotted dashed;

この場合は、罫線のスタイルが、上線と下線がdottedに、右線と左線がdashedに設定されます。

●罫線のスタイルを３個入れた場合

border-style: dotted dashed solid;

この場合は、罫線のスタイルが、上線がdottedに、右線と左線がdashedに、下線がsolidに設定されます。

●罫線のスタイルを４個入れた場合

border-style: dotted dashed solid double;

この場合は、罫線のスタイルが、上線がdottedに、右線がdashedに、下線がsolidに、左線がdoubleに設定されます。また、例えば次に示すように、それぞれ４方向の線のスタイルを、個別のコマンドに分けることができます。

border-top-style: dotted;

border-right-style: dashed;

border-bottom-style: solid;

border-left-style: double;

このようなコマンドを使って、罫線のスタイルを細かく設定する場面としては、「今までは、標準で、この罫線のスタイルを使っていたが、途中の、この部分のみ罫線のスタイルを変更したい。」などのときに使用します。

border-color

border-colorコマンドは、罫線の色を一括で設定します。罫線の色を１個～４個入れることができます。次の例に示すように、入れる個数によって、上下左右の４方向それぞれの色を、個別に設定できます。

●罫線の色を１個入れた場合

border-color: red;

この場合は、罫線のスタイルが、上線、右線、下線、左線の４方向とも、red（赤）に設定されます。

●罫線の色を２個入れた場合

border-color: red blue;

この場合は、罫線のスタイルが、上線と下線がred（赤）に、右線と左線がblue（青）に設定されます。

●罫線の色を３個入れた場合

border-color: red blue #ff00ff;

この場合は、罫線のスタイルが、上線がred（赤）に、右線と左線がblue（青）に、下線が#ff00ff（ピンク）に設定されます。

●罫線の色を４個入れた場合

border-color: red blue #ff00ff black;

この場合は、罫線のスタイルが、上線がred（赤）に、右線がblue（青）に、下線が#ff00ff（ピンク）に、左線がblack（黒）に設定されます。また、例えば次に示すように、それぞれ４方向の線のスタイルを、個別のコマンドに分けることができます。

border-top-color: red;

border-right-color: blue;

border-bottom-color: #ff00ff;

border-left-color: black;

このようなコマンドを使って、罫線の色を細かく設定する場面としては、「今までは、標準で、この罫線の色を使っていたが、途中の、この部分のみ罫線の色を変更したい。」などのときに使用します。

ブロック要素とインライン要素

ブロック要素とは、ブロックを形成するタグで、インライン要素とは、ブロック要素内に入るタグのことです。borderコマンドを、ブロック要素に設置するか、インライン要素に設置するかによって、表示のされ方が異なってきます。

例えば、今までの例で、spanタグにborderコマンドを適用しました。すると、「テスト」という文字に四角の枠が表示されていました。

●spanタグ（インライン要素）にborderコマンドを適用

テスト

このソースを見て頂けたらわかるのですが、spanタグは、pタグに挟まれています。このspanタグはインライン要素で、pタグはブロック要素です。では、ブロック要素であるpタグに、borderコマンドを適用すると、どのように表示されるのでしょうか？

●pタグ（ブロック要素）にborderコマンドを適用

テスト

このように、pタグによって形成されたブロック全体に、四角い枠線が現れました。ブロック要素を、枠線で囲むことによって、タイトルを目立たせたり、領域を分けるような罫線を入れたりして、Ｗｅｂページを見やすくすることができます。

hrタグの線色やスタイルを変更する

hrタグは、Ｗｅｂページ中に境界線を入れるタグですが、初期設定のままでは単なる黒の実線です。線の色を変えるには、このborderコマンドを使います。例えば

● hrタグの記述例

● 表示結果

このように表示されます。ここで、線の太さを5.5pxとしましたが、IE6では線の太さは変わりません。FFやSafariでは、太さはきちんと変わります。IEでも太さをきちんと変えたい場合は、size属性を使います。

● hrタグにsize属性を加えた例

● 表示結果

hrタグでの線の描かれ方は、次の例に示しますが、hrタグのsize属性は、線の色の部分の太さと言うよりも、実は、サイズ5.5pxの実線の周りを取り囲むように、styleで設定した線が描かれます。その証拠に、size属性値を30とした場合、四角の枠のような線になります。つまり、size属性は、この四角の枠のサイズを設定する属性なのです。

● size属性値を大きくした例

● 表示結果

では、style属性とsize属性で線の太さが２カ所で設定されていますが、FFやSafariでは、どちらのサイズが優先されるのでしょうか？。それは、style属性です。ですので、hrタグで線の太さを変えたい場合は、style属性に設定するborderコマンドの線の太さと、size属性値を同じ値にすれば、まっすぐな線が描かれます。ただし、size属性に設定する数値の単位はpxなのですが、単位を入れてはいけないというルールになっています。

● borderコマンドでの線の太さと、size属性を同じ値にした例

● 表示結果

「border-collapse」による罫線の境界の表示方法

表を作って、罫線を表示させた場合、表のセルとセルの間は、標準では隙間があります。下の例では、線の色がわかりやすいように、tdタグにstyle属性を入れて、罫線を赤にしてあります。４つのセルの間には、それぞれ隙間があります。

</table>

テスト１	テスト２
テスト３	テスト４

次に、tableタグに、style属性で「border-collapse: collapse;」を追加すると、セルとセルの間の隙間がなくなります。

</table>

テスト１	テスト２
テスト３	テスト４

なお、上側のデフォルト（セル間に少し隙間を空ける設定）は、「border-collapse: separate;」です。

← 前のページ「30.backgroundコマンド（CSS）」
「32.スタイルシートで使う単位」次のページ →