ぱんぶろ

パンジーの「いいね!」ブログ

画像の外側に黒の枠線をつける方法(CSS)!いちいち画像編集しなくても良かった。

      2016/03/27  

medium_2066172855
photo credit: rogilde - roberto la forgia via photopin cc

それはわたしがまだCSSについて、
あまり知らない遠い(・・・つい最近)のお話。

記事に貼る画像って、特に白色が強い場合、
どこまでが画像でどこからが記事なのか分かりにくいんですよね。

だから、いつも画像編集ツールを使って、
枠線を追加した画像を貼り付けていたんですけど・・・、

こんなのCSSにちょっと追加すれば簡単にできてました。

ということで、超簡単なんですが、
CSSで画像の外側に枠線を付ける方法を紹介します。

スポンサード リンク

CSSで画像の外側に枠線を付ける方法

CSSにはborderという属性があります。
これは、名前の通り線を表します。

画像に外枠を付けたい場合は、
画像を表すHTMLタグのimgにCSSでborderをを当ててあげればいいだけです。

例えば以下のような図があったとして、
[コード]

<img src="//www.panzee.biz/wp-content/uploads/2014/05/div_link_01.png" alt="div_link_01" width="150" height="150" />

 

[表示]
div_link_01

この図にCSSでborder属性を追加すると,
[コード]

 

<img style="border: 1px solid #F00;" src="//www.panzee.biz/wp-content/uploads/2014/05/div_link_01.png" alt="div_link_01" width="150" height="150" />

 

[表示]
div_link_01

うん、赤枠で表示されてます。
(ちょっと画像のチョイスが悪くて、黒色だとわかりにくいので赤にしました。)

ちなみに線を黒色にするには、
borderの色指定を黒にするだけです。
[コード]

<img style="border: 1px solid #000;" src="//www.panzee.biz/wp-content/uploads/2014/05/div_link_01.png" alt="div_link_01" width="150" height="150" />

 

[表示]
div_link_01

うん。実に簡単ですね。
ちなみに、1pxと書かれたところは線の太さを表します。
太くしたければ、ここの数字を大きくすればOKです。

まとめ

画像に枠線をつける方法でした。
簡単なのでぜひお試しを!