tableレイアウトとCSSデザイン、ハイブッド、どういう違いがありますか？

質問

無料のテンプレートを使ってHPを作ろうと思っています。（HTMLとCSSの知識は多少あります。）
テンプレートには、
tableレイアウト、CSSデザイン、およびハイブッドがありますが、これらは目的によって使い分けられているのでしょうか？「こういう場合はCSSが良い」とかあるんでしょうか？

分かる方がいたら、教えてください。よろしくお願いします。

回答No.3

abril · ベストアンサー

> 管理のしやすさとか、拡張のしやすさとか、それほど違わなければ、慣れている「テーブルレイアウト＋CSSデザイン」を使おうと思っています。

それはどうでしょうね…「管理のしやすさとか、拡張のしやすさ」という点においては「かなり」違いがあると思いますよ。
ANo.2様の分類を上から(1)(2)(3)とさせ頂いた場合、(1)はメンテナンスの効率が非常に悪いのはおわかり頂けると思いますので論外とします（装飾的要素が変わる度にたくさんの画像から作り直さねばならない）。
(2)(3)は画像関連の修正については大差ないかと思いますが、劇的な違いは、レイアウト（テンプレート）変更の際に起こります。
例えば現状が以下の様な2コラムのレイアウトだったとします。
－－－－－－－－－－－
ヘッダ
－－－－－－－－－－－
ナビ　|　メイン　　　|
ナビ　|　メイン　　　|
ナビ　|　メイン　　　|
－－－－－－－－－－－
フッタ
－－－－－－－－－－－
これを、リニューアルしてナビを右にメインを左に、という表示のレイアウトに変更したいとします。
もしHTML側を所謂テーブルレイアウトでマークアップしていると、セルの組み方を変えねばならず、HTMLファイルの大幅な修正が発生せざるを得ません。
しかし、これをCSSでのコラム組にしておけば、構成変更の際もHTML側をほとんど修正する事無く、CSSファイル一つを調整する事で一瞬にして各コンテンツのレイアウトを差し替える事も可能となります。
すごくわかりやすい例がありますので、挙げておきます（CSS HappyLifeさんのサイト）↓
【参考】http://css-happylife.com/log/css-template/000161.shtml
ここに、上記の様な構成の2カラムサンプルが提供されていますが、各サンプルのサムネイル画面をクリックして実際のコンテンツのソースをご覧になってみて下さい。一目瞭然ですが、例えばSample 01と02はメニューが左右逆の表示になっているにも関わらず実はこの2つのサンプルのHTMLのマークアップは全く同一です。どちらも、テンプレートの大枠は下記の様になっています。
<div id="header">
ヘッダー
</div>
<div id="main">
<div class="inner">
メイン
</div>
</div>
<div id="sub">
サブ
</div>
<div id="footer">
フッター
</div>
この構成を全く変える事なく、CSSの#main、#subといったセレクタのプロパティの内容を調整するだけで、レイアウトの変更を反映させる事ができます。これはわかりやすい一例ですが、やはり(3)は完全に論理構造とデザイン要素を分離させる事ができる為、（のちのちのそういったレイアウト変更の可能性等も踏まえた上で、適切な作成の仕方をしておけば）メンテナンスはかなり容易になります。

お礼

ありがとうございます。おっしゃること、理解できます。
とても参考になりました。

回答No.4

DrFell

●メンテナンス性は格段にｃｓｓが上です。
http://generator.designiddatabase.net/data/frame_155508.aspx
ここの下の方、うす紫色のテキストｈｔｍｌの中身を、ｃｓｓをいじるだけで、上40種類のデザインを実現されてます。

●さらに、みんなに読んでもらいたいならｃｓｓが上です。
真偽は知りませんが、一応YahooやGoogleに正当な評価を得られることになっています。tableはあまりロボットには正しく伝わらないようです。「seo」を考えるならｃｓｓにしておいた方が安心。

●テーブルが悪いのではなく、デザイン目的に使うのは根本的に正しくない
テーブルは表です。デザイン台紙ではありません。

●視覚にハンディのある人もｃｓｓの方がアクセスしやすい

○ｃｓｓは古いブラウザは解釈しない。
　→過去の亡霊のようなバージョンのブラウザにも思ったように表示されるテーブルレイアウトを使う。
　→IE5.5利用者を切り捨てていいなら、NN4使用者を切り捨てて良いならｃｓｓ。だめならテーブル
○デザインによっては、テーブルの方が楽なこともある。

但し、●はｃｓｓの基本概念を理解した上でのマークアップを施した場合であり、見出しにもdiv、本文にもdivなど、ただ単にテーブルレイアウトの手法をｃｓｓに置き換えただけのdiv病の方のｃｓｓレイアウトには、有効ではありません。div病するくらいなら、まだ、テーブルレイアウトのほうが「マシ」、ハイブリッドのほうが「マシ」だと思います。

私見ですが、過去を見つづけるならテーブルで、将来を見るならｃｓｓを勉強されることをお奨めします。

お礼

なるほど、納得です。
独学でCSSを勉強して一応は使っているのですが、
本当の意味で使いこなせていないようです。
これからもっと勉強します。
ありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

あくまで私見ですが。

・テーブルレイアウト＋画像デザイン
・テーブルレイアウト＋CSSデザイン
・CSSレイアウト＋CSSデザイン

に分けられると思います。

ImageReadyやFireworksのスライスを利用してHTMLファイルを作ると
テーブルレイアウト＋画像デザインで作られ、枠線もすべて画像で作られます。

Dreamweaverやホームページビルダーなどのオーサリングソフトはテーブルレイアウト＋CSSデザインでの作成が得意なので、
スタイルシートのborderプロパティを使ったり、background-imageプロパティを使うことになると思います。

CSSレイアウト＋CSSデザインはいわゆるWeb標準や「テーブルを使わないデザイン」です。

そのテンプレートで「tableレイアウト」と書いてあるのは「テーブルレイアウト＋画像デザイン」、
「ハイブリッド」というのは「テーブルレイアウト＋CSSデザイン」のことだと思いますので、
いわゆるHTML手書きならCSSデザイン、
オーサリングソフトを使うならハイブリッド、
Fireworksなどを使って、スライスをまたがった画像を一括変更するのはtableレイアウト（元データとなるpngファイルやpsdファイルが含まれていれば）
のテンプレートが便利だと思います。

お礼

ありがとうございます。
＞Fireworksなどを使って、スライスをまたがった画像を一括変更するのは
この部分以外は理解できました。

要はソフトの違いによるところが大きいということでしょうか。
管理のしやすさとか、拡張のしやすさとか、それほど違わなければ、慣れている「テーブルレイアウト＋CSSデザイン」を使おうと思っています。

回答No.1

naokita

３種類のテンプレートがあるって事ですよね？

製作した作者が勝手に３種類つくったのでしょう。
詳細は分かりませんが名前からすると
細かい部分の設定がCSSでは、出来るので見栄えの違いだったり
プロバイダーの簡易サーバスペースだとCSSの設置すら出来ない場合があるのでtableタイプがあるかも？。
初心者、中級者、上級者のレベルにあわせて
簡単にカスタマイズが出来るようにしたのかもしれません。

お礼

早速の回答、ありがとうございました。