テーブルが表形式のデータ用であることは知っていますが、レイアウトに使用するのはとても魅力的です。DIV を処理して 3 列のレイアウトを取得することはできますが、ネストされた DIV が 4 つになると、扱いにくくなります。
レイアウトに DIV を使用するよう説得するためのチュートリアル/リファレンスはありますか?
DIV を使用したいのですが、希望する場所に DIV/SPAN を配置するために 1 時間も費やすことを拒否しています。
@GaryF:ブループリント CSSは、CSS の最高の秘密でなければなりません。
優れたツール - Blueprint Grid CSS Generator。
あらゆる種類のことを実行できるYahoo Grid CSSがあります。
ただし、覚えておいてください: CSS は宗教ではありません。css の代わりにテーブルを使用して時間を節約する場合は、そうしてください。
私が決して決心できなかったコーナーケースの1つはフォームです。CSSでやりたいのですが、テーブルよりもはるかに複雑です。
ヘッダー (ラベル) とデータ (入力フィールド) があるという点で、フォームはテーブルであると主張することさえできます。
英国と米国では、表よりも CSS レイアウトを優先する法的要件があります。第 508 条 (米国) と障害者差別法 (英国) の両方が、視覚に制限のあるユーザー向けのアクセシビリティ基準をカバーしています。
英国では、この法律は、部分的に視力のあるユーザーの能力を妨げるサイトを商業的に制作することを実際に違法とするところまで拡張されています.車椅子の利用者が入場できるように - 確かに、ウェブサイトのアクセシビリティに関してはまだ起訴されていません。ただし、サイトのデザインを長期的に維持するのが非常に簡単であることを意味するので、私は常に CSS を使用します。
CSS の学習に時間を費やすこと (私は W3C スクールと .Net Magazine http://www.netmag.co.ukを使用しました) は報われるでしょう。
私の意見では、バイアスは IE6 よりも CSS に有利であるべきです。つまり、非常に正当な理由がない限り (たとえば、あなたのサイトは IE6 を使用しているユーザーのみをターゲットにしているなど、奇妙なことです)、むしろ IE6 を使用しているユーザーを「疎外」する方がよいでしょう。視力の弱い人や自動化されたユーザー エージェントよりも優れています。IE6 の使用は減少しています。後者のグループが増えています。サイトが IE6 で完璧に見えなくても、それらのユーザーにとっては、表ベースのレイアウトよりも読みやすいでしょう。
これは非常に一般的な質問であるため、具体的に回答することは困難です。優れたリソースである 2 冊の本は次のとおりです。
サイト全体のレイアウトをデザインするのに 1 時間しかかからないのであれば、それは悪いことではありません。
CSS は宗教ではないかもしれませんが、ブラウザーがレイアウトのために HTML を解釈する方法です。好むと好まざるとにかかわらず、最近のすべてのブラウザーは (あるバージョンの) W3C ボックス モデルを使用しています。テーブルに依存し続けることは、Web レンダリング テクノロジを設計する人々の目には明らかに間違っている方法論に依存し続けることです。
CSS が非常に複雑に見える場合があることは承知していますが、CSS は今の時代に必要なものだと思います (信じてください、あなたのクライアントはそれを望んでいるでしょう)。
CSS の学習に時間を割くのが苦手な場合 (つまり、要素を配置するのに 1 時間ではなく数秒または数分かかります)、レイアウトの作業をフロントを本当に知っている人に渡す必要があります。終わり。
はい、CSS の現在のブラウザー実装には多くの問題がありますが、テーブル ベースのレイアウトに戻る必要性を感じるほど抜本的なものはありません。他の言語やフレームワークと同じように、座って時間をかけて学習してください。
私が見つけた最高のオンライン参照リソースはこれです: http://reference.sitepoint.com/css
しかし、 Designing With Web Standardsのような本は、このようなことが重要である理由を理解するのに大いに役立ちます。
また、 YAML (Yet Another Multicolumn Layout)を見るまで、ブループリントは素晴らしいと思っていました。素晴らしいオンラインビルダーツールがあります。見栄えの良い複数列のレイアウトを 5 分以内に作成できます。
しばらくすると、あなたはそれについて考えさえしません。CSSでdivを使用することは、より簡単なオプションimoのようです。さらに、jQueryなどのフレームワークを使用する際の自由度が高まります。cssまたはdivを使用せずにいくつかのクールなjQueryを実行することは想像できませんでした。スタイルやレイアウトにテーブルを使用する場合、多くの新しいテクノロジーを見逃し、90年代にとどまっているような気がします。
レイアウトにCSSを使用するのは、意味的に正しいだけでなく、テーブルには複数の欠点があるためです。
テーブルはほとんどすべてのスクリーンリーダーを壊してしまうため、アクセシビリティにとって恐ろしいものです。テーブルの読み取り方法が原因で、視覚障害のある価値のない情報が提供されます。
また、CSSの対応するものよりもレンダリングがはるかに遅くなります。テーブルは2回描画する必要があります。1回はレイアウト用、もう1回はコンテンツ用です。これは、接続が遅いサーバー上にリモートイメージが1つか2つある場合、レイアウト全体がレンダリングされないことを意味する場合があります。
ハッシュマップがある場合、配列を使用して辞書を格納しますか？いいえ。もっとうまく機能するものがある場合は、テーブルを使用しないでください。
ここでいくつかのインスピレーションを見つけることができるかもしれません：http：//blog.html.it/layoutgala/
私はちょうどテーブルを使用します。
私の経験では、レイアウトにテーブルを使用することはすべてのブラウザーで同じように機能し、CSS は機能しません (特に IE6 をサポートしようとしている場合)。テーブルを使って 10 分でできるのに、CSS でレイアウトを動作させるために何時間もコーディングする価値はありません。
テーブルを使用するもう 1 つの利点は、コンテンツに合わせてレイアウトを非常に簡単に動的にサイズ変更できることです。CSS でそれを成し遂げようとするのは、大きな悪夢です。
CSS には多くの制限があり、仕様の設計者が生計を立てるために Web サイトを作成しないことを暗示しているように思えます。
CSS で簡単にできない場合は、HTML テーブルを使用してください。
そうは言っても、いくつかのフレームワークは役に立ちます。管理できるのであれば、常に CSS で行う方が良いでしょう。
これは役に立たないかもしれませんが、CSS に関連するこれらすべての問題がどういうわけか理解できません。新聞のデザイナーが広告ページに映画を埋め込もうとすると、誰もが彼が少し頭がおかしいことに同意するでしょう。しかし、HTML での 3 列のレイアウトの後でも、同じ人々が松明を求めています。現時点では、HTML はこの種のレイアウトを適切に処理するのに適していません。さらに、複数列のレイアウトは、通常、コンピューター モニターでの読み取りにはあまり適していません。実行可能な代替手段が十分にありませんか？
ところで、テーブルでさえ、流暢な列レイアウトを実装する良い方法を提供していないため、そのようなハックに頼る理由はまったくありません. 最新のブラウザー (MSIE 6 以上) を中途半端に想定すると、テーブルは、私が知っているクリーンな HTML + CSS よりも利点がありません。
A List Apartは、セマンティック HTML を使用するための優れたリファレンスです。Holy Grail の記事は、おそらく最良の例の 1 つです。また、CSS Zen Gardenでこのトピックに関するインスピレーションを得るか、Dave Shea の優れた本「The Zen of CSS Design」を読んでください。