Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

(X)HTML CSS 小技集

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

投稿日:


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


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

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

XHTMLでは見た目に関する記述はCSSで行う事になっているので、実は width, height, border あたりは style で記述する方が良さそうです。で、 src を書くのは当たり前として実は結構重要なのが alt。「代替文字」って言ってもあまり役割が理解されないようで省略されやすいのだが、1)画像が表示されない場合の代替文字、2)目が不自由な方の音声読み上げ機能用、3)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のバリデーションで原点されません(文法的には問題ない、という事)。

-(X)HTML, CSS, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

第6回:TinyURL の遷移先が怖くて開けない場合の対処法

twitter や、mixi でよく使われている、 TinyURL というWEBサービスは長〜いURLを短〜くしてくれるので便利なんだけど、他の人が書いている TinyURL をクリックするのがちょっ …

no image

動画を楽しもう!(YoutubeをMP4でダウンロードするもっと簡単なブックマークレット)

YoutubeをMP4の高画質で見れる方法がある事が分かり、Google Operating SystemではすでにMP4形式でダウンロードできるブックマークレットが紹介されています。 One way …

Googleドライブのフォーム機能は初期値をセットできる

とても便利なのにあまり知られていないらしいことが分かったのでエントリー。 Googleドライブのフォームは本当に便利で、アンケートやお問い合わせフォームが本当にサクッと数分でできちゃいます。以前書いた …

動画を楽しもう!(Ustream.tvで録画した動画「Past Clips」のFLVをダウンロード可能にするブックマークレット)

【2012/01/03:更新】 Ust DLの公式ページができました。今後の最新情報はこちらをご確認ください。 Ust DL 公式ページ 【2010/04/13:追記】 スクリプトをアップデートしまし …

no image

はじめに

このカテゴリーでは、フォトサイトやフォトブログを作るのに役立つ便利な情報を紹介して行こうと思います。自分自身、フォトサイト(と呼ぶには幼稚過ぎるものも含めますが)を作り始めてから早5年くらいは経過して …

スポンサードリンク

スポンサードリンク