CSSでリンクを装飾する：CSS入門
CSS入門（25）
みなさんは、ホームページを見ていて、リンクをクリックしようと思ったら、「ちょっと変わった動作をして驚いた！」というような経験はありませんか？
例えば、文字が動いたり、背景色が変わったりなど・・・これは、実はCSSで行っています。
今回は、リンク（<a>タグ）を装飾します。お話は、次の順番で進みます。
複雑な動作は、JavaScriptやFlashなどで行っています。簡単なことはCSSで行うのが一般的です。
<a>リンクのデフォルトの状態
1：色と形状
リンクのデフォルトの文字色はご存知かしら？おおよそ、未訪問リンクは青系、既訪問リンクは紫系と決まっています。
また、リンクされている文字列には、下線がつきます。
これらのルールによって、インターネットを始めたばかりの人でも、リンク文字列であることが分かりやすい状態にあると言えます。
ちなみに、実際に調べてみると、ブラウザによって、色は微妙に違うようです。
| Firefox | IE |
|---|---|---|
未訪問リンク | #0000ee | #0000ff |
既訪問リンク | #551a8b | #800080 |
2：リンクを装飾するときの留意点
昨今、サイトの全体のデザインに合わせて、色を変えたり、下線を消したりすることが多くなっているようです。
例えば、メニューなどは、下線を消してもユーザの経験則から、リンクであろうと考えてくれる可能性は高いように思います。
私なんかは、「下線が無い方が見易いので、お願いだから消してくれ」とさえ思います。
しかし、リンクの装飾を好きなように設定することが、必ずしも良い結果に結びつくとは限らないので、注意する必要があります。
例えば、当ブログのヘッダ部分ですが、未訪問リンクも、既訪問リンクも黒色で下線なしにしているため、リンクだと気が付かない人もいらっしゃるはずです。
一見してリンクだと分からないリンクは、あまり好ましくありません。特に商用のサイトであれば、尚更です。
デザインを優先するのかどうか、よく検討する必要があります。
CSSでリンクを装飾する方法
1：前回までのお話
（01）
前回は、表（table）の中央揃えを行いました。
以下、前回までのHTMLコードです。
以下、前回までのCSSコードです。
2：リンクの下線を消す
（02）
手始めに、リンクの下線を消してみましょう。（良いか悪いかは別にして）
次のように、aリンクに、「text-decoration: none;」を指定します。
（03）
ブラウザで表示してみましょう。リンクの下線が消えているはずです。
3：CSSでリンクを装飾してみましょう
（04）
aリンクは、CSSによって、ちょっと面白いことができます。「a」の後に次のように書くと、それぞれ意味を持ちます。
a:link | 未訪問状態のリンク |
|---|---|
a:visited | 既訪問状態のリンク |
a:hover | マウスのカーソルが上に乗ったとき |
a:active | クリックされたとき |
今回は、変化が分かり良いように、いろいろと試してみようと思います。「a:active」は用途が思い浮かばないので、何もしません。
- 未訪問状態のリンクは、黒色にする。
- 既訪問状態のリンクは、赤色にする。
- リンクにマウスのカーソルが乗ったら、下線を表示する。
（05）
未訪問状態のリンクを、黒色にするので、次のように書きます。
（06）
既訪問状態のリンクを、赤色にするので、次のように書きます。
（07）
リンクにマウスのカーソルが乗ったら、下線を表示するので、次のように書きます。
（08）
ブラウザで表示してみましょう。リンクの上にマウスを乗せてみたり、クリックしてみたり、確認してみてください。
次回予告
次回は、背景に画像を使用する方法（background-image）について書く予定です。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
- CSSでリンクを装飾する（この記事です）
- 背景に画像【background-image】
15：まとめ
作成日：2008/05/13 更新日：2008/05/13
« 「表（table）の中央揃え」｜「背景に画像【background-image】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
a:active
セクシー
セクシーと聞いて、すっ飛んで行きましたが、
ボクの期待するようなセクシーではないのね。(´Д｀;)・・・（男ってバカ）
いいですね、プニプニ。
ボタンて何か知らんけど、押したくなるのよね。
そうですよねー、a:activeは一瞬だから、
よほど破滅的なありえないことでもなければ、気付かないものね。
クリックすると画面がブラックアウトすると面白いかも。(・∀・)
なんつて。
No title
自分もすっ飛んでいったクチなんで人の事は笑えません。
あのプニプニ、作るのも簡単だったので、もしかしてそんな簡単な方法で
もっといろいろなおもしろいボタンって作れるかもしれないですね。
テキストリンクのクリックの一瞬をもっとおもしろく見せる方法、ないかなあ。
こすれ、とか、発光とか、そういうのはIEでしか見れないし・・・
ボタン風にボーダーをひいて、a:activeの時ボタンを押したように
ボーダーの太さ変えたり、若干位置変えたり、くらいしか思い浮かばない＾＾；
ブラックアウトで思いついたけど、クリックした一瞬、カスケードさんとかが
バッと出るとか。
サブリミナル効果っぽく。
JavaScript
コメントありがとうございます。
うーん・・・こ。
でも、そこまで凝ったことをとなると、
a:activeじゃなくて、JavaScripteでやってしまった方が、
逆に簡単でイロイロできるかもしれないですね。
CSS3とかでは、すごいこと出来るのかしら。
影付きや、角丸なんかは標準でできるんでしたよね？
ｃｓｓ３
ｃｓｓ３、どんなもんだろうと思ってみてきたけど、影付き出来るんですね！
ボーダーもかわいいのがある・・・。
すげえええ
http://www.css3.info/preview/
（CSS3 Previews ）
角丸もできるみたいですね。
みてきたけど、ボーダーで角丸？すごいわあ。
http://digicool.org/wp/?p=767
今のところIEはｃｓｓ３はまったくダメなのかなー
ビッグウェーブ
コメントありがとうございます。
おぉう！実際にやっているのを始めてみたよ。(・∀・)むひょー
まだ、先のことかと思っていたけれど、
もう、すぐそこまで来ているのかもしれんね。ビッグウェーブが！
そのうち、角丸だけじゃなく、歌丸とかも出来るのかも！
一度でいいから見てみたい、にょうぼが・・・。
でも、IEがネックになるんかなぁ。やっぱり。
バグの多いIE6、エラーの多いIE7、
どうにかならんものなのかしら？？？(´Д｀;)
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/295-8cb3dcc8
リンクの下線は、自分もない方が好みです。
でも、あるとわかりやすいですよね。
メインメニューにはつけないで、パンくずとかにはつけたりしてます。
a:activeなんですが、自分も「これ用途ねえやん！」と
思ってたんですが、最近見つけたリンクボタン（画像使用）で、
おもしろい効果のやつをみつけました。
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
（セクシーボタン）
なんかセクシー？
一回自分で作ってみたんですが、癖になる感じです。
プニプニ！プニプニ！
画像リンクならともかく、テキストリンクだと、確かにa:activeはあんま用途ないですよね。
だって一瞬だし・・・