導入

CSSの基本と概要を記述する．

CSSの概要

CSSとは

XHTMLがさまざまな要素を用いてwebページの内容を構成したのに対して，CSSはそうした要素に対してデザインを施す役割をもつ．

CSSを記述する際の心得

  • ページのデザインはXHTMLで行わないで，なるべくCSSで行う．
  • 大文字・小文字の区別はないが，XHTMLに合わせて小文字で統一する．

CSSのバージョン

現在使われている最新バージョンはCSS2.1である．

文法の概要

基本的な文法

CSSではデザインを加える対象を表すセレクタに，デザインの種類を表すプロパティとその効果を表す値を指定しデザインしていく．

基本的な記述方法 
セレクタ { プロパティ: 値; }
1つのセレクタに複数個のプロパティを指定する場合 
セレクタ { 
プロパティ: 値; 
プロパティ: 値; 
プロパティ: 値; 
}

セレクタ

セレクタにはXHTML要素を指定するが，要素を組み合わせて指定する場合もある．また，セレクタには優先順位があるので注意しなければならない．

あとに並べたものが優先される．

セレクタをいくつも並べた場合は，あとに並べたものが優先される．

クラスセレクタやIDセレクタが優先される．

要素名をしていただけのセレクタよりも，クラスセレクタやIDセレクタが優先される．

より詳細には，IDセレクタの数をa・IDセレクタ以外のセレクタの機能(クラスセレクタなど)や擬似クラスの数をb・要素名の数(子孫セレクタなど)をcとしたとき，次の式の数が大きくなるセレクタから順に優先される．

優先順位を決める式 
a×100 + b×10 + c

数が同じ場合は，あとに記述したセレクタが優先される．

優先順を強制的にあげる．

優先順位のルールに関わらず，あるデザインを強制的に優先したい時は，プロパティの値に!importantをつける．

最優先 
セレクタ {プロパティ: 値 !important; }

プロパティ

あるXHTML要素をセレクタとし，そのプロパティを指定するときに気を付けなければならないことが大きく2つある．1つはそのHTML要素がブロック要素かインライン要素かといった要素の種類である．2つ目はHTML要素に適用するプロパティの値が指定したHTML要素の子要素にも適用されるか，つまり継承されるかどうかである．

値

指定できる値はプロパティごとに決まっており，大きく次の4つに分けられる．

キーワード

プロパティごとに決まった語句で値を指定できる．

長さ

プロパティによってはマイナスの値も指定できる．

指定できる値値の効果
 ptポイント(1pt=1/72in)
 pxピクセル
 emフォントの大きさを1とする単位
パーセンテージ

何に対する割合なのかはプロパティごとに異なる．

指定できる値値の効果
 %パーセンテージ
色

色の指定には, HTML形式の16進数・3桁の16進数・10進数・パーセンテージ・色名の5種類の方法がある．

指定できる値値の効果
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
orange
purple
red
silver
teal
white
yellow

記述上の注意

コメントアウト

CSSの中に，デザインには反映されないコメントを入れたい場合は，次の様に記述する．

テンプレート 
/* コメント */

普通の状態にするキーワード

normalやnoneのように普通の状態にするキーワードは，新しい表示効果を付けるために表示をリセットしたり，HTMLの表示効果を打ち消したいときに用いる．

ブラウザがデザインする要素

ブラウザが自動的にデザインする要素には次のようなものがある．

ブラウザでの表示要素の種類
太文字になるhx要素・strong要素・b要素・th要素
斜体になるaddress要素・em要素・cite要素・dfn要素・i要素
等幅フォントになるpre要素・code要素・kbd要素・var要素・tt要素
下線が表示されるa要素・ins要素
大きめに表示されるhx要素・big要素
上下にマージンが開くhx要素・p要素・blockquote要素・pre要素・ul要素・d要素・form要素
左右にマージンが開くlockquote要素

XHTMLにCSSを適用する方法

XHTMLにCSSを適用する方法は，link要素や@importでCSSファイルを読み込む方法や，style要素やstyle属性でCSSファイルを指定する方法がある．本格的にwebサイトを作るときには，複数のwebページをまとめてデザインできる前者の方法を使う方がよい．CSSの練習やテストを行うときには，1ページ単位でCSSが適用される後者の方法がよく使われる．

link要素でCSSファイルを読み込む

XHTMLソース 
<link rel="sytlesheet" type="text/css" href="CSSファイル名.css" />

@importでCSSファイルを読み込む

style要素でCSSソースを指定

XHTMLソース 
<style type="text/css">
セレクタ { プロパティ: 値; }
セレクタ { プロパティ: 値; }
</style>

style属性でCSSソースを指定

XHTMLソース 
<要素名 style="プロパティ: 値; プロパティ: 値;">
要素の内容
</要素名>

大まかな流れ

CSSファイルの作成

  1. メモ帳などのテキストエディタを開く．

  2. CSSを記述していき，拡張子を.cssで保存する．

  3. 適用されたいXHTMLファイルを開き，リンクをはる．

  4. 適応したXHTMLファイルをブラウザで確認し，訂正や変更などがあればCSSファイルを修正する．