テーブルデザイン不要論

他の人がもう書いていそうな気がしますが、この間知り合いに聞かれたので…。

これから書くことは、「テーブルなんか使わないでもスタイルシートでほとんど同じ事が出来てしまうんだぞっ!」という方法の解説です。

正直、テーブルタグは、そもそもデザインのために作られたものではありません、文書の構造をはっきりさせるためにも、出来る限りこれでサイトのデザインを作るべきではなかったりします。

「でも、他に方法ないし…」という声も時々聞きます。でも実は、スタイルシートを使いこなせば、テーブルタグ使用以上に自由なデザインが可能になるのです。

実際、試しに作ってみるとまだまだ必要なプロパティが実装されていなかったりと問題はあるので、完全移行は難しいかもしれませんが、実はスタイルシートで作って置いた方が後々メンテナンスが楽になったり、新しいサイトを作るときに自分のスタイルシートを再利用して楽々作れたりと、良いこともあったりします。

作るには、それ相応にコツがいりますが、テーブルで自由にデザインするとかいう荒技をやってこれた人達なら、越えられないことはないと思われます。

あと、作っていて分かりましたが、できるだけ、IEのついでに、OperaかMozilla系のブラウサを用意しておいてください。

紹介する物は、IE(一応6以上)対応のページ製作法を紹介いたしますが、使用の違いから来る混乱を避ける為に、規格準拠系のブラウサがあった方が良いです。

動作確認に使用したブラウザは、下の通りです。

それでは、始めましょう。

  1. スタイルシートでテーブル制作
  2. サンプル1:positionで作る標準的blogスタイル
  3. サンプル2:float使用で作るCGサイト系
  4. ちょっと裏技、position:relative;
  5. 完全相互変換、tableデザインとfloat
  6. 複数改案、メリット、デメリット
  7. 省略解説の作例集
  8. 最後に
  9. お勧めリンク集