CSS > CSSの基本

CSSのバージョン

CSSのバージョンには、

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

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

CSSの書き方

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

CSSは、

  • セレクタ
  • プロパティ

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

コメント

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

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

CSSの適用方法

CSSの指定

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

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

link要素

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

@import

  1
  2
  3
 
 
 
<style type="text/css">
@import "css/style.css"
</style>

style要素

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

style属性

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

CSSの文字コード

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

  1
 
@charset "UTF-8";

日本語ページの場合は、

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

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

CSSのメディアタイプ

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

メディアタイプデバイスやソフトウェア
allすべてのメディア
screen一般的なパソコンのモニタ
projectionプロジェクター・映写機
tvテレビ・テレビゲーム機など
handheld携帯端末(PDA・携帯電話)など
tty固定ピッチフォントで表示される端末
printプリンタ(印刷プレビューなどを含む)
speech音声読み上げ(音声ブラウザなど)
braille点字ピンディスプレイなど
embossed点字プリンタなど

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

  • パソコンのモニターやプロジェクターに適用するCSSの指定
      1
    
     
    
    <link ref="stylesheet" type="text/css" href="css/screen.css" media="screen, projection" />
  • テレビ、テレビゲーム機に適用するCSSの指定
      1
    
     
    
    <link ref="stylesheet" type="text/css" href="css/tv.css" media="tv" />
  • プリンターなどの印刷メディアに適用するCSSの指定
      1
    
     
    
    <link ref="stylesheet" type="text/css" href="css/print.css" media="print" />
  • 携帯電話に適用するCSSの指定
      1
    
     
    
    <link ref="stylesheet" type="text/css" href="css/handheld.css" media="handheld" />

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

  1
 
@import url("projection.css") projection;

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

  1
  2
  3
-
|
!
@media print {
  body { font-size: medium; }
}

セレクタ

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

セレクタの種類

名称セレクタ意味
ユニバーサルセレクタ*すべての要素* { color: #000000; }
タイプセレクタEその要素(E)p { color: #222222; }
子孫セレクタE F親要素(E)に含まれる子孫要素(F)p em { color: #cc0000; }
子セレクタE > F兄要素(E)に含まれる直接の子要素(F)p > em { color: #cc0000; }
隣接セレクタE + F兄要素(E)の直後の弟要素(F)h1 + p { color: #222222; }
クラスセレクタ.classnameclass属性値が「classname」の要素.note { color: #ff0000; }
IDセレクタ#idnameid属性値が「idname」の要素#header { color: #006600; }
属性セレクタE[attr]要素(E)がその属性(attr)をもつ場合input[type] { padding: 2px; }
E[attr="value"]要素(E)がその属性(attr)と値(value)をもつ場合input[type="text"] { padding: 2px; }
E[attr~="value"]要素(E)がその属性(attr)をもち、属性値が空白文字区切りで複数指定されており、その属性値(value)が含まれている場合p[class~="moveto"] { color: #000066; }
E[attr|="value"]要素(E)がその属性(attr)をもち、属性値が空白文字区切りで複数指定されており、その属性値(value)が前方一致で含まれている場合div[lang|="en"] { font-size: small; }

セレクタの記号について

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

擬似クラス・擬似要素

  • 擬似クラスは、要素の状況やタイミングに対しスタイルを設定できる特殊なセレクタ。
  • 擬似要素は、要素内の特定の箇所に対してスタイルを設定できる特殊なセレクタ。
名前セレクタ意味
リンク擬似クラス:link未訪問リンクのときa:link { color: #000080; }
:visited既訪問リンクのときa:link { color: #800080; }
ダイナミック擬似クラス:hover要素がカーソルオンされたときa:hover { color: #ff0000; }
:focus要素がフォーカスされたときa:focus { color: #ff0000; }
:active要素がアクティブになったときa:active { color: #ff0000; }
言語擬似クラス:lang()要素に言語コードが指定されているときdiv:lang(en) { font-size: small; }
:first-child擬似クラス:first-child要素の中の最初の子要素div:first-child { font-style: italic; }
:first-line擬似要素:first-line要素の1行目のみp:first-line { font-weight: bold; }
:first-letter擬似要素:first-letter要素の1文字目のみh2:first-letter { font-size: large; }
:before/:after擬似要素:before要素の直前に内容を生成#main:before { content: "本文ここから"; }
:after要素の直後に内容を生成#main:after { content: "本文ここまで"; }

リンク擬似クラスとダイナミック擬似クラスを一緒に使う場合、指定する順番がある。
=ユーザーによるアクションの順番にする。

  1. :link
  2. :visited
  3. :hover
  4. :focus
  5. :active

セレクタの組み合わせ

  • 各セレクタは組み合わせて使用可能
    例えば、「#header h1」と指定した場合、「id="header"」(IDセレクタ)の子孫要素として含まれるh1要素(タイプセレクタ)にスタイルが適用される。

コンテンツ範囲を示すID名やクラス名を基に、子孫セレクタでスタイルを適用

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
-
|
|
!
-
|
|
|
!
-
|
!
#header {
  height: 60px;
  background: #33cccc url(../images/header.jpg);
}
#header h1 {
  padding-top: 20px;
  padding-left: 15px;
  color: #ffffff;
}
#header h1 a {
  color: #0000ff;
}

擬似クラスも利用した、やや複雑な子孫セレクタの例

  1
  2
  3
  4
  5
  6
-
|
!
-
|
!
#main .highlight ul li a:link {
  color: #000080;
}
#main .highlight ul li a:visited {
  color: #800080;
}

子孫セレクタで、構造を示すIDやクラスは、タイプセレクタ(要素名)をつけないことが多い。
「div#header」ではなく、単に「#header」と指定する。
子孫セレクタをつなげて記述する場合、いちいち「div」が出てくると見づらくなるため省略する。

セレクタのグループ化

セレクタはカンマ区切りでグループ化して、同じスタイルを同時に指定可能。

  1
  2
  3
-
|
!
h1,h2,h3 {
  color: #ff6600;
}

グループ化するセレクタが長いときは、カンマごとに改行すると見やすくなる。
最後のセレクタには、カンマを付けないので注意。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 
 
-
|
!
 
 
-
|
!
#utility-nav ul li a:link,
#global-nav ul li a:link,
#local-nav ul li a:link {
  color: #0000cc;
}
#utility-nav ul li a:visited,
#global-nav ul li a:visited,
#local-nav ul li a:visited {
  color: #cc0000;
}

プロパティ

  • スタイルの種類(どのような効果を与えるか)が、「プロパティ」。
  • 効果の具体的な内容を「値」で指定する。

ボックスモデル

  • XHTMLの要素は、各自の表示領域を持っている。
  • この領域は「四角形」と決まっており、四角形の領域を「ボックス」という。
  • ボックスは、さらに4つの領域に細分化されている。
  • content (内容)
  • padding (内余白)
  • border (枠線)
  • margin (外余白)
boxmodel01.gif

http://html-coding.co.jp/knowhow/tips/000014/
ボックスモデルの概念
ボックスモデルとはブロックレベル要素がもつ短形領域の概念で、内容・マージン(margin)・パディング(padding)・ボーダー(border)から構成されます。

  • 背景色の指定は、marginには適用されない。
boxmodel02.jpg

http://www.justmystage.com/home/hodogaya/css11.html
マージン領域は常に透明として扱われます
ボックスと背景の関係ボックスに背景を指定した場合、内容領域、パディング、ボーダーの各領域には、指定した背景が適用されるが、マージンの領域は常に透明として扱われます。

プロパティ効果指定できる値
マージンmarginマージンの一括指定長さ、%、auto
margin-top上下左右のマージン長さ、%、auto
margin-right
margin-bottom
margin-left
ボーダーborderボーダーの一括指定太さ、形状、色をスペース区切りで
border-widthボーダーの太さ長さ、thin、medium、thick
border-styleボーダーの形状solid、dotted、dashed、noneなど
border-colorボーダーの色#rrggbb、#rgb、色名、transparentなど
border-top上下左右のボーダー太さ、形状、色をスペース区切りで
border-right
border-bottom
border-left
パディングpaddingパディングの一括指定長さ、%
padding-top上下左右のパディング長さ、%
padding-right
padding-bottom
padding-left
幅と高さwidth内容の幅長さ、%、auto
height内容の高さ長さ、%、auto
幅と高さの最大/最小max-width, max-height内容の最大幅と最大高さ長さ、%、none
min-width, min-height内容の最小幅と最小高さ長さ、%

添付ファイル: fileboxmodel02.jpg 443件 [詳細] fileboxmodel01.gif 597件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-10-27 (木) 21:23:53 (2182d)