オンラインPC館

CSSの注意点

半角英数

CSSも記述する場合は、全て「半角英数字」で記述する必要があります。

記述の順序

CSSで記述する場合は順序が決まっているものもあります。
これらは正しい順序で書かないと想定通りに動作しなかったり、エラーが出る場合もあります。
ちなみに以下はリンクの文字色を変化させるものですが、この順番に書かないと想定通りの動作はしません。

  1. a:link:未訪問リンク文字の色
  2. a:visited:訪問済みリンク文字の色
  3. a:hover:カーソルが乗っている状態のリンク文字の色
  4. a:active:選択状態リンク文字の色

CSSの優先順位

CSSの優先度は要素の種類によって決まっており、優先度の高い要素が多い方が優先されます。
また、優先度に差が無い場合は、後に書いたものから優先されます。
CSSの優先順位~CSSテクニック~

  1. 優先度:id>class>HTML要素>全称セレクタ
  2. 優先順位:優先度の高い要素が多い方が優先される(優先度が同等の場合は後に書いたものが優先される)
  3. 強制的に優先する方法:「!important」を利用すると無条件で優先的に使用される

要素 {color:#fff !important;}

id名とclass名

idやclassの名前を設定する際は、先頭文字に数字を利用しないようにする必要があります。

CSSのサイズ指定

CSSでサイズを指定する方法です。
長さの単位
CSSでpxとemの使い分けについて教えてください

  1. px:画面解像度のピクセルで指定
  2. em:一文字分の長さで指定
  3. %:パーセンテージで指定
  4. auto:自動で指定
  5. その他:mm、cm、in、pt、pc、exなど

CSS内のパス

CSSは外部CSSと内部CSSではパスが変わります。
外部CSSならCSSファイルからのパスになりますが、内部CSSならHTMLページからのパスになります。
CSSを内部CSSや外部CSSに変更する際やディレクトリを変更する際は、必ずパスを修正するようにしてください。

CSSプロパティのルール

CSSプロパティの中には利用時に細かなルールが定められているものもあります。
これらのルール通りに利用しないと思わぬ不具合が発生するので注意してください。
特に思ったように表示されない時は、CSSの説明サイトでプロパティのルールを調べると解決できる場合があります。
CSSプロパティ一覧

CSSハックについて

CSSハックはブラウザのバグを利用したCSSテクニックです。
通常は特定のブラウザでレイアウトが崩れるような場合に、やむを得ず利用される事があります。
W3Cでチェックすると多くのCSSハックがエラーになりますが、これは上記のような特性のためです。
必ずしもこれらのエラーに修正が必要とは限りませんが、ブラウザの仕様変更によって問題が起こる場合もあります。
特に個別のCSSハックは他のバージョンやブラウザに影響するものがあるので、CSSファイルを別々にした方が安全です。
CSSハックとは
特定のブラウザでレイアウトが崩れる

CSS3について

CSS3では様々な事が可能になるので非常に便利ですが、CSS3の中には処理速度の低下するものもあります。
このため利便性と処理速度のバランスを考慮して使用する必要があります。
ブラウザ対応状況(HTML5/CSS3)
CSS3リファレンス
CSS3では何ができるのか?
IE5~8をCCS3の疑似セレクタ対応にするスクリプト
CSSの知識をもっと深める30+2の小技テクニック集