実行例

はじめに
Step.1 いきなりJavaScriptを使ってみましょう
Step.2 あいさつ文を表示してみましょう
Step.3 現在の日付と時間を表示してみましょう
Step.4 関数化してHTMLソースリストを整理しましょう

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

</style>
</head>

<body>
<a href="hajimeni.htm">はじめに</a><br>
<a href="step1.htm">Step.1 いきなりJavaScriptを使ってみましょう</a><br>
<a href="aisatu.htm">Step.2 あいさつ文を表示してみましょう</a><br>
<a href="getdate.htm">Step.3 現在の日付と時間を表示してみましょう</a><br>
<a href="function.htm">Step.4 関数化してHTMLソースリストを整理しましょう</a><br>
</body>

サンプルだけの HTMLはこちらへ

説明

時代もスタイルシートやDHMLになってきました。
※ 時代は 2002年、CSSが使えない IE3 や NN4 が減ってきた頃のお話です。 (^^;

今回は JavaScript を忘れて CSS(スタイルシート) を使ってリンク文字の色を設定してみます。

今回のお題は、「リンク文字の上にマウスカーソルがきたら、色を変えたいのですが・・・」です。

スタイルシート(CSS)は、テキストの色、フォント、配置などをブラウザに左右されないように設定できる規格、と聞いたんですが左右されます (^^;
※ 2013年になっても、いまいちですね。。

スタイルシートの指定ですが、今回は <head>タグの中に <style>というタグを使って定義してみます。

<style type="text/css"> ～</style> のなかに CSSを埋め込みます。

スタイルシートに対応していないブラウザのために、JavaScriptと同様、

で囲ってあげます。

<style type="text/css">

</style>

A:は、<A>タグの A です。
A:link は、まだ１回も行ったことがないリンク先です。
A:visited は、１度は行ったことがあるリンク先です。
A:active は、クリックしてアクティブ状態になったときです。
A:hover は、マウスカーソルが触れた時です。←ココが今回のポイントです

それぞれに { }をつけて (JavaScriptの if 文のイメージで)、その中に、それぞれの設定を定義します。

color : #色コードで、その時の色を設定します。
（付録Ｂ：カラーコード表をつかってね）

そのほか、たとえば、アンダーラインが気にいらない、という方は、
text-decoration:none;
を追加すると、アンダーラインは付きません。
A:hover { color:#008000; text-decoration:none; }

続きは次の Step で。

参考ステップ
Step.42 リンク文字の上にマウスがきたら背景色を変えてみましょう　
Step.90 リンク先の補足説明窓を表示してみましょうその３

▲TOP