入れ子のタグの設定と特別なタグの設定

タグ１ タグ２{プロパティ名:値;プロパティ名:値;…}
タグの一括指定と良く似ていますが、こちらはスペースで区切られています。 これは、「タグ１の中でタグ２を使った場合のタグ２のスタイル」 の設定になります。 わかりにくいと思いますので、次の例を見て下さい。 
(StyleSheet)
b i{
	background:crimson;
	color:white;
}

<b>ここに、<i>注目</i>！！</b><br>
ここは、<i>無視</i>！！
ここに、注目！！
ここは、無視！！
例では、bタグの中でiタグを使ったときにのみ有効なスタイルを指定しています。 bタグの中では指定したスタイルが有効になっているのに対し、 その外ではただ斜体になっているだけということに注目して下さい。

さて、いよいよ最後の説明になります。 Aタグはリンクするタグですが、これには４つの状態があります。

  1. 未訪問であるとき
  2. 訪問済であるとき
  3. クリックして待っているとき
  4. リンクの上にカーソルがあるとき
この４つにはそれぞれ違ったスタイルを設定する事ができ、 それぞれ以下のタグにスタイルを設定する事で、任意の状態でのスタイルを設定できます。
  1. A:link
  2. A:visited
  3. A:active
  4. A:hover(IEのみ、非公式)
これにもクラス名を設定する事ができ、その場合はAの直後に記入します。 
(StyleSheet)
A.sample:link{
	color:cornflowerblue;
	text-decoration:none;
}

A.sample:visited{
	color:darkslateblue;
	text-decoration:none;
}

A.sample:active{
	color:red;
	background:whitesomke;
	text-decoration:underline;
}

A.sample:hover{
	color:mediumseagreen;
	text-decoration:underline;
}

<a class=sample href=notexist.html>未訪問リンク(リンク先存在しません)</a><br>
<a class=sample href=#linktest>訪問済みリンク</a>
未訪問リンク(リンク先存在しません)
訪問済みリンク

以上で、全ての説明が終わりました。 StyleSheetをうまく使うと、簡単にレイアウトの保守ができます。 うまく使って、自分にも訪問者にもわかりやすいページを作って下さい。

このリファレンスのご意見御感想、質問などはこちらへどうぞ。 remove-before-dot.norinoue@mbox.kyoto-inet.or.jp

4ページ目に戻る
目次に戻る