YMLib - HTML - スタイルシート

スタイルシート

2008/11/26

スタイルシートの書き方です。

◆環境

OS	Windows XP Professional Version 2002 Service Pack 2

基本

まずは直接タグに書いてみます。

1:
2:
3:
4:
5:

<html>
<body>
直接タグに書きます。
</body>
</html>

◆表示結果

タグにスタイルを指定することもできます。

スタイルシートに対応していないブラウザの為に、でコメントアウトしておくと良いようです。また、JavaScriiptと違い、-->の前に // は書かないようです。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
タグにスタイルを指定することも出来ます。
まとめて指定できるので便利です。
</body>
</html>

◆表示結果

p { color: red; } という定義の各部分を以下のように呼びます。

複数の要素に同じスタイルを適用する場合、要素をカンマで区切って記述します。

p, div { color: red; }

複数の属性を指定する場合、属性の区切りをセミコロンで記述します。

p {
color: red;
backgrouond: blue;
}
※改行はあってもなくてもよい。

要素にクラス名を付けて細かく指定することもできます。

p.red { color: red; }
p.blue { color: blue; }
:
赤
青

タグに依存しないクラスも作れます。要素を省略して記述します。

.red { color: red; }
:
赤

クラスの代わりにIDを使うこともできます。IDはクラスと違いひとつのドキュメント中に複数の要素が同じIDを持つことはできません。

#red { color: red; }
p#blue { color: blue; }
:
赤
青

ある要素に含まれた場合だけスタイルを適用することもできます。

例えば、p要素が span要素に含まれる場合のみ文字を赤くする場合、以下のように記述します。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>

span要素に含まれるp要素。

span要素の外にいるp要素
</body>
</html>

◆表示結果

コメントは /* ～ */ で記述します。

スタイルシートを外部ファイルに記述し読み込むことも出来ます。