Last Update : 03/13/2003
StyleSheet基礎講座 :: スタイルシートの指定法
<p> 普通の段落 </p>
<p style=" color : teal ; "> 文字の色を青緑にする </p>
<p style=" text-align : right ; "> 文字を右に寄せる </p>
前の回で、上みたいなスタイルシートの指定法を紹介したじゃん。今回はもうちょっと詳しく説明するぜ。
スタイルシートの書式
スタイルシートの基本形
スタイルシートには、デザインの変更部分に応じていろんなプロパティ（属性）がある。それを指定するには下の書式をつかうぞ。
セレクタ { プロパティ : 値 ; }
- セレクタ
- H , P , BODY など、スタイルを適用する要素を指定する
- {
- そのセレクタに適用するスタイルの定義を開始
- プロパティ
- 適用するスタイルの種類
- :
- プロパティと値の間の区切り
- 値
- プロパティの中身
- ;
- 各スタイルの区切り
- }
- そのセレクタに適用するスタイルの定義を終了
前回教えてもらったのと、指定方法が違ってるって？ 慌てない慌てない。それは、これからゆっくり説明していくぜ。その前に、スタイルシートの書式をもうちょっと解説するぞ。
複数のスタイルを使う
例えば、同じ部分の文字の大きさを変えて、色も変える場合、スタイルシートではどうすんだろ？ そんな風に、ひとつのセレクタに複数のスタイルを指定したい場合、下みたいに、各スタイル指定をセミコロン(;)で区切ればオッケーだぜ！
セレクタ { プロパティ : 値 ; プロパティ : 値 ; }
コメントを書く
スタイルシートの中にコメントを書くには、「/* */」の中に書けばいいぜ。
セレクタ { プロパティ : 値 }
/* ここに書いたものは、コメントとして無視される */
スタイルシートの3つの書き方
インラインスタイル（Inline Style）
これは、前回紹介した「style属性」を使ってスタイルシートを使う方法だぜ。
そのスタイルを適用したい要素に、「style="スタイル指定"」を入れるだけ。
<要素名 style=" プロパティ : 値 ; "> スタイルが適用 </要素名>
だから、文字を青緑にしたい場合、「style=" color : teal ; "」って入れる。この方法は、HTMLと同じカンジで使えるから、初めて使うときは分かりやすいかもね。
エンベッドスタイルシート（Embedded StyleSheet）
ページの一部分だけにちょっとスタイルシートを適用するなら、上のインラインスタイルを使ってもイイんだけど、例えば、strong要素の文字の色を変えたいときなんか、上の方法だとページの全部の<strong>の中にスタイル指定を入れなきゃいけない。メンドーだよなぁ。
そんな風に、ページ全体の同じ要素に何回も同じスタイルを指定する場合、これから紹介するエンベッドスタイルシートってのを使うぜ。やり方は、ページヘッダーに、「<style type="text/css"> から </style>」って部分を入れるだけ。
<head>
<title> title </title>
<style type="text/css">
<!--
セレクタ { プロパティ : 値 ; }
-->
</style>
</head>
ようやくセレクタってのが出てきた。セレクタってのは、どの部分にスタイル指定を適用するかを指定するものだぜ。
style属性だと、スタイルを適用したいタグのなかに、「<strong style="color : teal ;"> このタグで囲まれた部分は文字色を青緑にする </strong> 」なんていれたから、ブラウザはページのどの部分にスタイル指定を適用したいのかすぐに分かる。でも、上のだと、ページのどの部分にスタイル指定を適用したらいいのかわかんねぇじゃん？ だから、下みたいに、セレクタの所にスタイル指定を適用する部分を書くぞ。
<style type="text/css">
<!--
strong { color : teal ; }
-->
</style>
つまり、セレクタの所には、要素名（タグの名前）とかを書くってことだ。
リンクドスタイルシート（Linked StyleSheet）
全てのページに同じスタイル指定を使いたいってことがあるじゃん？ 例えば文字の大きさや色とかを統一したいとかさ。そんときに、全ページにエンベットスタイルシートをいれるのは大変だし、スタイル指定を変えたくなったときにメンドイだろ。そういう場合、「CSSファイル」ってヤツを使うぜ。
CSSファイルの作り方は簡単で、メモ帳とかのテキストエディタを開いて↓のようにスタイル指定だけ書きこむ。
body { font-size : 10pt ; }
h2 { color : #336699 ; font-size : 12pt ; }
で、書き終わったら、それを「ファイル名.css」って .css という拡張子にして保存。あとは、そのスタイルを使うページのヘッダーに、「<link rel="stylesheet" type="text/css" href="ファイル名.css">」を入れればオッケーだぜ。
<head>
<title> title </title>
<link rel="stylesheet" type="text/css" href="ファイル名.css">
</head>