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

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

関連記事

タブ開き過ぎの人用のFirefox拡張「Tab mix Plus」で「FaviconizeTab」みたいなミニマム表示を実現

Firefoxの拡張といえば、タブ拡張なんかはメジャーな方だと思うんだけど、色々入れてると機能がコンフリクトしちゃってうまく動かなくなったりしますよね。ボクは基本的には「Tab Mix Plus」しか …

Skypeチャットの隠しコマンド /htmlhistory とBookmarkletで簡単レポート作成術

プライベートと仕事の両方で Skype はかなり前から使っていますが、チャットの内容をどうにか別のファイルにエクスポートしたいと思いました。 Skypeチャットは設定で過去の履歴も保存・表示できるので …

Re: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

[追記:2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。 ・Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く …

no image

極めたいw CakePHPのルーティング

先週のCakePHP勉強会で、akiyanさんが routes.php に関する発表をやっていて、今までになかったルーティング情報のまとめみたいな資料になっていて多くのBakerが目から鱗状態になった …

no image

PhotumblrでTumblrの画像をブログパーツにしてみる

だいぶ前にTumblrの画像を抜き出すPipesを作ったんだけど、今日はそれを使ってブログパーツを作ってみます。 元ネタはこちらのエントリーをお読みください。(で、省略w) ・「Photumblr」T …

スポンサードリンク

スポンサードリンク