|
|
スタイルシートで書いてみよう！
（初級編１）
初級編１では、スタイルシートの概要、基本的な規則について説明します。
|
・スタイルシートって何？
スタイルシートとは、フォントのサイズ、色、テキストの行間など、レイアウトに関する情報を用意し、ドキュメント全体、個々のタグに適用するものです。HTMLはもともと、テキストに意味付けをするために開発されましたが、デザインが重要視されるようになるにつれ、レイアウトのために<TABLE>タグを使うなど、本来のタグの意味を無視した使用による混乱、複雑化を招きました。そこで、レイアウト要素のみを分離して、本来のタグの意味を損なわずに、自在なレイアウトを可能にしようというものです。
・標準化とブラウザの対応
・スタイルシート適用方法
１．スタイル情報を記述したファイルを作成し、ドキュメントから参照する。
例えば、スタイル情報を記述したstyle001.cssというファイルを作成します。参照するドキュメントでは、ヘッダー情報に以下のように記述します。このドキュメントではstyle001.cssファイルに記述されているスタイル情報が反映されます。
<LINK REL=STYLESHEET TYPE="text/css" HREF="style001.css">
|
２．ヘッダー情報にスタイル情報を記述し、そのドキュメントに反映させる。
例えば、ヘッダー情報に以下のように記述します。このドキュメントでは<DIV>タグブロックの文字色はhotpinkに、<H1>、<H3>タグブロックの文字色はgreenになります。
<STYLE TYPE="text/css">
<!--
DIV { color: hotpink }
H1,H3 { color: green }
-->
</STYLE>
|
★スタイルシートに対応してないブラウザを考慮して<!--と-->でコメントアウトします。
３．個々のタグにスタイル情報を記述し、タグ内でのみ反映させる。
例えば、以下のように記述します。この<H2>タグブロックの文字色は#FF0000になります。
<H2 STYLE="color: #FF0000">
Way too #FF0000
</H2>
|
４．ヘッダー情報にスタイル情報を記述し、個々のタグから参照する。
例えば、以下のように記述します。この<H1>タグブロックの文字色はredに、この<P>タグブロックの文字色はblueになります。
<HEAD>
<STYLE TYPE="text/css">
<!--
H1.red { color: red }
H1.yellow { color: yellow }
.blue { color: blue }
-->
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="red">Way too red</H1>
<P CLASS="blue">Way too blue</P>
</BODY>
|
・スタイルシートの規則(rule)
１．基本概念
規則は以下のように書きます。規則はセレクタ（例：H1）と宣言を書きます。宣言にはプロパティ（例：color）と値（例：blue）を書きます。
２．グルーピング
セレクタを複数指定するときはコンマで区切ります。
宣言を複数指定するときはセミコロンで区切ります。
H3 { color: blue; font-size: 12pt; }
|
特定のいくつかのプロパティは値を列記できます。
DIV { font: bold 12pt/14pt helvetica }
|
３．継承
以下の例では、<H1>タグで色が青に設定されていた場合、<EM>タグで色が設定されていなければ、<EM>タグでも青が継承されます。これは、フォントサイズなどの他のプロバティでも同様です。
<H1>The headline <EM>is</EM> important!</H1>
|
４．セレクタとしてのクラス
"."で始まる文字列でクラスを定義できます。クラスを定義すると個々のタグでクラスを指定できます。
P.green { color: green } /* タグを限定したクラス */
.yellow { color: yellow } /* タグを限定しないクラス */
|
★スタイルシートでは/*と*/で囲まれた部分はコメントになります。
５．セレクタとしてのID
"#"で始まる文字列でIDを定義できます。IDを定義すると個々のタグでIDを指定できます。
#z98y { letter-spacing: 0.3em }
|
６．文脈依存セレクタ
セレクタを続けて書くと、文脈依存になります。以下の例では、<H1>タグの中に<EM>タグが現れた場合にのみ有効になります。
・インラインにおけるスタイル情報変更
文字列の途中で特定の文字だけ色を変えたい場合などには<SPAN>タグを使用します。<SPAN>タグはSTYLEの指定がなければ、何の影響も与えないタグです。
<P>スタイルシートは、
<SPAN STYLE="font-size:large;color:green">デザインが命</SPAN>
です。</P>
|
・スタイルシート単位(units)
１．長さの単位
相対指定には以下のようなものがあります。
H1 { margin: 0.5em } /* フォントの高さの0.5倍 */
H1 { margin: 1ex } /* 文字'x'の高さの１倍 */
P { font-size: 12px } /* 画面解像度に比例（ピクセル） */
|
絶対指定には以下のようなものがあります。
H1 { margin: 0.5in } /* inches, 1in = 2.54cm */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
|
２．パーセントの単位
パーセントによる指定は、以下のようになります。
P { line-height: 120% } /* フォントサイズの120% */
|
３．色の単位
色の名前による指定は、aqua, black, blue, fuchsia, gray,green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellowが提案されています。
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
|
ＲＧＢモデルによる指定は、以下のようになります。これらはすべて同じ意味です。
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
|
４．URL
URLは以下のように指定します。相対指定はスタイルシートのある場所からの相対であり、ドキュメントのある場所からの相対ではありません。
BODY { background: url(http://www.bg.com/pinkish.gif) }
BODY { background: url(yellow) }
|
ホームページへ戻る
|