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

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

関連記事

Google Analytics に独自検索エンジンを追加している場合の問題と対応

今日まで夏休みなんですが、昨日まで出かけていた期間のアクセス解析をGoogle Analyticsで確認していたら、すごい勢いで下降線。というか、これは明らかにおかしいのでデバッグしてみるとGoogl …

Googleドライブのフォーム機能からGoogle Apps Scriptを使ってメール自動返信2014年版

Googleドキュメントのフォーム機能からGoogle Apps Scriptを使ってメール送信 [C!] 上記記事は2011年に書いて今でも非常にたくさん参照されているのですが、Googleの仕様変 …

no image

MovableType:PostToTwitterプラグインを入れてみた

いいのを見付けたので早速インストールしました。 でうまくいくか試すのを踏まえエントリーします。 最近はやりのTwitterに、エントリーのタイトルとパーマリンクのTinyURLを投稿するプラグインを作 …

[N]ネタフル x [S]シカマケ = ブログデザイン勉強会 第1回に参加

日本のトップブロガーであるネタフルのコグレさんが主催されており、先ほど紹介した「視覚マーケティングのススメ」の著者であるウジトモコさんを講師にお招きして行われる、ブログデザイン勉強会の第1回目が昨日開 …

ブログに埋め込んだFlickr画像に自動でEXIF情報を追加する「FlickrEx」がLazyLoadに対応!

ボクは写真が好きで、バックアップも兼ねてFlickrに全ての写真データをアップロードしているのですが、ブログに貼り付ける画像もFlickrにアップロードしたものを使っています。プロアカウントを持ってい …

スポンサードリンク

スポンサードリンク