Border

ここでは、borderについて少し説明していきます。
borderは私もよく使ってますし、何より理解すれば使えるタグだと思いますしね!皆さんも理解して、バンバン使っていきましょう!


borderはCSSで設定します。
当サイトのテンプレの「style.css」内にはたくさんborderというタグが書かれていると思いますので、確認してみてください。

Lecture

では、まずはテンプレートDLファイルに同梱されている「style.css」を開いてみてください。
(開き方は、テンプレ設置講座の 番目のページを参考にしてください。)



上のようなタグが書かれている部分があるはずです。探してみてください。
(数値や色指定は、テンプレートによって違いがあるかと思います)

ではでは、さっそくborderの部分をいじってみますか!
…とその前に、borderタグの書き方説明。


border:太さ 線の種類 色;

の順に設定していきます。
だから、box1の場合は、太さは3px、線の種類はdouble(二重線)、線の色は#333333(黒色)ということになります。
box2は、太さ1px、線の種類はsolid(実線)、線の色は#333333(黒色)ですね。


線の種類は何種類かあります。私がよく使うものだけ説明しますね。

1pxのsolid(実線)
2pxのsolid(実線)
3pxのsolid(実線)


1pxのdashed(破線)
2pxのdashed(破線)
3pxのdashed(破線)


1pxのdotted(点線)
2pxのdotted(点線)
3pxのdotted(点線)


1pxのdouble(二重線)
2pxのdouble(二重線)
3pxのdouble(二重線)


他にも線の種類はありますが、一応これだけ。
dotted(点線)はもっと大きくすれば、水玉のような感じなります。




続いて、ちょっと進んだ書き方の説明。

.box1{border-top:1px solid #33333;}
.box2{border-bottom:1px solid #33333;}
.box3{border-right:1px solid #33333;}
.box4{border-left:1px solid #33333;}

box1
box2
box3
box4


*上のboxはわかりやすいように、背景色を設定してあります。

borderの文字の横に top などの場所を表す文字を書けば、そこにだけ線が表示されます。



これをちょいっと応用すれば、

.box5{
border-top:3px solid #33333;
border-bottom:1px dashed #33aaff;
}
.box6{
border-left:12px double #cc0033;
border-right:2px dotted #ffaacc;
}

box5
box6



このように、自分の好きなboxや見出しやらを作れるようになるんです!





次に、今まで説明した以外のborderの書き方を説明します。たまーに、私も使っております。

border-style:線の種類;
border-color:線の色;
border-width:上の線の太さ 右 下 左;

という書き方です。
まぁ、わかり難いだろうから、実際どうなるか見てみましょう!

.box7{
border-style:solid;
border-color:#33aaff;
border-width:1px 0px 3px 10px;
}

box7


こんな感じになります。
線の種類は全て同じだけど、太さがそれぞれ違うって場合に使います。






borderの説明は以上! 後は、ご自分で色々と試してみてください。
(…けっして、めんどくさくなったわけではないんですよ…!)