リンクの特殊効果スタイルシート具体例


リンクの特殊効果に関してのスタイシートの具体的な書き方です。
状態に応じて文字の色・太さ・背景色・枠等を帰ることができます。 クリックする前とした後で文字の色を変えたり、リンク部にマウスカーソルが載った時背景色を 変えたりできます。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
リンクの特殊効果に関してのスタイルシート具体例       

リンクの場合は『どこに』と『何を』をまとめて覚えてしまいます。
  • リンクは4つの状態に分けて効果を設定できます。
  • A: link はクリックしていないリンクに対して効果を設定できます。
  • A: visited はクリック済みのリンクに対して効果を設定します。
  • A: active はクリックしている最中のリンクに対して効果設定になります。
  • A:hover はリンク部にマウスカーソルが載ったときの効果設定です。

クリックしていないリンクへの効果
A:link { color: #006600;font-size:80%;text-decoration: none;}

A:link { }と書くと、クリックしていないリンク部が{ }内で指示した内容になります。{ }内には今迄やってきた color: 、background-color: 、text-decoration: 、font-size: 、border: 、等色々なものを指定することができます。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
A:link { color: #006600;font-size:80%;text-decoration: none;}   
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<A href=".htm">マルチAVノート</A>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



クリック済みのリンクへの効果
A:visited { color: #aa0000; font-size:80%;text-decoration: none;}

A:visited { }と書くと、クリック済みのリンクに対し{ } 内の内容を適用します。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
A:visited { color: #aa0000; font-size:80%;text-decoration: none;}   
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<A href="aa.htm">マルチAVノート</A>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



リンク中のリンク部への効果
A:active { color: #FF0000; text-decoration: none;font-size:80%;}

A:active { }と書くと、リンク中のリンク部に対し{ } 内の内容を適用します。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
A:active { color: #FF0000; text-decoration: none;font-size:80%;}   
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<A href="aa.htm">マルチAVノート</A>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



マウスカーソルが載ったときの効果
A:hover { color: #FFFFFF; background-color: red; text-decoration: none; font-size:80%;}

A:hover { }と書くと、リンク部にマウスカーソルが載ったとき、リンク部に{ } 内の内容を適用します。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
A:hover { color: #FFFFFF; background-color: red; text-decoration: none; font-size:80%;}
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<A href="aa.htm">マルチAVノート</A>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



今迄の指定をまとめて<HEAD></HEAD>間に記入すると、すべての効果がリンク部に与えられます。
A:link { color: #006600;font-size:80%;text-decoration: none;}
A:visited { color: #aa0000; font-size:80%;text-decoration: none;}
A:active { color: #FF0000; text-decoration: none;font-size:80%;}
A:hover { color: #FFFFFF; background-color: red; text-decoration: none; font-size:80%;}
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
A:link { color: #006600;font-size:80%;text-decoration: none;}
A:visited { color: #aa0000; font-size:80%;text-decoration: none;}
A:active { color: #FF0000; text-decoration: none;font-size:80%;}
A:hover { color: #FFFFFF; background-color: red; text-decoration: none; font-size:80%;}

-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<A href="aa.htm">マルチAVノート</A>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。

上に戻る TOPページに戻る 前に戻る 順番に次を見ていく