七鍵＠楽天

今日は何かの周りに線を引く方法を紹介しましょう。
どこかで聞いたような聞いたこと無いような・・・
そんな内容になっています(〃⌒▽⌒)
まぁ、ただ今回は漠然と何か・・・ではよく分かりませんので



という画像に的をしぼりましょう。
ただ、今回は画像で紹介するだけで・・・
方法自体は「TD」にでも「P」にでも「DIV」にでも「SPAN」にでも・・・
はたまた「I」や「B」、「H2」までほんとうにいろいろなことに使用できるものとなっています。
しっかりマスターしましょう(￣▽￣人)

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px 12px;">

表示結果）








違いはわかりますか？
ＨＴＭＬで記述する場合は

border=3

のように全体に対する記述しかできませんでしたよね。
スタイルシートを使用し、スペースで区切り複数の値を指定することによって
上下左右を異なった幅にすることができるというわけです(￣▽￣人)

上記例で分かるかと思いますが、

値を1つ指定： 上下左右が指定幅
値を2つ指定： 記述した順に上下、左右が指定幅
値を3つ指定： 記述した順に上、左右、下、が指定幅
値を4つ指定： 記述した順に上、右、下、左が指定幅

となっています(〃⌒▽⌒)

線の太さは単語もしくは数値で指定します。
単語は

thin ：細い
medium ：普通
thick ：太い

を指定することができます。
ただし、単語で太さを指定した場合、
実際に表示される太さはブラウザによって異なりますので注意が必要です。

明日はさらにいろいろな線の引き方を細かく見ていきましょう(〃⌒▽⌒)
では、またあしたー(ﾟ▽^*)ﾉ⌒☆