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

:「では、前回の続き
ボーダーの種類を説明しよう。
ボーダーの種類は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 ボーダー ブログ カスタマイズ