CSSでリンクを装飾する:CSS入門

ブログが作りたい!CSS入門 > CSSでリンクを装飾する:CSS入門

CSSでリンクを装飾する:CSS入門

CSSでリンクを装飾する:CSS入門

CSS入門(25)

みなさんは、ホームページを見ていて、リンクをクリックしようと思ったら、「ちょっと変わった動作をして驚いた!」というような経験はありませんか?

例えば、文字が動いたり、背景色が変わったりなど・・・これは、実はCSSで行っています。

今回は、リンク(<a>タグ)を装飾します。お話は、次の順番で進みます。

複雑な動作は、JavaScriptやFlashなどで行っています。簡単なことはCSSで行うのが一般的です。

▲ページの先頭に戻る

<a>リンクのデフォルトの状態

1:色と形状

リンクのデフォルトの文字色はご存知かしら?おおよそ、未訪問リンクは青系、既訪問リンクは紫系と決まっています。

<a>リンクのデフォルトの状態

また、リンクされている文字列には、下線がつきます。

これらのルールによって、インターネットを始めたばかりの人でも、リンク文字列であることが分かりやすい状態にあると言えます。

ちなみに、実際に調べてみると、ブラウザによって、色は微妙に違うようです。

 

Firefox

IE

未訪問リンク

#0000ee

#0000ff

既訪問リンク

#551a8b

#800080

▲ページの先頭に戻る

2:リンクを装飾するときの留意点

昨今、サイトの全体のデザインに合わせて、色を変えたり、下線を消したりすることが多くなっているようです。

例えば、メニューなどは、下線を消してもユーザの経験則から、リンクであろうと考えてくれる可能性は高いように思います。

私なんかは、「下線が無い方が見易いので、お願いだから消してくれ」とさえ思います。

下線の有無

しかし、リンクの装飾を好きなように設定することが、必ずしも良い結果に結びつくとは限らないので、注意する必要があります。

例えば、当ブログのヘッダ部分ですが、未訪問リンクも、既訪問リンクも黒色で下線なしにしているため、リンクだと気が付かない人もいらっしゃるはずです。

下線の有無

一見してリンクだと分からないリンクは、あまり好ましくありません。特に商用のサイトであれば、尚更です。

デザインを優先するのかどうか、よく検討する必要があります。

▲ページの先頭に戻る

CSSでリンクを装飾する方法

1:前回までのお話

(01)

前回は、表(table)の中央揃えを行いました。

表(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で飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/05/13 更新日:2008/05/13

« 「表(table)の中央揃え」|「背景に画像【background-image】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

a:active

こんにちは!
リンクの下線は、自分もない方が好みです。
でも、あるとわかりやすいですよね。
メインメニューにはつけないで、パンくずとかにはつけたりしてます。

a:activeなんですが、自分も「これ用途ねえやん!」と
思ってたんですが、最近見つけたリンクボタン(画像使用)で、
おもしろい効果のやつをみつけました。
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
(セクシーボタン)

なんかセクシー?
一回自分で作ってみたんですが、癖になる感じです。
プニプニ!プニプニ!

画像リンクならともかく、テキストリンクだと、確かにa:activeはあんま用途ないですよね。
だって一瞬だし・・・

セクシー

ひろこさん、こんにちは。

セクシーと聞いて、すっ飛んで行きましたが、
ボクの期待するようなセクシーではないのね。(´Д`;)・・・(男ってバカ)

いいですね、プニプニ。
ボタンて何か知らんけど、押したくなるのよね。

そうですよねー、a:activeは一瞬だから、
よほど破滅的なありえないことでもなければ、気付かないものね。

クリックすると画面がブラックアウトすると面白いかも。(・∀・)
なんつて。

No title

こんばんは。
自分もすっ飛んでいったクチなんで人の事は笑えません。


あのプニプニ、作るのも簡単だったので、もしかしてそんな簡単な方法で
もっといろいろなおもしろいボタンって作れるかもしれないですね。


テキストリンクのクリックの一瞬をもっとおもしろく見せる方法、ないかなあ。
こすれ、とか、発光とか、そういうのはIEでしか見れないし・・・

ボタン風にボーダーをひいて、a:activeの時ボタンを押したように
ボーダーの太さ変えたり、若干位置変えたり、くらいしか思い浮かばない^^;


ブラックアウトで思いついたけど、クリックした一瞬、カスケードさんとかが
バッと出るとか。
サブリミナル効果っぽく。

JavaScript

ひろこさん、こんばんは。(・∀・)/
コメントありがとうございます。

うーん・・・こ。
でも、そこまで凝ったことをとなると、
a:activeじゃなくて、JavaScripteでやってしまった方が、
逆に簡単でイロイロできるかもしれないですね。

CSS3とかでは、すごいこと出来るのかしら。
影付きや、角丸なんかは標準でできるんでしたよね?

css3

こんばんは!
css3、どんなもんだろうと思ってみてきたけど、影付き出来るんですね!
ボーダーもかわいいのがある・・・。
すげえええ

http://www.css3.info/preview/
(CSS3 Previews )

角丸もできるみたいですね。
みてきたけど、ボーダーで角丸?すごいわあ。
http://digicool.org/wp/?p=767

今のところIEはcss3はまったくダメなのかなー

ビッグウェーブ

ひろこさん、こんばんは。
コメントありがとうございます。

おぉう!実際にやっているのを始めてみたよ。(・∀・)むひょー

まだ、先のことかと思っていたけれど、
もう、すぐそこまで来ているのかもしれんね。ビッグウェーブが!

そのうち、角丸だけじゃなく、歌丸とかも出来るのかも!
一度でいいから見てみたい、にょうぼが・・・。

でも、IEがネックになるんかなぁ。やっぱり。
バグの多いIE6、エラーの多いIE7、
どうにかならんものなのかしら???(´Д`;)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/295-8cb3dcc8
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて