Articles(Comments) / Total amount of posts:456
  1. 2008/09/03  画像の均等表示 (0)

サムネイルを含む画像の均等表示にはテーブルタグが便利である。
また、テーブルタグは複雑なページレイアウトも簡単に表現できるため、以前からよく使われてきた。しかし、以下の理由からテーブルタグを用いてウェブサイトのレイアウトを行うべきではないということが言われている。

□W3C非推奨だから(CSS(スタイルシート)を用いることをW3Cは推薦)
□tableタグに対応していないブラウザがある(注1)。
□環境によりページの読み込みが遅くなる(回線速度やPCの性能向上で気にならなくなってきたが・・)。
□ソースが読みにくい。
□アクセシビリティの観点から良くない(音声出力の場合、テーブルタグを用いている部分は、読み上げの順番がばらばらになり、理解しにくい)(注2)。

(注1)は、マイナーなLynx や MOSAIC である。
(注1)や(注2)は、HTMLの理念として、ハンディのある人も、どんなタイプのコンピューターを使っていてもネットを利用できるというW3Cの勧告に包括される事項である。
つまり、 ルールに基づいてサイトデザインの記述をすることにより、環境に依存することなく、誰でもウェブサイトを利用できるのである。それが、HTMLの使命であるが、テーブルタグをレイアウトに使用すると、あらゆる機器に対応できるはずのHTMLの理念が損なわれる。

HTMLのタグの一つである「table」タグには上記のような問題がある。テーブルタグのファンダメンタルな問題はともかく、最近、小さな画像を均等に並べる必要があり(注3)、迷わずテーブルタグを利用した。ページの中の一部だがらテーブルタグでも問題ないだろうと安易に考えたのである。

所が、ソースが判りにくい。時間が経つと自分で書いたソース(テーブルタグ)を理解するのに時間がかかる。そこで、テーブルタグより簡単な「画像の均等表示」方法として、「dl」「dt」「dd」を使ってみた。
「dl」「dt」「dd」は、見出し(定義語)とその内容(説明)を表示するリストタグの一種である。

表示方法のコツは、
ページHTMLの表示1行ごとに<br style=”clear:both” />(注:XHTML 1.0として記述している)を入れる。
CSSファイルの該当部分に、「フロートタグ」を加えるということである(参照下)。

dl{
margin: 0;
float: left;
}

より良い方法があるのかもしれないが、思いつかない。
ただし、「テーブルタグ」よりもずっとシンプルなソースにはなった。

注3:当工房椅子専用サイト(Standard Chair)のプロダクトサムネイル。

Posted Comment

----- No Comment ------

Comment

* コメントフィード

トラックバックURL: http://www.tai-blog.com/2008/09/03/%e7%94%bb%e5%83%8f%e3%81%ae%e5%9d%87%e7%ad%89%e8%a1%a8%e7%a4%ba/trackback/