スタイルシートの書式

まず、タグに直接書く方法。 これは次のように指定します。

<タグ style="プロパティ名:">
<タグ style="プロパティ名:;プロパティ名:;">
タグはHTMLタグの事です。 つまり、タグの一つのパラメータとしてスタイルを指定するわけです。 個々のプロパティはすべて、プロパティ名、コロン、値、の順に指定し、 複数のスタイルを指定するときは、セミコロンで区切ります。 ダブルクォーテーションは書かなくていい場合もありますが、 値にスペースを使う事もあるので、書いた方が良いです。

次にヘッダーでの書式とCSSファイルでの書式。 この2つは同じで、次のように指定します。

タグ{プロパティ名:}
タグ{プロパティ名:;プロパティ名:;}
タグ,タグ,{プロパティ名:;プロパティ名:;}
タグはHTMLタグの事です。そのタグにスタイルを指定することになります。 タグをコンマで区切って複数書いた場合、 コンマで区切られたタグ全てに同じスタイルが指定されます。 タグに与えるスタイルは、{}で囲んで指定します。 {}内では、直接指定同様、プロパティ名、コロン、値の順に指定し、 複数のプロパティを指定するときは、セミコロンで区切ります。

スタイルの指定では、スペースやタブ、改行、大文字小文字などは無視されます。 つまり、次の2つのタグは全く同じ表示になります。

<font style="text-decoration:underline">下線表示</font>
<font StYlE=
"
	text-DECORation	:
	underline
		">下線表示</font>
また次の2つのスタイル定義も全く同じ定義と解釈されます。
div{font-size:xx-large;background:yellow;}
div{	font-size
:xx-large
;
	BACKGROuND
	:
		yellow;		}
しかし、上のとくに後者の例は極端な悪い例で、 通常は読みやすいようにインデントしたほうがよいでしょう。

それでは次。 ヘッダーやCSSファイルでの指定の場合、クラスを設定する事ができます。

タグ.クラス名{プロパティ名:;プロパティ名:;}
.クラス名{プロパティ名:;プロパティ名:;}
タグの後にピリオドを打ち、クラス名を設定します。 クラス名には自由に名前をつける事ができ、 タグのclassオプションで選択する事ができます。 設定したクラスが使えるのは指定したタグからのみです。 どのタグからでも選択できるようにするには、 タグを書かずにクラスだけを書きます。
(stylesheet)
font.green{
	color:forestgreen;
	font-size:200%;
	line-height:100%
}

b.green{
	color:darkgreen;
	font-size:200%;
	line-height:100%
}

.largefont{
	font-size:300%;
	line-height:100%
}
HTMLソース:
<font class=green>森の緑色</font>
<b class=green>暗い緑色</b>
<font class=largefont>3倍角</font>
<b class=largefont>3倍角</b>
森の緑色 暗い緑色 3倍角 3倍角
上の例では、fontとbタグにそれぞれに内容の違うクラスgreenを設定し、 タグのclassオプションではgreenと指定しています。 fontにはfontのgreenが、bにはbのgreenが正しく選択されています。 また、クラスlargefontはタグを指定していないので、 bタグからもfontタグからも同じものが使えています。

次もスタイルシートについてです。最後の説明になります。

5.入れ子と特別なタグの指定
3ページ目に戻る
目次に戻る