CSSレイアウトページを選択するメリット
テーブルでレイアウトを作成したWebページの問題点とは
はじめに
テーブルレイアウトは表をレイアウト代わりにページ全体に枠を作っていく手法です。しかし、テーブルで構成されたレイアウトには数々の問題点があります。
- ネットワークの切断によりページの内容が表示されない
- 表示に時間がかかる
- 音声読み上げツールでは意図としない順番で読み上げられる
- ページによって横幅が異なる問題が発生する
途中で切断するとページの内容が表示されない
テーブルをレイアウト枠の代わりとして作成されたWebページでは、ブラウザはそのテーブルの中身すべての情報を読み込んでから表示する仕組みを持っているため、何らかの原因により途中で切断すると結局Webページの内容が表示できなくなってしまいます。
表示に時間がかかる
Webページが徐々に表示されるのではなく、テーブル内にどれだけのボリュームがあるのかをブラウザ側ですべて読み込んで判断したあとで表示するので、それだけ時間がかかってしまうのです。
音声読み上げツールでは意図としない順番で読み上げられる
さらに、ブラウザの音声読み上げツールでは、あくまで「テーブル（表）」として認識するため、以下のようにテーブルの1行1列目から右方向、次に2行1列目というように上から下へ読み込むので、意図しない順番で読み上げられてしまう場合があります。
ページによって横幅が異なる問題が発生する
日本語のような全角文字などの等幅フォントだけのコンテンツであれば問題ありませんが、そのコンテンツにアルファベットや記号など、半角英数文字フォントが混在すると、たとえセルの横幅を固定したとしてもそれに伴って微妙に広がったりする場合があります。
これはテーブルの特性であり仕様であると思われます。
どうしても横幅を固定するには、CSSでボックスを作成して、そのボックスの幅を指定すると解決します。
まとめ
確かに、テーブルレイアウトはWebデザイナーにとって手っ取り早いレイアウトの方法ですが、あくまでテーブルはテーブルとして利用するべきです。
すべての利用者に的確に情報を提供するためにも、テーブルをレイアウト枠代わりに使うのは避けたほうがよいでしょう。
問題は解決しましたか？
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！