第２回：<IMG>タグに関わる基本的な事

2006年12月24日 22:38

小技集 (X)HTML CSS

前回は画像にborderで装飾を付けるサンプルを書きましたが、今回は順番が前後するかもしれませんがもうちょっと基本的なルールについて記述します。

■<IMG>タグに必須な属性
リファレンスじゃないので全部の属性を並べたりはしませんが、基本的なものは下記くらいじゃないでしょうか。

src: 画像のURL
width: 横幅
height: 縦幅
border: 枠線の太さ
alt: 代替文字
id, name: ユニークな名前
style: CSSスタイル

XHTMLでは見た目に関する記述はCSSで行う事になっているので、実は width, height, border あたりは style で記述する方が良さそうです。で、 src を書くのは当たり前として実は結構重要なのが alt。「代替文字」って言ってもあまり役割が理解されないようで省略されやすいのだが、１）画像が表示されない場合の代替文字、２）目が不自由な方の音声読み上げ機能用、３）SEO対策としてのキーワード、等とても重要なのです。
以上を踏まえて基本的なマークアップを行うとこんな感じじゃないでしょうか？

<img id="myimg" name="myimg" src="/path/to/image.jpg" alt="テスト画像"

     style="width:400px;height:300px;border:0;" />

さらに、 style を外部ファイルに移せばもっとスッキリしますね。

<style type="text/css">

<!--

#myimg {

	width:400px;

	height:300px;

	border:0;

}

-->

</style>

(snip)

<img id="myimg" name="myimg" src="/path/to/image.jpg" alt="テスト画像" />

■id, name って？
画像をユニークに扱うための識別しです。サンプルでは両方指定していますが、これは(X)HTMLのバージョンの違いを吸収するために推奨される方法です。

<img id="myimg" name="myimg" src="/path/to/image.jpg" alt="テスト画像" />

■閉じタグも忘れずに
<IMG>タグは単独タグなので、後ろのスラッシュ"/"も忘れずに。

<img id="myimg" name="myimg" src="/path/to/image.jpg" alt="テスト画像" />

■画像サイズ指定は必須か？
良く<IMG>タグには width, height を書いておきなさいと言われます。これはブラウザにレイアウト情報を与える事によって画面全体の表示速度を上げるというものです。画像のオリジナルサイズが分かっている限り書く事をお勧めします。ただ、そこまでシビアに考える必要があるかというとそうではないと思います。現在は、ネットワーク速度もマシンスペックも性能が飛躍的にあがっていますしね。ちなみに width, height を省略してもHTML-lintのバリデーションで原点されません（文法的には問題ない、という事）。

Facebookにシェア Twitterにシェア Google+にシェアメールでシェア