CSS講座-CSSの基本 の履歴(No.4)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• CSS講座-CSSの基本 へ行く。
  • 1 (2011-10-22 (土) 07:47:47)
  • 2 (2011-10-22 (土) 08:00:18)
  • 3 (2011-10-24 (月) 10:02:45)
  • 4 (2011-10-24 (月) 10:02:45)

---

CSS > CSSの基本

CSSのバージョン†

CSSのバージョンには、

• CSS1
• CSS2、CSS2.1
• CSS3
  等がある。

しかし、CSSファイルには「バージョン」を指定する記法がないので、指定したCSSの反映はブラウザの対応状況に依存する。

CSSの書き方†

セレクタ、プロパティ、値†

CSSは、

• セレクタ
• プロパティ
• 値
  という３つの要素で見た目を指定する。

p { color: red; }

• この場合、「p」がセレクタ、「color」がプロパティ、「red」が値となる。
• セレクタは、HTMLタグ名やユーザーが指定した文字列を指定できる。
• セレクタの後に、「{」「}」で囲って、プロパティと値の対を記述する。
• プロパティと値は、「:」で区切る。
• 値の末尾に「;」を付ける。
• 「;」の後に続けて次のプロパティと値の対を記述できる。

コメント†

CSSではコメントを「/*」と「*/」で囲む。

/* コメント */

• C言語のコメントと同様。
• コメントは複数行にわたってもOK。
• コメントの中にコメントを記述する入れ子にはできない。

CSSの適用方法†

CSSの指定†

XHTMLに適用するCSSを指定する方法は、４つある。

• 「link」、「@import」で、別ファイルのCSSを呼び出す方法が良い。
• 直接XHTMLに書き込む「style」の使用は望ましくない。

link要素†

#code(css,nomenu){{

link rel="stylesheet" type="text/css" href="css/style.css" />
}}

@import†

#code(css,nomenu){{

style type="text/css">
@import "css/style.css"

/style>
}}

style要素†

#code(css,nomenu){{

style type="text/css">
p { margin: 15px; }

/style>
}}

style属性†

#code(css,nomenu){{

p style="margin: 15px;">テキスト</p>
}}

CSSの文字コード†

「link」や「@import」で読み込むCSSファイルの先頭行に「@charset "…";」で文字コードを記述しておく。

#code(css,nomenu){{
@charset "UTF-8";
}}

日本語ページの場合は、

• UTF-8
• Shif_JIS
• EUC-JP
  等の文字コードが指定される。

あくまでもCSSファイルで使用する文字コードの指定であり、XHTMLの文字コードとは関係ない。
XHTMLと別の文字コードでも問題ないが、特に理由がなければXHTMLの文字コードと同じにしておく。

CSSのメディアタイプ†

CSSを適用するメディア（デバイス、ソフトウェア）を、「メディアタイプ」によって指定することができる。
カンマ区切りで並べて、複数のメディアタイプを同時に指定できる。
メディアタイプを指定しない場合は、CSSがすべてのメディアに適用される。

XHTMLのlink要素でメディアタイプ指定†

• パソコンのモニターやプロジェクターに適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/screen.css" media="screen, projection" />
  }}

• テレビ、テレビゲーム機に適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/tv.css" media="tv" />
  }}

• プリンターなどの印刷メディアに適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/print.css" media="print" />
  }}

• 携帯電話に適用するCSSの指定

  #code(css,nomenu){{

  link ref="stylesheet" type="text/css" href="css/handheld.css" media="handheld" />
  }}

@importでメディアタイプ指定†

#code(css,nomenu){{
@import url("projection.css") projection;
}}

@mediaでメディアタイプ指定†

#code(css,nomenu){{
@media print {

 body { font-size: medium; }

}
}}

セレクタ†

スタイルの適用対象を指定するのが「セレクタ」

セレクタの種類†

セレクタの記号について

• E
  要素名のセレクタを「E」と表現することがある。これは「Element」に由来している。
• E F
  要素名のセレクタ「E」の次のアルファベット「F」は、他の関連する要素を表現するときに用いられる。

擬似クラス・擬似要素†

• 擬似クラスは、要素の状況やタイミングに対しスタイルを設定できる特殊なセレクタ。
• 擬似要素は、要素内の特定の箇所に対してスタイルを設定できる特殊なセレクタ。