固定幅のないCSSレイアウト

Question

私はCSSの専門家ではありません。ある程度は知っていますが、あまり深くはありません。 IE6は私を泣かせます。だから、私はいつも人々がそれで何ができるかを楽しみにしています。

ただし、私が見るほとんどの例では固定寸法を使用しています。私が理解している限り、CSSは非常にトリッキーで、特にIE6で要素に幅がある場合、ハッキングがはるかに簡単だからです。

しかし、私は柔軟な幅が本当に好きです。それで、なぜテーブルでデザインするのが間違っているのか理解できませんか？ <！> quot; CSSについて知っていることはすべて間違っているという本があります！<！> quot;最近のブラウザでCSSを使用してテーブルレイアウトを実行できることがどのように優れているかを説明しています...しかし、HTMLテーブルで常に実行できないのでしょうか。はい、それはCSSではなく、おそらく純粋なCSSほどクリーンではありません...しかし、結局のところ、テーブルレイアウトはしばしば必要なものです IS 。 -しかし、純粋ではないHTMLテーブル、これらの選択のいずれかが悪いと考えられる理由を理解していません。 KISSは良いことですね？

または、私はそれを理解していない可能性があり、CSSでテーブルのようなレイアウトを作成できます-IE6で動作します-お尻にあまり痛みを感じることなく？そのようなサイトの例はありますか？

更新：はい、コンテンツとスタイルの分離について知っています。実際、私はDRY、SRP、その他のデザインでやるべきことに夢中です。だからこそ、CSSで実際にやろうとしたのです。しかし、上記のような本に書かれているように、テーブルよりもはるかに難しく、信頼性が低い場合、なぜそんなに頑張るのですか？すべてをテーブルで行う必要があるとは言いません。しかし、それが本当にCSSよりも簡単である場合-単純で予測可能なソリューションよりもCSSを好むのはなぜですか？

つまり、常にテーブルを使用する必要があるとは言いません。マスターページのレイアウトを覚えておいてください-それは独立しており、他のページに影響を与えません、私はCSSからテーブルに切り替えて20分で元に戻すことができます（実際にすでにそうしました）-テーブルがあるにもかかわらずCSSに固執する理由害はありませんか？

更新：これは私が言いたいことの非常に良い要約であることがわかりました： http://www.flownet.com/ron/css-rant.html 。ディスカッション http ：//rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments 。

興味のある方のために、さらに良い記事があります： http://kv5r.com/ articles / dev / layouttables1.asp

Answer 1

あなたは本質的に正しい。アクセシビリティのために、セルの順序がページに適している限り、レイアウトにテーブルを使用しても実際に問題はありません。個人的には、固定幅は、tables-for-layoutよりもユーザビリティの低下がはるかに悪いと感じています。

テーブルをレイアウトに使用する場合は、スタイルwidth: 100%; table-layout: fixed（およびスタイル付き<col>のwidth）を使用して、ブラウザが最初からテーブルを正しくレイアウトできるようにします（これにより、使いやすさの問題（テーブルレイアウトにあった）、そしてIEの貧弱な自動レイアウト幅推測に依存しないように。

可能な限りレイアウトにCSSを使用するのは確かですが、ほとんどの単純なサイトレイアウトはCSSのみを使用して合理的に達成できますが（特に現在はIE5とその風変わりなボックスモデルはなくなりました）、CSSがハッキングできない場合がありますテーブルができます。一般的なケースは、複雑な流体幅のフォームです。

最も重要な問題は、ビューポートの幅から別の列の固定サイズを差し引いた列を取得するためにwidth: 100%-10emのようなことを言うことができないことです。簡単なケースでは、マージンとラッパーdivでこれを回避できますが、CSSレイアウトを機能させるためだけにページ上の要素の順序を変更し、複数のラッパーを追加し始めると、プレゼンテーションは既に混同されています。内容：テーブルとそれほど大きく異なるわけではありません。

最悪の場合、これらの愚かな<！>＃8216; CSSフレームワーク<！>＃8217;ネストおよび固定クラス名を使用して、マークアップ自体の内部のレイアウトを完全に指定する必要があります。これは、テーブルよりも優れています。私は、この古き良き時代へのこの絶望的な先祖返りがトレンディな最先端のWeb 2.0テクニックと考えられていることを絶対に愉快に思います。

CSS3は、いくつかの興味深い代替案に取り組んでいます。マークアップとレイアウトの完全な分離を約束します。しかし、それは今日の長い道のりです。

Answer 2

Yaml および Fluid 960gs 。どちらも、クロスブラウザレイアウトで非常に役立ちます。テーブルレイアウトは答えではなく、IE6は遅かれ早かれ消滅します。

Answer 3

HTMLテーブルが表形式データ以外のものに悪い理由があります。 HTMLはデータコンテンツのマークアップ言語であるため、そのデータのレイアウトではなく、実際のデータのグループを含める必要があります。 CSSは完全にレイアウトとスタイルを目的としています。したがって、その名前。したがって、CSSにはWebページのルックアンドフィール全体が含まれ、HTMLにはデータの構造が含まれます。トウェインは決して会わない。

表ですべてを実行するのは、理由が悪いです。

スタイルとコンテンツ間の抽象化と考える必要があり、ここから適切な要約を得ることができます： http://www.alistapart.com/articles/separationdilemma/

また、あなたの質問に直接答えて「A List Apart」に行き、あなたの記事を検索してください。彼らはあなたがこれから行おうとしている旅について説明しています： http://www.alistapart.com / articles / journey /

単純で予測可能なソリューションよりもCSSを好む理由

それが私たちが言おうとしていることです。短期的には簡単に見えるかもしれませんが、あなたが書いたものはどれも保守性が低く、将来編集するのが難しくなります。短期的には簡単に見えるWebページにアクセスして作成できますが、後からもっとやりたいときに実際に足を刺すだけです。なぜそれを最初のラウンドで正しくしませんか？ （実際にはほんの少しの余分な努力です）

Answer 4

CSSレイアウトはあなたにとって挑戦であるため、テーブルより劣りません。これを述べることで、あなたは相対主義者の誤acyとして知られる論理的な誤acyを犯しています。

CSS、その使用方法、およびブラウザーのさまざまな癖を完全に理解すると、HTMLテーブルよりもはるかに優れていることがわかります。

マークアップはセマンティックでなければなりません。つまり、含まれるコンテンツを正確に記述する必要があります。これにより、マシンが読み取り可能になります（SEOおよびその他のアプリケーション用）。レイアウト用のテーブルはまったく意味を持ちません。

さまざまなレイヤーを抽象化すると、Webサイトのメンテナンスがはるかに簡単になります。コンテンツをHTMLに、動作をJavascriptに、プレゼンテーションをCSSに保持します。

しかし、CSSには欠点があるのは正しいことです。しかし、テーブルにはもっと多くのものがあり、それはさらに悪いことです。

Answer 5

テーブルをレイアウトとして使用するマークアップを作成したくない理由は、デザインとコンテンツの分離のためです。

マークアップは、その中にあるコンテンツの完全な説明として、単独で配置する必要があります。基本的に、スタイルに触れる前に、htmlでページをマークアップする必要があります。次に、CSSを使用して、デフォルトでセマンティックマークアップの外観を変更します。

問題の事実は、レイアウトしているWebコンテンツが「表形式データ」ではないことです。マークアップはコンピューター/ボットが読むためのものであり、スタイルは私たちが見るためのものです。通常、保守性の追加コストがかかります。

Answer 6

ここで私が個人的に遭遇したシナリオを紹介します。注：<！> quot; no-table-at-all <！> quot;は推奨していませんが、他の要件にも対応しています。

フォームを作成しました（視覚的にトップダウンフロー）：

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

その後、顧客は次のようなより構造化された管状のものを望んでいました。

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

TR TDソートのテーブルを使用していないので、CSSの変更とHTMLマークアップのマイナーな変更を使用して、構造を簡単に（ほぼ）変換できます。