リンクになる文字に関するCSSの指定について説明します。
以下の説明は全てCSS内です。
ちなみにHTMLだけで指定しようと思ったら、bodyの中で指定しますが、一部だけリンクの色を変える、アンダーラインが出るのを消すなどは、CSSでの指定が必要になります。
- 基本形。
a:link{} これが未訪問リンクに関する指定です。
a:visited{} これが訪問済みリンクに関する指定です。
a:active{} これがアクティブ（クリックしている時）のリンクに関する指定です。
a:hover{} これがマウスを合わせた時のリンクに関する指定です。
- 個別指定方法
上記だけ書くと、これはページ全体のリンク（aタグ）に対する指定となります。
しかし、一部だけ色を変えたいなどの場合、個別に指定する方法です。
div a:link{} これはdivの中にリンクがあった場合、この指定が有効となります。
visited、active、hoverも同様の形で指定します。
もちろん、div を td や p など他のタグに変えることで、それぞれ指定できます。
.a1 a:link{} これはクラス指定がa1になっている中にリンクがあった場合です。
#a2 a:link{} これはIDがa2の中にリンクがあった場合です。
応用編
div.a1 a:link{} これは、divのクラスがa1だった時、その中のリンクの指定です。
クラスが同じa1だったとしても、tdやpなど他のタグでは無効です。
このように指定の仕方を工夫すると、細かな指定も簡単にできます。
- では、どのような指定ができるのが一つずつ見ています。
まずは、色です。
a:link{color : #ff0000;}
このように色を指定するのは、color を使います。
#ff0000 は赤です。この部分を好きな色に変えます。
同様に visited active hover も指定します。
- 文字の飾り
a:link{ text-decoration:none;}
このように text-decorationで指定します。
指定できるのは、以下です。
none 飾り無し。
underline 下線。
overline 上線。
line-through（取消線）やblink（点滅）などもありますが、blinkはブラウザによって未対応だったりしますし、通常使うのは、noneかunderline、あるいはunderline overline（両方を半角スペースを入れて指定すると上下線になります）くらいでしょう。
- 背景色
a:hover{background-color: #ffff00;}
この例では、カーソルをあわせた時だけ、リンク文字の背景が黄色になります。
もちろん、linkやvisited activeに対しても指定できますし、色も変えられます。
- 位置指定
これは、考えると面倒ですから、カーソルをあわせるとボタンのように文字が移動して沈むように見せる方法だと単純に覚えておく方がよいかもしれません(^^;
a:hover{position:relative; top: 1px; left: 1px;}
positionというのは、本来表示位置を指定するもので、relative以外の指定もありますが、リンクに対して指定する時はこれだけでよいです。
ちなみにrelativeというのは、「本来の表示位置を基準に」ずれるということです。
指定もhoverに対してだけでよいでしょう。でないと、例えばlinkに対して指定しても、最初から位置がずれて見えるだけで、ボタンのように動いたりはしないからです。
どのくらいずれるかは、top（上から指定分下にずれる）とleft（左から指定分右にずれる）に指定している数値を変えます。
大きくずらしたいなら数字を大きくしますが、あまり激しくずらすと見辛くなりますから、フォントサイズにもよりますが、1か2くらいがよいでしょう。
この例では、右下に1pxずつずれるわけです。これをbottomやrightを指定して、上や左にずらすこともできます。
- その他の指定
リンクに関してよく使われるのは上記くらいですが、他にもできることはあります。
それらは上記もそうですが、リンクだから出来るのではなく、リンク以外のタグに対しても指定でき、色々なものがありますので、興味があれば調べてみて下さい。
Close
Click for your forutne! 