CSSはどんな場所に定義できる?

CSSファイル、head要素内のstyle要素、各タグのstyle属性の3箇所に定義できます。

定義する場所によって、メリット・デメリットがあります。

CSSは、(X)HTMLなどで記述したWebページの見た目を制御する指定です。(X)HTMLは文書の論理構造を指定し、CSSは文書の外観を指定する、ということで、(X)HTMLと切り分けてCSSファイルとして保存することも可能です。

ファイルに保存したCSSは、複数の(X)HTMLファイルから参照ができ、デザインが統一できる、一括して変更できるなどのメリットがあります。ただし、個別のページごとにデザインをアレンジしたい場合には、指定の方法に工夫が必要となります。ファイルに保存したCSSは、link要素または@importを利用して読み込みます。link要素で読み込む場合には、href属性でCSSファイルのパスを指定し、rel属性には「stylesheet」を、type属性には「text/css」を指定します。@importで読み込む場合は、@import url()と指定した()内にCSSファイルのパスを記述します。@importはstyle要素内または別のCSSファイル内で指定できます。

特定のWebページだけに適用させるCSSは、(X)HTMLのhead要素内にstyle属性を利用して記述します。style要素に対応していないブラウザで、要素の内容が誤って表示されてしまわないように、内容全体にコメントの指定をしておくことをお勧めします。

CSSの新しい規格 CSS3

CSSはWeb技術の規格団体W3Cが規格の策定をしており、現在はCSS Level2 revision1(CSS2.1)が広く利用されています。Internet ExplorerをはじめほとんどのモダンブラウザがこのCSS2.1に対応しています。
CSS2.1は2007年7月に勧告候補となりましたが、現在策定が進められているのがCSS Level3(CSS3)です。CSS3はモジュール化され、各ブラウザはどのモジュールに対応するかを選択できます。
CSS3では、画像を利用しない角丸四角形のボーダーやドロップシャドウといった表現が可能となります。

カテゴリー: CSS, CSS3, HTMLの基礎知識, ナレッジノート   パーマリンク