<IMG border="">画像の枠線を表示

<IMG>タグのborder属性では、画像の周りに枠線を表示することができます。

一般的なブラウザでは、この属性を指定していない場合、またはborder="0"を指定した場合は、枠線は表示されません。 ですがborder属性を指定することで画像の周りに枠線が表示されるようになります。

表示したい枠線の太さの数値をborder属性の値にピクセル数で指定して下さい。 また画像を<A>タグで囲むと、それを示すための枠線が表示されるブラウザもありますが、border属性ではその枠線の太さも設定することができます。

ただしHTML4.01ではborder属性は非推奨とされています。 さらにHTML5では廃止されていますので、画像の枠線に関する設定は、可能であればスタイルシートを使用するようにして下さい。

使用した時の例

<img src="/image/sample.jpg" width="130" height="87" alt="枠線なし" >
<img src="/image/sample.jpg" width="130" height="87" alt="枠線の太さ2" border="2" >
<img src="/image/sample.jpg" width="130" height="87" alt="枠線の太さ5" border="5">

ブラウザ上の表示例

枠線なし 枠線の太さ2 枠線の太さ5

書式

  • <img src="画像url" alt="代替テキスト" border="枠線の太さ"> ・・・・・・ 画像の周りに枠線を表示

枠線の太さはピクセル数で指定

属性

border="" 画像の周りの枠線をピクセル数で指定。<A>で画像を囲むと自動的に枠線が表示されるブラウザもあるが、それ消すにはborderの値に0を指定する。

対応ブラウザなどのデータ

形式 <img src="" alt="" border=""> 分類 インライン要素
開始タグ 必須 終了タグ なし
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

cssで枠線を設定する場合の注意点

スタイルシート(css)で画像の周りに枠線を表示する場合、注意してもらいたい事が1点だけあります。

現在では利用者もほとんどいないので気にする必要もないかもしれませんが、netscape navigator 4.xでは、cssで画像の周りに枠線を正しく設定することができません。 ですので画像をリンクさせた時に表示される枠線を非表示にする場合は、非推奨のborder属性が使われていました。

ただし、現在ではnetscape navigator 4.xを利用している人はほとんどいないため、画像の枠線を非表示にする場合はスタイルシートを利用しましょう。

HTML5での状況と関連情報

border属性は、HTML5では廃止。代わりにスタイルシートのborderプロパティを使いましょう。