この記事では、Web サイト再構築の基礎を築くためのいくつかの一般的な CSS テクニックをまとめました。何か役立つことを学んでいただければ幸いです。
1. CSS の略語を使用する
略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSSの略語に関する主なルールについては、「CSSの基本構文」を参照してください。
2. 値が 0 でない場合は単位を明確に定義してください
ディメンションの単位の定義を忘れることは、CSS の初心者によくある間違いです。 HTML では単に ;100 と書くことができますが、CSS では、「 width:100em 」のように正確な単位を指定する必要があります。単位を未定義のままにしておくことができる例外は、行の高さと 0 の値の 2 つだけです。それ以外の場合は、その他すべてです。値の後には単位を続ける必要があります。値と単位の間にスペースを入れないように注意してください。
3. 大文字と小文字を区別する
XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。
class と id の値も HTML と XHTML で大文字と小文字が区別されます。大文字と小文字を混合して記述する必要がある場合は、CSS での定義が XHTML のタグと一致していることを注意深く確認してください。
4.classとidの前に要素制限を解除する
要素のクラスまたは ID を定義するために記述する場合、ID はページ内で一意であり、ページ内で複数回使用できるため、前の要素修飾を省略できます。要素を修飾することは意味がありません。例えば：
div#content { /* 宣言 */ }
fieldset.details { /* 宣言 */ }
次のように書くことができます
#content { /* 宣言 */ }
.details { /* 宣言 */ }
これにより、バイト数が節約されます。
5.デフォルト値
通常、padding のデフォルト値は 0 で、background-color のデフォルト値は透明です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のように、スタイル シートの先頭ですべての要素のマージンとパディングの値を 0 に定義できます。
* {
マージン:0;
パディング:0;
}