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

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

関連記事

no image

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

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

第11回:引用(blockquote)を簡単にするブックマークレット

前に書いたリンクタグを生成するブックマークレットにも関連するんだけど、ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 通常は、引用するサイトの「URL」 …

MovableTypeにFacebookのOpen Graph protocol(OGP)を対応させる方法

【2012/12/02:追記】 記事本文の最初にでてくる画像URLを抜き出すという目的では、元の正規表現では少々問題があったため修正しました。詳細はMTタグの解説部分のコメントをご確認ください。 ども …

MacのAutomatorで楽天kobo「kobo Touch」に最適なcbz形式ファイルを作成する

ちょうど1週間前に発売した楽天koboですが、サービス開始時のクオリティの低さに悪評が絶えず、炎上案件となってしまっているようです。 ・「大きなミスを犯してしまった」――楽天koboに何が起きたのか …

no image

第15回:見ているページをAnother HTML-lintで文法チェックするブックマークレット

サイトを作ったら、見た目の確認も重要ですがマークアップの文法チェックも重要です。別にW3C信者という訳ではありませんがSEOの面でもstrictなHTMLの方が良さそうなのでできる限り対応した方が良い …

スポンサードリンク

スポンサードリンク