枠線(ボーダー)を使ってみよう（３）

:「前回の話で、ボーダーに
色々な使い方があるとわかったよ、Q太郎さん」

：「ふっ、まだまだだな」

：「えーっ、まだ何かあるんですか？」

：「観察しろというのは……　見るんじゃあなくて
観ることだ…　聞くんじゃあなく聴くことだ　
でないと…………　これから死ぬことになるぜ……」 

：「そんな大げさなんですか・・・」

：「ベイスタ、お前ボーダーが必ず4辺を囲むと
思い込んでいないか？」

：「えっ、4辺ではなく好きな所にだけ
線を引けるってことですか?
そ、そんな。まさかって感じだがグッと来たぜ!!
で、どうすればいいんでしょう・・・・」

：「4辺に使う時はborder:線の種類　幅　色;だったろ。
限定したい側に使うにはborderの後ろに
-top, -right, -bottom ,-leftを入れるんだ。
下線にしたいならborder-bottom:線の種類　幅　色;だな」

：「なるほど」

：「これによって出来ること・・・・
そうだな記事タイトルを例にとってみてみよう。
枠線(ボーダー)を使ってみよう（３）
この記事のタイトルだな。
.articles-title {
margin:0;
margin-bottom:15px;
padding:3px 12px;
background-color: #ff8539;
font-size:small;
color: #ffffff;
border-right:solid 20px green;
}と右側に緑色20pxの単線の指定を入れてみるぞ。
するとこうなる。
枠線(ボーダー)を使ってみよう（３）

：「おおぉ、かっこいいー。
そこに痺れる、あこがれる～。
ちょっとしたにも入れてみようっと。
えーと、下はbottomだっけ。
border-bottom:solid 10px green;っと。

枠線(ボーダー)を使ってみよう（３）

ん？ってことはサイドバータイトルなんかにも
使えるってことですよね」

：「ああ、そうだ」

：「もしかして、ブログタイトルや
サブタイトルにも使えちゃったりするのかなぁ」

：「可能だ!!!」

：「じゃあ、あんなとこにもこんなとこにも・・・・
ああ、想像するのが楽しすぎるーーーーーーーーー」

：「ヤレヤレダゼ」

タグ：ボーダー CSS ブログ カスタマイズ so-net