七鍵＠楽天

今日は今までの復習もかねて、色々な方法で画像を縁取りしてみましょう。
ただ単純に画像を表示するのもいいですが、
たまにはおしゃれな縁取りなどしてみたいですよね(〃⌒▽⌒)

まずは単純に・・・

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1">

表示結果）


これは一番シンプルな縁取りですね(〃⌒▽⌒)
シンプルなだけあって記述も簡単です。
ぜひマスターしましょう(〃⌒▽⌒)

次はこの線の太さを変えてみましょう。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8">

表示結果）


縁取りの太さを変えるだけで、また画像の雰囲気も変わりますよね(￣▽￣人)
ただ数字を大きくするだけですのでこれも簡単ですよね？

次は線の色を変えてみましょう。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8" style="border-color:#ff00ff;">

表示結果）


多少サンプルの色の趣味が悪いような気がしますが・・・
それはさておき、「style="border-color:#ff00ff;"」のような記述を加えるだけで縁取りの色を変更することもできます。
色は好きな色に変えて試してくださいね（笑

ちなみに、縁取りの色を辺によって変えることも出来ます。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8" style="border-color:#ff0000 #0000ff;">

表示結果）


これまた趣味の悪い配色ですが・・・
色の組み合わせによっては、きっとおしゃれな縁取りになるはずですよ（多分）
ちなみに、「style="border-color:"」ですが、
値を1つ指定： 上下左右が指定色
値を2つ指定： 記述した順に上下、左右が指定色
値を3つ指定： 記述した順に上、左右、下、が指定色
値を4つ指定： 記述した順に上、右、下、左が指定色
のように、個別に縁取りの色を指定することができます。
小技として覚えておくと、いつか役に立つかもしれませんよ(〃⌒▽⌒)

そして、以前も紹介しましたが、線のスタイルを変更してみましょう。

例）
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: double 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: dashed 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: dotted 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: groove 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: ridge 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: inset 12px #9999ff;">
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: outset 12px #9999ff;">

表示結果）















どれも微妙に雰囲気が違いますよね(〃⌒▽⌒)
絵も額縁にいれて飾った方が見栄えがするように・・・
ＨＰ上に載せる画像にも、おしゃれな縁取りなどいかがでしょうか？

明日は「MARQUEE」タグを詳しく解説しようかと思っています。
また来てくださいね(ﾟ▽^*)ﾉ⌒☆