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

:「前回の話で、ボーダーに
色々な使い方があるとわかったよ、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

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

:「では、前回の続き
ボーダーの種類を説明しよう。
ボーダーの種類は8種類ある。
solid       dotted

dashed       double

ridge       groove

inset       outset

以上の８つだ」


:「8種類までは知ってたけど
どんな線なのかまでは知りませんでした・・・」

：「やれやれだぜ」

：「ところでQ太郎さん、このボーダーって
どういう時に使えばいいの？
フォントや背景は記事にそのまま使えばいいけどさぁ」

：「使い方は様々だな。
この記事の外側を見てみろ。
銀色の枠線で囲まれているだろ」

：「はっ、はい、確かに」

：「それに線の種類で紹介したように
ridgeあたりを使えば、額縁や電光掲示板のようにも使えるぞ。
 

そして時は動き出す

:「いいか、頭はただあるんじゃあない。
考えるためにあるんだ」

：「うわっ、こんな使い方が・・・・
ボーダーを見くびってました!!!!」

：「では、CSSの書き方だな。
書き方はこうだ!!
border:線の種類 幅 色;
3種類は順不同で、それぞれの要素の間には
半角スペースだ。

この記事のように、枠線を入れたければ
.articles-body {
line-height:1.6;
margin:0 0 20px 0;
border:double 5px silver;
}

このように記述するんだ」

：「それだけなんですか？
思ったより全然簡単です・・・・」

：「やってみなければわからないことだらけだろう。
いいか、真の『失敗』とはッ！　開拓の心を忘れ！　
困難に挑戦する事に無縁のところにいる者たちの事をいうのだッ！」

：「理解不能　理解不能　理解不能　理解不能」 
「あっ！　理解『可』能」

：「ディ　モールト。
次はもう少し踏み込んでみるぞ」

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

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

:「Q太郎さん、前回のモミジを
ワンポイントで使ってみましたよ、ほら
article-body{
line-height:1.4;
padding:;
font-size:10pt;
font-weight:900;
color:midnightblue;
background:url("/-----------------") no-repeat right bottom;
}」

：「良しッ！　ディ・モールト　ディ・モールト（非常に　非常に）良いぞッ！　
良く学習してるぞッ！」 

「この前は『フォント』、前回は『背景』を教わりました。
3要素の残りの『ボーダー』について教えて下さい」

：「ベイスタが記事『CSSの要素をおさらいしてみよう 』で
言っていたように、ボーダーは枠線の種類・色・幅の3つの
要素で構成される」

；「はい、そこまでは理解しています」

：「GOOD !
そうしたら、次は具体的なものだな。
ボーダーの色はそのままだ。
幅であるborder-widthの単位はpxやpt、その他にもmm,cm,in,や
数値を必要としないthin(細い),medium(中間),thick(太い)がある」

：「ふむふむ」

：「一番重要な要素は種類だな。
これは次回に説明しよう」

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