サイトのレイアウトはCSSで作る

現在インターネット接続可能な機器が増えている中で、HPを閲覧するブラウザの種類も増えています。PCだけでも複数のブラウザがあり、携帯端末も含めるとかなりの数になります。
私は主にPC向けコンテンツの製作しか請け負っておりませんが、その中でも複数のOSやブラウザに対応させるための問題が生じています。

さて、HP作成時に悩む一つの要素に「ページレイアウト」があります。
以前はレイアウト崩れ防止のために《table》タグを使用する方法が主流になっていました。これは比較的簡単に思った通りのレイアウトを作る事ができるため、今でも利用されるケースが多い方法です。しかし三点のデメリットも考えられますので順を追って見ていきましょう。

1、ブラウジングのスピード低下
《table》タグは始めと終わり(終了タグ)までを読み込んでからブラウジングしていきます。よってページ全体がテーブル組みされていると、内容量によってはなかなか表示されない事があります。
現在の表示速度は「3秒以内」と言われていますので、ページが開きにくい弊害は軽視できません。できれば全体レイアウトはCSSによる《float》を使うといいでしょう。

2、ロボット検索への弊害
人間の視覚にはテーブル組みされたレイアウトは綺麗に見えますが、情報収集ロボットにとって《table》タグは、表として認識するための意味を持ったタグであり、決してレイアウトを取るためのタグではないのです。
記述上、表として認識させたい時には《table》タグを使用して表組みにし、ロボットに対しても縦列、横列が存在する表としての認識をさせるべきでしょう。これを別のタグで装飾する事は賢明ではありません。タグという物は、全てロボットにとって意味づけしていくための指令です。決して人間の視覚のための指令ではありません。視覚対応はCSSで行うべきです。

3、音声サポートブラウザでの弊害
音声サポートのブラウザを使う視覚障害者の方々には、《table》タグの使い方が変わってきます。音声は縦列が何、横列が何、というように聞いて分かるようなブラウジングをしていきます。そこで《td》タグの連続だと分かりにくくなりますので、《th》タグを併用しながら見出しを入れていくのです。
単なるアウトラインレイアウトには「表の意味づけ」がないため、推奨される使い方ではないという事になります。

レイアウトを作る際の私の結論です。
 ・《table》タグは表としての機能を使う時にのみ使用する
 ・全体のレイアウトは、CSSによる《float》で行う

レイアウトだけでなく、文字サイズや文字色、太字や下線なども全て装飾タグとなりますので、CSSで記述していく事が推奨されています。

Sponsered Link