HTML <img> タグのborder属性

HTML <img> タグ

例

以下のHTMLは異なる太さの画像の枠線を生成できます：

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

実際に試してみてください

定義と使用法

<img> タグの border 属性は、画像の周囲の枠線の幅を指定します。つまり、画像の枠線を増やすか取り除くことができます。

注記：デフォルトでは、画像には枠線がありません（a 要素内の画像を除き）。

ブラウザは通常、リンクを表す画像（例：<a>タグ内に含まれる画像）を2ピクセルの枠線内に表示して、読者がこの画像を選択して関連するドキュメントにアクセスできることを示します。

border 属性とピクセル単位で指定された幅を使用して、画像の枠線を取り除くか拡張することができます（border="0"で取り除く、または拡張する）。

注意：この属性はHTML 4およびXHTMLでも推奨されなくなりましたが、それでも人気のあるブラウザで良好にサポートされています。

関連リーディング：画像のフレームを取り除く

ブラウザの互換性

border 属性は推奨されないものの、すべての主要ブラウザでサポートされています。

ヒントと注記

注記：HTML 4.01では画像の「border」属性は推奨されません。XHTML 1.0 Strict DTDおよびHTML 5では、この属性はサポートされていません。

ヒント：使用してください CSSの枠線属性 要素の枠線スタイルを変更するために使用します。外部スタイルシートで CSS 枠線属性を使用して、サイト上のすべての画像に一貫した枠線を設定できます。これにより、個別に画像に枠線属性を設定するよりも効率的です。

互換性コメント

img 要素の border 属性は推奨されません；HTML 4.01 StrictおよびXHTML 1.0 Strict DTDではサポートされていません。

CSS を使用してください。

CSS 構文：<img style="border:5px solid black">

CSS 実例：画像枠線

私たちの CSS 教程では、以下の詳細情報を見つけることができます。 border 属性 の詳細。

構文

<img border="value" />

属性値

値 説明
pixels 枠線の幅、ピクセル単位で指定。

TIY 実例

<img> タグの border 属性
この例では、画像のフレームを変更するために <img> タグの border 属性を使用する方法を示しています。

関連リーディング：画像のフレームを取り除く

画像タグ <img> に border="0" 属性を使用することで、画像超リンクの周りのフレームを取り除くことができます。特定の画像、特に画像マップの場合、フレームがなくなることでページの外観が改善されることがあります。また、他の画像にリンクしていることを明示するリンクボタンがフレームがない場合、画像がより良いように見えることがあります。

フレームを取り除くことで、ドキュメントの利用性が低下することはありませんが、注意を払う必要があります。なぜなら、フレームがないことは、非常に一般的な超リンクの視覚的な指標を取り除くことを意味するからです。これにより、読者がこれらのリンクを見つけるのがより難しくなる可能性があります。ブラウザは通常、マウスが超リンクの画像に移動するときに指針の形を変更しますが、ブラウザが常にこれを行うことを期待したり、ユーザーがフレームのない画像で隠されたリンクを見つけるために摸索するべきではありません。

フレームレスの画像を使用する際には、読者がこれらの画像をクリックするべきであることを知らせるために、他の方法も同時に使用することをお勧めします。シンプルなテキストでさえ、ドキュメントが読者にとってより良いアクセス性を持つことを達成するのは難しいです。

HTML <img> タグ