STEP.3 各部分の装飾を作る
次に、a要素の中に含まれる3つのspan要素に対して装飾を施します。
font-size: 70%;
}
a span.sitename {
text-decoration: underline;
}
a span.siteurl {
font-size: 75%;
font-family: Verdana,Arial,sans-serif;
}
3つのspan要素は、上から順に「紹介文用」・「サイト名用」・「URL用」です。主に文字サイズやフォントに関する装飾を行っています。 表示色は後から状況別に指定するため、ここでは記述していません。
このソースを使ってHTMLを表示させると、以下のように見えます。
※All About側のスタイルシートも同時に適用されているため、本来の見え方とは少し異なります。
その道のプロがあなたをガイド
All About
http://allabout.co.jp/
上記のスタイルシートソースの意味は次の通りです。
■font-size: 70%; ／ font-size: 75%;
文字サイズを指定しています。小さめに表示されるようにしています。
■text-decoration: underline;
リンクに下線を加える指定です。前ページでは、text-decorationプロパティに「none」を指定して、リンクの下線を消す装飾を記述しました。 ここでは、「サイト名」の箇所にのみ下線を表示するようにしています。値に「underline」を指定すれば、下線が加わります。
※下線を完全に消してしまうとリンクだと分かりづらくなるので、サイト名にだけは下線を表示するようにしています。
■font-family: Verdana,Arial,sans-serif;
表示に使われるフォント名を指定しています。カンマを使うことで、優先順にフォント名を列挙できます。 「Verdana」がある環境では「Verdana」フォントで表示され、それがなくても「Arial」がある環境では「Arial」フォントで表示されます。 それもなければ、何らかのゴシック系フォント（sans-serif）で表示されます。
さて、ここまでの記述では、マウスをどう動かしても表示色は変化しません。 最後に、状況別に色が変化するようスタイルシートを記述しましょう。
