スタイルシートの使い方
スタイルシートを使う
スタイルシートの記述
スタイルシートとは、webページのデザインやレイアウトを変更できる技術です。
HTMLでは実現できないデザインを簡単に実現することが可能です。
また、HTMLを編集しなくてもデザインを変更できる。
サイト全体・ページ全体のデザインを一括編集できる。
HTMLとCSSに分離することで、HTMLファイルの容量を小さくすることができる。
など、様々な利点があります。
例えばp要素の文字色を赤に変えたい場合、ＨＴＭＬでは次のように記述していたと思います。
<p><font color="red">文字色を赤に変える</font></p>
しかし、スタイルシートでは次のように記述することで全てのp要素の文字色（前景色）を赤にできます。
ＨＴＭＬでは、毎回上のようにしないと文字色を赤にできなかったのですが、
スタイルシートだと・・・
p { color : red ; }
これだけで、すべてのp要素の文字色（前景色）を赤にできます。
このとき、pのことをセレクタといいます。セレクタの指定方法はいくつかありますが、一番簡単なのは、HTML内で使っている要素(body、p、a、imgなど）を指定します。
このとき、colorのことをプロパティといい、redのことを値といいます。プロパティと値の間には:（コロン）を置きます。複数のプロパティを指定する場合、;（セミコロン）を置きます。colorは前景色を指定するプロパティ、redはその値です。
プロパティ・値の種類や使い方は当サイトでもいくつかサンプルを公開しています。しかし、実際に使おうと思ったら市販されている解説書がいくつもあるので、それを使うことをおすすめします。本を見ながらスタイルシートの編集ができるので使いやすいです。
また、インターネット上でもスタイルシートの解説・リファレンスは多くのサイトで公開されています。
とほほのWWW入門は、特にお勧めのサイトです。
セレクタ { 値 : プロパティ; 値 : プロパティ; }
セレクタに対する値はいくつでも指定可能です。改行を入れたほうが見やすいので、改行を適当に入れることをおすすめします。
p {
color : red ;
background-color : #ffffff ;
}
background-colorは背景色を指定するプロパティです。
色の指定は、色の名前でもRGB形式でも可能です。
外部スタイルシートを使う
外部にあるスタイルシートファイルにリンクすることで、スタイルシートを使うことができます。
このやり方だと、複数のページからスタイルシートのファイルにリンクすることで、リンクした全てのページのデザインを共通にできたり、スタイルシートのファイルを変えるだけでリンクした全てのページのデザインを変えたりできます。
HTMLファイルの記述方法
<link rel="stylesheet" href="☆.css" type="text/css">
このソースを<head>〜</head>の間に記述することでリンクできます。
☆の部分は、ファイル名に合わせて変えて使ってください。
一つのファイルで複数のスタイルシートファイルを使うことも可能です。
スタイルシートファイルの記述方法
メモ帳などのテキストエディタで新しいファイルを作って、そこにスタイルを記述してください。
保存の時は、「☆.css」としてください。（☆は任意の文字列。半角英数字で入力。）
スタイルシートの編集・ＨＴＭＬの編集に使えるテキストエディタはコチラを参照してください。
/* 〜 */の間はコメント部分になります。後で見直すときに使いやすいようにスタイルの意味をかいたり、ファイル内の整理に使えたりします。
/* ページ */
body {
background-color : white ;
margin : 10px ;
}
/* 段落 */
p { color : black ; }
HTMLファイル内で使う
一括指定
<head>〜</head>の間に、下記のように記述することでそのページ内のスタイルを一括指定できます。
<html>
<head>
<title></title>
<style type="text/css">
<!--
body { background-color : silver ; }
p {
color : red ;
font-size : 20px ;
}
-->
</style>
</head>
<body>
<p>文字色が赤になります</p>
</body>
</html>
スタイルシートに対応していないブラウザのために<!-- 〜 -->でコメントアウトします。
bodyの背景色が灰色、pの文字色が赤・文字サイズが20pxになります。
属性で指定
要素内の開始タグの属性として指定できます。
<p style="color:black;margin:5px;">
style="プロパティ:値;プロパティ:値;プロパティ:値;"と記述します。
セレクタの種類
p { color : black ; }
この場合、<p>〜</p>の中の前景色を黒にします。
複数のスタイルを使う場合、
p { color : black ;
background-color : white ;
}
のように「;」を使って区切ります。
複数のセレクタに指定
p , h1 { color : black ; }
セレクタを「,」で区切ると複数のセレクタに指定できます。
あるセレクタの中の特定のセレクタに指定
p a { color : black ; }
空白で区切ると、ある要素の中の小要素全てに指定できます。
この場合、p要素の中のa要素全ての文字色が黒になります。
全ての要素に指定
* { color : black ; }
指定したクラス名を持つ要素に指定
.big { color : black ; }
HTMLファイル内で、<☆ class="big">〜</☆>（☆はどの要素でも可）の範囲の前景色を黒にします。
クラス名はどんな名前でも構いません。
一つクラスは一つのドキュメント内で何度でも使えます。
指定したIDを持つ要素に指定
#big { color : black ; }
HTMLファイルで、<☆ id="big">〜</☆>（☆はどの要素でも可）の範囲の前景色を黒にします。
IDはどんな名前でも構いません。
一つIDは一つのドキュメント内で一つの要素にしかして指定できません。
クラスとIDは非常に便利なものですが、名前の付け方には注意が必要です。
例えば、クラスに「red」と指定して「.red { color : red ; }」と指定したとします。
すると、後で文字色を緑に変えようと思ったとき「.red { color : green ;}」というおかしな状況になります。
さらに文字色を赤に変えたい部分全てのクラスに「red」を指定した場合、文字色を緑に変えたくない場所の文字色も緑になってしまいます。
これらを防ぐために、クラス名やID名には意味や用途を指定することをおすすめします。
長さの指定
px、pt、em、ex、in、cm、mm、pc、%が使えます。
単位の前に数値を入力して指定してください。%は、割合を指定できます。
スタイルシートの欠点
スタイルシートは上記したように便利なことも多いですが、欠点もいくつかあります。
管理人がスタイルシートを使う中で、いくつかの欠点を記述します。
- ブラウザごとにスタイルシートの解釈が違う
- スタイルシートの解釈はブラウザによってかなり違うので、一つのブラウザで確認するだけだと他のブラウザで閲覧した時とんでもないレイアウトで表示されることがあります。複数のブラウザで確認することをおすすめします。
- スタイルシートに対応していないブラウザがある
- 上記の通りです。また、ブラウザによってはスタイルシートをオフにして見ることもできます。
