◆スタイルシートとは?
・レイアウト表示に関する指定を行う。
・一般的にはCSS(Cascading Style Sheet)のことをいう。
・HTMLだけでは不可能な表現にも対応している。
◆記述方法について
・記述はセレクタ部とプロパティ指定部から構成されている。
・セレクタと部では、どの要素に対してスタイルを適用させるかを指定する。
・プロパティ部では、セレクタ部で指定した要素に適用するスタイルの種類を定義す
る。
・スタイル指定とその値との間は、「:(コロン)」で区切る。
・指定するスタイルが複数ある場合は、スタイル間を「;(セミコロン)」で区切る。
記述例 : H1 { font-size : 14pt }
H1 { font-size : 24pt ; color : red }
◆適用対象とその指定方法
・セレクタ部の指定にはいくつかの方法があり、それらを組み合わせて指定すること
もできる。
・要素名・クラス名・ID名ならびにその組み合わせ等で適用対象を指定する。
・異なる要素に対して、同一スタイルを指定する場合は、要素名を「,(カンマ)」で
区切って記述する。
・クラス名指定は、「.(ドット)」の後にクラス名を指定する。
・ID名指定は、「#(シャープ)」の後にID名を指定する。
セレクタとして要素名(タグ名)を使用した記述例 <H1>タグ等の場合
H1 { font-size : 24pt ; color : red }
H1 , H2 , H3 { font-size : 24pt ; color : red }
セレクタとしてクラス名を使用した記述例 class属性が「myclass」の場合
.myclass { font-size : 12pt ; color : blue }
セレクタとしてID名を使用した記述例 ID名が「myid」の場合
#myid { font-size : 36pt ; color : cyan }
セレクタとして要素名を組み合わせて使用した記述例
<H2>タグと<P>タグを組み合わせた場合
H2 P { font-size : 12pt ; color : yellow }
リンクの記述例
A : link { color : blue }
A : visited { color : purple }
A : active { color : red }
A : hover { color : green }
◆使用単位の記述について
絶対単位
使用単位 |
説明 |
in |
インチ |
cm |
センチ |
mm |
ミリ |
pt |
ポイント(1ポイント = 1/72インチ) |
pc |
パイカ(1パイカ = 12ポイント) |
相対単位
使用単位 |
説明 |
em |
指定範囲で有効なフォントの高さを1 |
ex |
指定範囲で有効なフォントの小文字「x」の高さを1 |
pc |
1ピクセルを1とする |
% |
他の基準との割合 |
◆色の記述方法について
16進数での記述例1
#FF0000 RGB値を2桁ずつ16進数で表現
16進数での記述例2
#F00 RGB値を1桁ずつ16進数で表現
注)指定したRGBの各1桁の値を2つ続けたものとみなす。
10進数での記述例
rgb(255,0,0) RGB値を10進数でカンマで区切って表現
%での記述例
rgb(100%,0%,0%) RGB値を0%〜100%までカンマで区切って表現
HTML4.0で定義されている16色
Black , Silver , Gray , White , Maroon , Red , Purple , Fuchsia
Green , Lime , Olive , Yellow , Navy , Blue , Teal , Aqua
◆コメントの書き方
・「/* ....... */」で囲まれた部分がコメントになります。
コメントの記述例
<STYLE type="text/css">
<!--
H1 { color : red } /* H1タグは赤色 */
-->
</STYLE>