CSSを使用したWebページのスタイル設定のベストプラクティス
デザインするウェブサイトがあります。ページの外観と相互作用についての情報があります。問題は、私がフロントエンドの設計が得意ではなく、もののこつを得るために何時間も費やしたことです。現在、githubのサンプルサイトのCSSを使用してサイトのスタイルを設定していますが、これは非倫理的な方法のようです。
質問： Webページのスタイルをどのように設定しますか？
- 本当に良いツールはありますか？
- 詳細な回答が提供されるか、wikiへのリンクも機能するようになれば幸いです。
独自のCSSを作成することは本当にARTであり、習得するにはかなりの時間がかかる場合があります。ただし、いくつかの簡単なショートカットがあります。基本的に、既存のテンプレートを再利用し、それらをわずかに変更すると、短時間で結果が得られます。 CSSで動作するいくつかの無料ツール- 50非常に便利で強力なCSSツール があります。
したがって、テンプレートからを開始することは、Web開発者にとって最も簡単で最速の方法です。とても便利な無料の良いテンプレートサイトがいくつかあります。さらに、数ドルのまともなCSSスタイルがあります。これは、優れたCSSスタイリングが必要な場合に訪問したいテンプレートサイトのリストです。
CSSを学ぶのに適した場所をいくつか紹介します。私はコメントのW3Toolsリンクからそれらを取得しました：
いくつかの異なるアプローチがあり、それぞれに長所と短所があり、それらのほとんどは特定のワークフローに関連付けられています。
作業が「グラフィックデザイン」、「インタラクションデザイン」、「スライス」、「フロントエンドスクリプト」、および「バックエンドコーディング」に分割されている大規模なチームでは、各ジョブは別の人、CSSパートによって実行されますスライスを行う人の仕事です。その人はHTMLとCSSの両方を制御するので、好きなようにそれを行うことができます。多くの場合、Dreamweaverなどのツールを使用します。これはWYSIWYG編集を可能にしますが、結果のHTML/CSSはしばしば面倒で保守が困難です-コードを書く前にプロセスがデザインを完全に設定する必要がある場合は問題ありません。変更されるので、保守性に余分な労力を費やす意味はほとんどありません。
ただし、多くの場合、チームは小規模であり、サイトはより動的で維持しやすいものである必要があります。このような状況では、スケーラブルで適応可能なCSSを作成することが重要です。私が合理的にうまく機能しているのはこれです：
- いくつかの「リセット」ルールから始めます。事前に作成された汎用リセットスタイルシートを使用するか（Googleで使用できます。ネット上には多くの優れたものがあります）、簡単なルールを自分で作成することもできます。一部の人々はリセットスタイルシートを信じていません。それは本当に好みと哲学の問題なので、気に入らない要素のデフォルトの外観を無視したい場合があるかもしれません。
- HTMLのセマンティクスを維持します。つまり、外観ではなくドキュメントの構造を反映するように記述します。スタイルシートなしでHTMLをロードします。それはまだ意図したように見える必要はありませんが、それ自体が論理構造で存在する必要があります。
- 要素名（
div、dd、input、a、...）および必要に応じて擬似に一致するルールを記述して、一般的なスタイルを作成します-elements/pseudo-classes（a:hover、a:visited、...）、および属性セレクター（input[type=text]などの入力の異なるタイプを区別するために必要です）。一般的なHTMLで試してください。 http://loripsum.net/ の出力。これがデフォルトの外観になります。ほとんどのサイトは、これらのルールだけで問題なく見えるはずです。 - これで、まだ望んでいないように見えるサイト要素がいくつか残っています。それらについては、意味的に、要素が何であるか（またはそれが何であるかの1つの側面）を説明するクラス名を追加します。例としては、
<input type="submit" class="default-button"/>、<div class="validation-errors">などがあります。クラス名を使用してプレゼンテーションプロパティ（<span class="red large">、<div class="float-right">）を記述しないでください。実際のルールとは異なる傾向があります時間が経つと、クラスfloat-rightが左に浮遊するか、そのようなナンセンスな状態になります。クラス名に基づいてこれらの要素にスタイルを設定します。たとえば、デフォルトのボタンを大きくする必要がある場合は、.default-button { font-size: larger; }（または、必要に応じてパーセンテージ）を使用します。 - インラインスタイルは絶対に避けてください。
健全なブラウザ（Firefox、またはWebkitベースの何か）で開発します。すべてが機能したら、少なくともFirefox、Webkit、およびOperaでテストします。それはおそらくIEで壊れるでしょう。条件付きコメントを使用して、サポートする必要があるさまざまなIE=バージョンの追加のスタイルシートを含め、機能させるために必要なハックを追加します。
ツールに関する限り、テストにテキストエディタとブラウザ以外に必要なものはありません。Firebugまたは同等のドキュメントインスペクタプラグインは非常に役立ちます（Google Chrome/Chromiumには同様のツールが組み込まれています）、特にブラウザ内でスタイルを変更できるため、スタイルは保持されませんが、すぐに試して、何が機能するかを確認できます。
サーバー側には、ショートカットを取ることができるいくつかのテクノロジーがあります。基本的に、CSSのスーパーセットで記述されたスタイルシートを取得し、変数やネストされたルールなどを追加して、送信する前に通常のCSSに変換しますブラウザに。 cassiusとluciusテンプレート言語（Haskell用）は素晴らしい例ですが、多くのプログラミング言語用のソリューションがあります。
ほとんどの真のWeb開発者は、独自のCSSおよびHTMLを最初から作成します。ツールはCSSルールのテストや調整に役立ちますが、あなたのためにそれを行うと主張しているものは、それが価値があるよりも厄介です。
HTMLとCSSを適切に使用することを学ぶことは、他のテクノロジーを学ぶのと同じように時間がかかるものです。ショートカットはありません。練習すればそこに着きます。
そうは言っても、Dreamweaverのような一部のWYSIWYGエディターは、オートコンプリートを提供するCSSルールの編集をサポートしています。私が最初に始めたとき、これは非常に便利でした（Ctrl + Spaceを押して、可能なすべてのCSSルールのリストを表示します）。
他のすべてのアドバイスに加えていくつかのガイドライン：
- リセットスタイルシートを使用して、すべてのブラウザで同じ基本的なルックアンドフィールを実現します。 HTML5リセット 。
- ボックスサイズ/マージン/パディングを使用してボックスモデルの動作を確認するときに、要素に「醜い」色の背景を与えます。特に、CSSを使用する場合に役立ちます。
- CSSにいくつかの一般的な値を使用し、Firebugなどを使用してこれらの値を調整します。
- 「特異性戦争」に陥るのではなく、CSSをモジュール化しておくようにしてください（うーん、なぜ私のスタイルは
li.special-class適用されませんか？あ、#my-wrapper li何処か別の場所）。 [〜＃〜] smacss [〜＃〜] 方法論または オブジェクト指向のC4S を適用できます。 - すべてのブラウザで同じ外観の必要性を過大評価しないでください。それらを理解する丸い角を提供しますが、グラフィックを使用してIE6に提供しません。 ウェブサイトは雑誌のようなものではなく、テレビのチャンネルのようなものです。