七鍵＠楽天

今日も昨日に引き続き・・・
何かの周りに線を引く方法を紹介しましょう。
まぁ、何かでは分かりにくいので



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

では早速いっきに例を紹介しましょう(〃⌒▽⌒)

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:solid 12px #9999ff;"><br>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:double 12px #9999ff;"><br>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dashed 12px #9999ff;"><br>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dotted 12px #9999ff;"><br>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:groove 12px #9999ff;"><br>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:ridge 12px #9999ff;"><br>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:inset 12px #9999ff;"><br>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:outset 12px #9999ff;"><br>

表示結果）


















「border」を使用することにより、画像の周りの線をいろいろと変更することができます。
スタイル、太さ、色を任意の順番にスペースで区切って指定をします。
ただし、「border」では上下左右の線を個別に指定することはできません(´･ω･`)
もし、個別に上下左右の線をいろいろと変更したい場合は

上の線に関する指定：border-top
左の線に関する指定：border-left
右の線に関する指定：border-right
下の線に関する指定：border-bottom

をそれぞれ使用してください。
記述方法は「border」と同じです(￣▽￣人)

◇ スタイルに関する指定

スタイルに関する指定は以下のキーワードのいずれかを指定します。

none

線は表示されず、太さも0になります。表のセル等線が重なり合う場合は他の値が優先されます（初期値）。

hidden

線は表示されず、太さも0になります。表のセル等線が重なり合う場合はこの値が優先されます

solid

1本線で表示されます。

double

2本線で表示されます。

dashed

破線で表示されます。

dotted

点線で表示されます。

groove

立体的にくぼんだ線で表示されます。

ridge

立体的に隆起した線で表示されます。

inset

上と左の線が暗く、下と右のボーダーが明るく表示されます。

outset

上と左の線が明るく、下と右の線が暗く表示されます。

◇ 線の太さに関する指定

線の太さは単語もしくは数値で指定します。
単語は
thin ：細い
medium ：普通
thick ：太い

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

◇ 線の色に関する指定

色の指定の際にはＲＧＢカラーを使用してください
ここをクリック！！

以前紹介したときは・・・
さも当たり前のように記述して何も解説をしていませんでしたよね(´･ω･`)
ってなわけで紹介しなおしました(〃⌒▽⌒)