複数のCSSスタイルを使用できる標準的なHTMLレイアウトはありますか？

Question

ウェブデザインに関しては、遠く見栄えの良いものを作るのは恐ろしいことです。ありがたいことに、designtemplatesには多くの無料のsourcesがあります。しかし、これらのデザインの問題は、単一のページをカバーするだけであり、ユースケースは多くないことです。 CSS Zen Gardensを見ると、1つの単一のHTMLファイルがあり、CSSファイルを変更するだけでそれを根本的にスタイルすることができます。

標準的なHTMLレイアウト（タグとID）があり、多くのユースケースをカバーしていて、Zen GardenなどのさまざまなCSSファイルで一般的にテーマを設定できますか？私が想像しているのは、あなたのhtmlを書く方法、そしてあなたが使うはずのボックス、リスト、メニュー、スタイルからなる一連のルールです。さまざまな用途をカバーする一連の標準テストページを作成し、新しいCSSファイルを作成しながら、さまざまなページをすばらしい視野でサポートする必要があります。

私が記述しているのと同様のものをカバーするプロジェクトはありますか？

Answer 1

私はBluprint CSSを使用しました。これは簡単にわかるように便利です。また、いくつかのルビスクリプトを使用して、列の数とそれらの間の距離を変更することができます。デフォルトでは、span-24要素の950pxです。

Answer 2

YUIからGrids frameworkをご覧ください。特に素晴らしいのはGrid Builderです。また、それらには、あなたがビルドするための良いベースラインを与えるリセット、ベース、フォントCSSファイルのセットがあります。

Answer 3

私は一般的に、HTML標準自体で設定されたガイドラインに従ってください。

• 見出しは「h」タグになります（したがって、メイン見出しには1つのH1タグ、その下には1つ以上のH2タグなど）。
• フリーテキストがPタグの段落にグループ化されます。
• 情報を論理的にグループ化したセクションは、DIVタグに入ります。
• UL、OL、DLのようなリストタグには、どんな種類のリスト（最終的に水平に配置することもできます）が属しています。
• 情報テーブルはTABLEタグに入れられます。レイアウトには表タグを使用しないでください。
• あなたのIDとCLASS属性でスマートになります。 IDを一意に保ち、ナビゲーションメニューやページフッターなど、ページ上でユニークなものを表す要素に割り当てます。繰り返されているが類似している要素（同じようなビジュアルスタイルでレンダリングしたいかもしれない）に同じクラスを割り当てます。

私は常に非常にプレーンな垂直ページから始めます。ページを白黒にしたいと思うものすべてを実行します。次に、CSSを追加して、ビットがフォーマットされているかどうかを確認します。

私が話している事例の例として、私のhome pageの出典を見てください。

Answer 4

BluePrintCSSは、私が知っているところでは、最初のCSSフレームワークでした。 YUI CSS Frameworkとして、レイアウトを扱うのに役立ちます。

このようなフレームワークは、サイト用に複数のCSSを構築するのに役立ちます。

BluePrintCSSは非常に成熟したプロジェクトですので、ぜひご覧ください。