html - css の「デザインパターン」に関する優れたオンラインリソースは何ですか?

Question

CSS の「デザインパターン」に関する優れたオンラインリソースを推奨できる人はいますか?

ソフトウェアのコンテキストでのデザインパターンは通常、OO ベースのデザインパターンを指すことは知っていますが、より広い意味でのデザインパターン、つまり、一般的な問題やタスクに対する一般的でクリーンなソリューションを意味します。

このようなリソースの例は、このテーブルデザインのリストです。これにより、一連の CSS テクニックを使用してテーブルの見栄えを良くする方法について、本当に知っておく必要があるすべての情報が得られます。

適切なセットソリューションを持つことができる一般的な問題の他の例としては、div の角の丸み、非常に使いやすいフォームレイアウトなどがあります。

score 11 · Accepted Answer

Web デザインパターンに対処する Web サイトの一部を以下に示します。目的の結果を得るために HTML や CSS を具体的に提供するわけではありませんが、ソースを表示できるライブサイトの例を提供します (または、Firebugを使用することをお勧めします)。

UIパターン

これはおそらく最高の束です。Web ページのデザインタスクの幅をカバーするカテゴリに物事を分類します。タグクラウド、ライブプレビュー、ユーザー登録などのカテゴリがあります。これは、よく整理された非常に包括的なリソースです。各パターンを説明し、多くの例を提供します。

UI パターンに似ていますが、現時点では包括的ではありません。ユーザーが独自のカテゴリ (「ユーザーセット」) を作成し、それらに独自のサイトの選択を入力できるようにすることで、デザインパターンを照合するためのより社会的なアプローチを採用しています。

他の 2 つとは異なり、これは実際のサイトの例をあまり提供していません。よく整理されていて、非常に包括的です。

これは、Web デザインのさまざまな要素を紹介するブログです。パターンについては説明しませんが、インスピレーションを得たり、独自の分析を開始するための手段として役立ちます。

score 3 · Accepted Answer

そういうことはいつもA List Apartの記事を参考にしています。

彼らは多くの試行錯誤の研究を行い、これらの一般的な CSS の問題を可能な限り最もクリーンでポータブルな方法で処理するための本当に創造的な方法を考え出しています。

score 2 · Accepted Answer

Floatutorialは、CSS の重要な属性である "float" と、それを使用して 2 列や 3 列のリキッドレイアウトなどの一般的なパターンを使用してコンテンツをレイアウトする方法を学習するための優れた出発点です。

Floatutorial では、画像、ドロップキャップ、[次へ] ボタンと [戻る] ボタン、画像ギャラリー、インラインリスト、複数列のレイアウトなど、フローティング要素の基本について説明します。

score 0 · Accepted Answer

すでに述べたA List Apartは本当に良いです。Web 開発を始めて以来、私が使用しているもう 1 つのサイトは、SitePoint.com です。これが彼らのCSS リファレンスです。優れた CSS の本が必要な場合は、彼らの本が私のお気に入りの 1 つです。

score 0 · Accepted Answer

CSS の「デザインパターン」に最も近いものは、一般的なレイアウトです。一般的なレイアウト、列幅などを利用するための最適なツールは、960.gsの960 グリッドシステムです。

簡単な紹介については、このスクリーンキャストをご覧ください。時間を大幅に節約し、最小限のコードですべての一般的なレイアウトパターンを適用するのに役立ちます。

必要な作業は、適切なクラスを適用し、少し計算して、すべての列幅が合計されるようにすることだけです。

私が最もお勧めする CSS の本は、Andy Budd によるCSS Mastery ( cssmastery.com ) です。やや小さいですが、他のどの CSS ブックよりも役に立ちました。