テーブルレイアウトの良い点を探す旅
テーブルレイアウトとCSSレイアウトの比較
| 比較項目 | 比較項目詳細 | 初期の テーブル レイアウト |
ハイブリッド レイアウト |
CSS レイアウト |
|---|---|---|---|---|
| ページ容量 | 容量 | 大きい | 普通 | 小さい |
| トラフィック | 増加 | 中間 | 減少 | |
| ネットワーク・サーバに負荷 | かからない | 中間 | かかる | |
| ダウンロードにかかる時間 | かかる | 中間 | かからない | |
| 通信料 補足 | かかる | 中間 | かからない | |
| サーバのHDの残り容量 | 小さい | 中間 | 大きい | |
| ページ表示 | ブラウザで表示される時間 | かかる | 中間 | かからない |
| テキストブラウザでの視認性を 同一程度に保つための対策 |
困難 | 中間 | 容易 | |
| 音声ブラウザでの理解しやすさを 同一程度に保つための対策 |
困難 | 困難 | 容易 | |
| 検索エンジン最適度合い | 低い | 中間 | 高い | |
| 検索エンジンのクローラー にとってのわかりやすさ |
わかりにくい | 中間 | わかりやすい | |
| ワンソースマルチユース | 困難 | 中間 | 容易 | |
| ページ制作 | 構造化されたマークアップ | 完全には 不可能 |
完全には 不可能 |
完全に 可能 |
| 構造とレイアウトの分離 | 不可能 | 完全には 不可能 |
可能 | |
| 異なったデザインへの移行 | 困難 | 困難 | 容易 補足 | |
| 制作スピード | 速い | 高速 | 遅い | |
| 単純なレイアウトのHTMLの新規制作 | 容易 | 容易 | 普通 | |
| CSS向きにレイアウトされた HTMLの新規制作 |
面倒 | 容易 | 容易 | |
| CSSを考慮に入れず レイアウトされたHTMLの新規制作 |
普通 | 容易 | 困難 | |
| 似たようなレイアウトだが内容の違う HTMLの新規作成 |
容易 | 容易 | 困難 | |
| ブラウザごとに施す対策 | 容易 | 容易 | 困難 | |
| テキストをグラフィックにした場合の複雑さ | 単純 | 単純 | 複雑 | |
| ロールオーバー処理 | 複雑 | 容易 | 容易 | |
| テキストの量に応じてブロックを伸ばし 相対的なレイアウトを実現する |
容易 | 容易 | 困難 | |
| コピーペーストの判断 | 容易 | 中間 | 困難 | |
| ページ修正 | エラー修正総合難易度 | 容易 | 中間 | 困難 |
| CSSエラー修正 | ない | 容易 | 困難 | |
| 既存の項目と同構造の項目の 新規差し込み |
複雑 | 単純 | 単純 | |
| 新規項目の差し込み | 容易 | 容易 | 困難 | |
| エラー箇所の特定 | 容易 | 中間 | 困難 | |
| エラー箇所を特定した後の 数ページに及ぶドキュメントの修正方法 |
置換 | 置換 CSS修正 |
CSS修正 | |
| エラー箇所がCSSセレクタで指定でき 単独に修正可能な場合の修正時間 |
遅い | 中間 | 速い | |
| 競合する特定の要素へのプロパティの修正 | 置換 | 置換 クラスの追加 |
クラスの追加 | |
| オーサリング ツール |
オーサリングツールでの扱いやすさ | 容易 | 容易 | 困難 |
| モジュール化 | 不完全 | 可能 | 可能 | |
| ライブラリ上でのグラフィック確認 | 可能 | 可能 | 不完全 | |
| チーム内 | チーム内での共通認識 | 比較的容易 | 比較的容易 | 比較的困難 |
| ヘルプ作業 | 容易 | 比較的容易 | 比較的困難 | |
| 全く別サイトへの レイアウトノウハウのモジュール化 |
困難 | 部分的に 可能 |
可能 | |
| その他 | 修正時に追加した項目のせいで 統一がとれなくなることに感じる不快感 |
少ない | 少ない | 多い |
| Web標準という言葉に胸を張れるか | 張れない | 後ろめたい | 張れる |
- 検索エンジン最適化（SEO）は、検索エンジンのINDEX化される仕様が公開されていない、仕様は今後変わる可能性を秘めている、の理由からあくまでもひとつの見方に過ぎません。ただし、多くの人の経験や実験から統計的に解析されているのも事実です。
- どの場合も、初心者ではなく中級以上のスキルで臨んだものとします。
- 比較項目にもありますが、完全に正しいマークアップをしたい場合はテーブルは表としてしか使えないため、レイアウトに使うことはナンセンスです。つまり、テーブルレイアウト・ハイブリッドレイアウトはどんなことがあっても使えないという結論に帰結します。
補足
- モバイル使用時のパケット代、ダイヤルアップ時の通話料など
- 異なったデザインにCSSで対応するには、デザインの変更に対応できるマークアップが施されたHTMLが必要
参考サイト
- キーボード・キー入力に気を使う
- DOCTYPE宣言とブラウザ解釈
- CGIテストの環境作り
- 背景（Background）をパターンで敷き詰める
- テーブルレイアウトの良い点を探す旅
- 高速でPhotoshopを使う
- Photoshopで何ができるのか
各ページの内容には万全を期してはいますが、（1）私の解釈の間違い （2）参考にしたソースの間違い （3）情報が古くなったことによる間違い、の可能性が常にあります。内容の信頼性は各人の判断に委ねます。
また、あるサイトからあるサイトへリンクをはる場合、サイト運営者の許可は不必要だと考えます。したがって、当サイトへのリンクは自由ですが、URLはトップページ以外常に変わる可能性があります。
デジタルメディアである以上、コピー&ペーストを制限することはできないとあきらめていますが、著作権を放棄したわけではありません。
InternetExplorerでも問題なく見れると思いますが、FireFoxでみることをおすすめします。
