Webデザイン入門 画像を配置する その１:HTML上での画像の扱い

http://itpro.nikkeibp.co.jp/article/COLUMN/20060825/246430/

　ワープロ感覚で作業を捉えると、画面に画像をペタッと貼ることなんて簡単じゃないか？と思えるし、実際簡単だ。しかし、より使い勝手の良いサイトをデザインするためにはちょっと突っ込んだタグの意味を分かっていないといけない。

■インラインとブロックレベル

　画像をページにレイアウトする目的でよく使うのはimgタグである【図1】。これで画像の所在地をURLで参照して写真などを反映させる。この imgタグは(X)HTMLの定義上、文字情報と同等の要素に区別されている。見た目に図と字では大違いだが、その存在意義を考えるとどちらも情報そのもの、つまり材料であることに変わりはない。これらの材料はウェブページ上で横の組み方向に流し込まれることになる。この組みの方向に流し込むべき材料に関するするタグはすべて、インライン要素というHTMLのカテゴリに入る。ある文字を強調する時に使うstrongタグなどが、インライン要素としてすぐ思い当たるところだ。imgタグもこの例に漏れず、インライン要素である。

　一方ブロックレベル要素のほうは、材料そのものを操作せずに、ページ上で範囲を決めるためのタグになる。リスト群を作るulタグや見出し用のh1タグは「ここからここまでがリスト、あるいは見出しですよ」という意味になり、ブロックレベル要素に分けられる。

■インライン要素はブロックレベルの中

　HTMLは大きく２つの要素に分かれることがはっきりしたが、本題の画像用imgタグ（インライン要素）は、必ずHTML内のブロックレベル要素の中に宣言してやらなければいけないことを知っておこう。文字要素の場合も同様だが、これらの材料は、段落や見出しという範囲を定義した中に挿入する必要がある。たとえそうしなかったとしても即表示エラーなどは起こらないのだが、最終的に何かのエラーの発端にならないとも限らない【図2】。

　また、画像が実のある材料として見なされるためにも代替テキストの指定は必須である。端的に画像の内容を説明するような文章を用意しておこう。
(矢野りん／ライター)[2006/08/29]