CSSは、XHTMLが文書の構造を記述するに対して、ウェブページ(ホームページ)の装飾をするために使用されています。
使用するブラウザによって表示が異なる場合がありますので、ブラウザごとの拡張された機能を使用せず、出来るだけ多くのブラウザで使用できる属性を使用しましょう。
CSSにはLevel1,Level2,Level3(現在仕様策定中)があり、ブラウザによって対応状況が違う場合がありますので注意が必要です。
CSSもXHTML同様、文字コードを指定する必要があります。これは、フォント名を指定する場合に日本語等の非ASCII文字が含まれる可能性があるからです。文字コードはCSSファイルの一番はじめの行で指定します。文字コードの指定の前にどのような文字があってもいけません。
CSSソースコード:
@charset "shift_jis";
上記例では文字コードセットをshift_jis
と指定していますが、CSSを製作する環境に合わせて変更してください。
CSSの書式は次の通りです。
セレクタ { プロパティ(属性):値; }
セレクタは,(カンマ)で区切って複数の要素を指定することが出来ます。また、スペースで区切って特定の要素に含まれる要素に対してスタイルを指定することもできます。
CSSはXHTMLのタグに対して属性を指定する方法と、class
やid
といった識別子を指定して、タグだけではなく任意のセレクタについて属性を指定することが出来ます。class
識別子は一つのページの中で何度でも使用できますが、id識別子は一つのページの中で一回しか指定することが出来ません。また、class
やidの識別子名はアルファベットの文字から始まっていないといけません。
CSSソースコード(セレクタの例):
h1 { text-align:center;} /* h1要素について、文字を中央揃えにする */ h1.title { text-align:center;} /* h1のtitle識別子が指定されている要素について、文字を中央揃えにしている クラスの指定さていないh1タグにはこの宣言は適用されません。 */ .page-normal { display:none;} /* タグ名は関係なく、class識別子でpage-normalが指定された要素を非表示にする */ #body { margin-left:2em;} /* id識別子がbodyの要素について、左の余白を2em確保する */
CSSで使用する長さや大きさの単位には絶対値指定と相対値指定の2つの方法があります。ただし、絶対値指定ではブラウザで文字の大きさを変えても絶対値で指定されているため、文字が大きくならないなどの不具合が起きる可能性がありますので、出来るだけ相対値で指定した方がよいでしょう。
in
(インチ)cm
(センチメートル)mm
(ミリメートル)pt
(ポイント)pc
(パイカ)em
ex
px
%
CSSには、ソースコード内にコメントを書くことが出来ます。コメントはブラウザ上の表示には影響しないため、CSS制作者が自由に記述できます。コメントの開始は/*
で、終了は*/
となります。この/*
と*/
で囲まれた部分がコメントとなります。
CSSソースコード
h1 { text-align:center; background:#ccf; /*margin:0; padding:5px; */ }
上記例では、マージンの指定とパディングの指定がコメントアウトされ無効になっています。