アットウィキロゴ
kei_room @Wiki
アットウィキロゴ
kei_room @Wiki
ページ一覧

スタイルシートとは

一言で表現すると、「Webページのレイアウトを定義する技術」。


スタイルシートの書式

セレクタ { プロパティ : 値 }

　例　h1 { color : blue }

  • セレクタ　　　 スタイルを適用する対象
  • プロパティ　　設定するスタイルの性質
  • 値　　　　　　　プロパティごとに決められている値

これら全部で宣言となる。
  • プロパティと値は、セレクタに対してどのような指定をするのかの記述である
  • プロパティを複数設定する場合には、{}のなかに「;（セミコロン）」で区切って並べる

例では、h1要素に対して色をブルーにするよう指定している。 

 注）HTMLでは、大文字小文字を区別しないが、XHTMLでは小文字で書くよう定義されている。


コメントとコメントアウト

スタイルシートでコメントを入れるには、「/*」と「*/」で挟む。 
 <style>タグを使ってスタイルシートを設定すると、スタイルシート対応でないブラウザでは
 ソースがそのまま表示される可能性がある。
 対策として、「<!--」と「-->」でスタイルの設定箇所全体をコメントアウトして、
 その部分がそのまま表示されるのを防ぐ方法がある。

注）スタイルシートにおける引用符
HTMLでは値を「" "」や「' '」で囲むことが推奨されているが、
スタイルシートでは値として記述するキーワードをこうした引用符で囲うと、
文字列として解釈されてキーワードではなくなり、
スタイルシートの効果が得られなくなる。


URLの書き方

　スタイルシートでURLやファイルの位置を指定する場合には、「url()」を使用する。
　URLは引用符（「" "」「' '」）でくくったり、
URLの前後に空白スペースを入れることができる。
例　：　url(http://www.～/）
　　　　　url("../books/css.html")


デフォルトのスタイルシートの設定

<meta http-equiv="Content-Style-Type" content="text/css">
　スタイルシートの実現方法はCSS(Cascading Style Sheets)だけではない。
そのため、スタイルシートを使用する場合には
デフォルトで使用するスタイルシートを指定しておく必要がある。
指定には<meta>タグを使用し、必ず<head>～</head>間に記述する。


スタイルシートの設定方法

1.外部スタイルシートを読み込む
<lilnk rel="sytlesheet" href="(スタイルファイルのURL) type="text/css">
スタイルファイルを別に用意し、<link>タグで読み込む設定方法。
rel属性ではスタイルシートにリンクしていることを、
type属性ではリンクされているスタイルシートの種類を示す。
<link>タグを<head>～</head>内に記述する。
この方法は、ひとつのスタイルファイルをサイト全体に適用させるとき
などに利用する。
なお、複数の外部スタイルシートを利用したい場合は、
必要な数だけ<link>タグによる指定を記述する。 

 ○外部スタイルシートの利点
 外部スタイルを使ってスタイルシートを設定すると、
 ひとつのスタイルファイルを複数のHTML文書で共有できるだけでなく、
 HTML文書のソースを修正せずにスタイルを変更する事ができる。
 また、スタイルファイルを複数用意することで、
 必要に応じたスタイルファイルを読み込むように設定することもできる。
 このように、メンテナンスがしやすい、柔軟な表現ができるといった点が利点である。

2.HTML文書内にまとめて設定する
<style type="text/css">～(スタイルの設定)</style>
HTML文書に設定したいスタイルを記述する方法。
<style>～</style>間でスタイルを定義、
これを<head>～</head>内に配置する。
ページごとにスタイルを適用したい場合等に便利。

3.タグに直接スタイルを設定する
<☆ style="★">～</☆>
☆：スタイルを設定したいタグ
★：スタイルの設定
style属性を使用し、タグに直接スタイルを記述する方法。
「style=」に続けて「" "」の中にプロパティと値を記述する。
特定の箇所にのみスタイルを設定する場合に使用する。


スタイルの優先順位

設定方法が複数ある関係から、１つの文書に対して複数のスタイルが設定され、
それらが競合する可能性がある。
そのため、スタイルには基本的な優先度が設定されている。

　高い　　　　　○style属性による設定
　　↑
優先順位　　　○style要素による設定
　　↑
　低い　　　　　○外部スタイルによる設定

つまり、後からブラウザに読み込まれるスタイルほど優先度が高くなる
（後から読み込まれた設定が先に読み込まれた設定を上書きする）。
また、同じ優先度においては、
より限定的な設定を行っている方が優先される。 

 ・スタイルシートの製作者による優先順位
 スタイルシートは、文書を制作した人によるものだけでなく、
 ブラウザが初期設定として持っているスタイルシートや
 ユーザが定義するスタイルシートなどもある。
 
 この場合の優先度は、
 　高い　　　　　○文書制作者のスタイル
 　　↑
 優先順位　　　○ユーザのスタイル
 　　↑
 　低い　　　　　○ブラウザのスタイル

※「!important」というキーワードを指定しておくことで、
　これらの優先度を逆転させることもできる。

最優先のスタイルを設定する
セレクタ { プロパティ : 値 !important }


セレクタの種類

セレクタとは、スタイルを適用する対象を指定するもの。
セレクタの指定方法にはいくつもの種類があるが、
主に利用されるのは次のようなものがある。

  1. タグにスタイルを設定する
  2. 任意の範囲にスタイルを設定する
  3. タグの相関関係（子孫の要素）でスタイルを設定する
  4. 擬似クラス・擬似要素

1.タグにスタイルを設定する
要素名 { プロパティ : 値 }　… １つのタグに設定
要素１,２,…,n { プロパティ : 値 }
　　　　… 複数のタグに同一スタイルを設定
タグにスタイルを設定するには、該当タグの要素名をセレクタにする。
複数のタグに対して同じスタイルを設定する場合には、
要素名をそれぞれ「,」で区切って並べることでまとめて設定することができる。

2.任意の範囲にスタイルを設定する
要素名.クラス名 { プロパティ : 値 }
　　　→　< 要素名 class="クラス名"> ～ </要素名>
要素名#ID名 { プロパティ : 値 }
　　　→　< 要素名 id="ID名"> ～ </要素名>
.クラス名 { プロパティ : 値 }
　　　→　< 要素名 class="クラス名"> ～ </要素名>
＃ID名 { プロパティ : 値 }
　　　→　< 要素名 id="ID名"> ～ </要素名>
スタイルにクラスやIDという特定の識別子をふっておき、
必要に応じてclass属性やid属性で適用させる方法。
要素名だけではセレクタを限定できない場合に使用する。

クラスでは「.」に続けてクラス名を、IDは「#」に続けてID名を指定する。
クラス名とID名はそれぞれ半角の英数字とハイフンで任意の名前を指定可能。
（Netscapeでは１文字目を数字にすると認識しない）

※W3Cの定義では、IDは１つのHTML文書内で
　　１度しか呼び出すことができないことになっている。

3.タグの相関関係でスタイルを設定する――子孫の要素に設定
親要素 子孫の要素 { プロパティ : 値 }
HTMLの木構造を利用し、その相関関係によってスタイルを設定する方法。
あるタグ（親要素）に含まれる特定のタグ（子孫である要素）に
対してスタイルを設定する。


4.擬似クラス・擬似要素
要素名 : 擬似クラスor擬似要素 { プロパティ : 値 }
○擬似クラス…要素名や属性などで分類できない状態に対して
　　　　　　　　スタイルを設定するためのもの。
  • :link　　　：　まだ見ていないページへのリンク
  • :visited　 ：　すでに見たページへのリンク
  • :hover　 ：　マウスカーソルが要素と重なっているとき
  • :active　 ：　リンク部分を選択した瞬間（クリックなど）
  • :focus　　：　対象がクリックされたとき
  • :lang　　 ：　（言語コード）スタイルを適用させる言語

※:hoverをリンクに設定する場合(a:hover)は、
　　a:link、a:visited、a:hover、a:activeの順番に記述する必要がある。

○擬似要素…木構造を構成する要素などでは指定できない部分に対して
　　　　　　　スタイルを設定するためのもの。
  • first-line　　：　要素の表示上の最初の１行
　　　　　　　　　　　（ブロックレベル要素にのみ指定可能）
  • first-letter　：　要素の最初の１文字
　　　　　　　　　　　（一部のブロックレベル要素にのみ指定可能）
  • before　　　：　要素の直前に生成追加される内容
　　　　　　　　　　　（contentプロパティと併用）
  • after　　　　：　要素の直後に生成追加される内容
　　　　　　　　　　　（contentプロパティと併用）


スタイルの継承

プロパティには、子要素によって値が継承されるものがある。
例　：　body { color : blue }
特に指定がなければ、子要素の文字色もblueになる
逆に、値が継承されないプロパティには、
背景画像やマージン、パディングの指定などがある。

また、各プロパティには「inherit」という値を指定することで、
通常は値を継承しない要素でも強制的に親要素の値を継承させることができる。


ボックスの概念

スタイルシートでは、全ての要素はボックスと呼ばれる四角い領域を持つと考え、
この領域や領域を囲む枠線に対して大きさや色、位置の指定をすることで
スタイルを変更する。

ボックスは以下の4つの部分から成る。
  • 内容領域
    テキストや画像など、要素の内容が表示される領域。
    widthプロパティやheightプロパティでサイズを指定することができる。
  • パディング
    内容領域と枠線との間の余白領域。
    要素のbackground-colorプロパティで指定した背景色は
    この部分にも適用される。
  • 枠線
    要素の周りに表示される枠で、パディングの外側に設定される。
  • マージン
    枠線の外側に設定される余白領域。
    要素のbackground-colorプロパティで指定した背景色は
    この部分には適用されず、背景は常に透明になる。

背景色や背景画像は、内容領域とパディング領域に表示される。


スタイルシートにおける単位

相対単位

単位 意味 指定例
em その要素のfont-sizeの値を1とする h1 { margin : 0.5em }
ex その要素のフォントのx-heightを1とする h1 { margin : 1ex }
px コンピュータ画面上の1ピクセルを1とする p { font-size : 12px }
% 多くの場合親要素の一部分を基準とした割合 p { font-size : 120% }

※x-height ： 小文字の「x」の高さ

絶対単位

単位 意味 指定例
in インチ(1in=2.54cm) h1 { margin : 0.5in }
cm センチメートル h2 { line-height : 3cm }
mm ミリメートル h3 { word-spacing : 4mm }
pt ポイント(1pt=1/72in) h4 { font-size : 12pt }
pc パイカ(1pc=12pt) h4 { font-size : 1pc }


スタイルシートにおける色

RGB値による指定
  • #rrggbb
    「#」に続けて赤、緑、青のそれぞれの値を2桁ずつ、
    計6桁の16進数で指定する。
  • #rgb
    「#」に続けて赤、緑、青のそれぞれの値を1桁ずつ、
    計3桁の16進数で指定する。
    この方法では、rgb各桁を2つ繰り返して並べた6桁の方式(#rrggbb)に
    変換してから色が表現される。
  • rgb(n,n,n)
    rgbに続く「()」に赤、緑、青のそれぞれの値を「,」で区切って
    10進数の整数で指定する。
  • rgb(n%,n%,n%)
    rgbに続く「()」に赤、緑、青のそれぞれの値を「,」で区切って
    パーセントで指定する。

キーワードによる指定
○色名による指定
色名で直接指定する。大文字・小文字は区別されない。

○システムカラーによる指定
スタイルシートでは、WindowsやMacOSが保持しているシステム情報を
呼び出すことができる。このシステムカラーを使うと、ページを見る人の
OSの環境に合わせて使用色を決めることができる。
  • activeborder
    アクティブなウィンドウの枠の色
  • activecaption
    アクティブなウィンドウのタイトルバーの色
  • appworkspace
    アプリケーション内のウィンドウの背景色
  • background
    デスクトップの背景色
  • buttonface
    立体的ボタンの表面の色
  • buttonhighlight
    立体的なボタンの光が当たっている面の色
  • buttonshadow
    立体的なボタンの影になっている面の色
  • buttontext
    立体的なボタンのテキストの色
  • captiontext
    タイトルバーのテキストの色
  • graytext
    選択できないテキストの色
  • highlight
    選択している状態の色
  • highlighttext
    洗濯しているテキストの色
  • inactiveborder
    アクティブでないウィンドウの枠の色
  • inactivecaption
    アクティブでないウィンドウのタイトルバーの色
  • inactivecaptiontext
    アクティブでないウィンドウのタイトルバーのテキストの色
  • infobackground
    ツールチップの背景色
  • infotext
    ツールチップのテキストの色
  • menu
    メニューの背景色
  • menutext
    メニューのテキストの色
  • scrollbar
    スクロールバーの色
  • threeddarkshadow
    立体的に表示される部分の暗い影の色
  • threedface
    立体的に表示される部分の表面の色
  • threedhighlight
    立体的に表示される部分の光の当たっている面の色
  • threedlightshadow
    立体的に表示される部分の明るい影の色
  • threedshadow
    立体的に表示される部分の影の色
  • window
    ウィンドウの背景色
  • windowframe
    ウィンドウのフレームの色
  • windowtext
    ウィンドウのテキストの色

transparentの指定
プロパティによってはtransparent（透明）を指定できるものもある。
これを指定すると、その要素が含まれる親ボックスの内容や背景・背景画像などが
透けて見えるようになる。


DTDとブラウザでの表示

（略）
「スタイルシートの基礎」をウィキ内検索
最終更新：2005年09月23日 18:10