スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSSでリンクのカスタマイズ

CSSでリンクのカスタマイズ

投稿日:2007年9月21日   レベル:初心者    ソフトウェア:-
もう知っているかもしれないが、リンクには 4 種類のオプションがある。通常のリンクの色、マウスオーバーしたときのリンクの色、一度クリックした後のリンクの色、そしてアクティブリンク (クリックしている最中のリンク) の色だ。


Step1:ブラウザとコード
リンク色を決めるコードを書いているとき、「4 つのオプションをどういう順番で書いたらいいの?」と悩む人も多いみたいだね。ブラウザはコードの一番上の行から読み、順々にその下を読んでいく。

つまり、私たちが読む場合と同じというわけだ。リンク属性をどの順番で書いたらいいかわからない人たちへ。以下が正しい順番だ。

Step2:ソース

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}


まずは通常リンク色、次に訪問済みリンク、そしてマウスオーバー、最後にアクティブリンクの色だ。

各リンク属性は、以下に示す属性を持っている。

Step3:解説
color
色は 16 進数か色名のどちらかで指定する。

text-decoration
テキスト装飾は、none / underline / overline / line-through のうちのいずれかを指定する。

font-weight
フォントの太さは、normal / lighter / bold / bolder のうちのいずれか、もしくは 100 〜 900 の数値でも指定できる。数値で指定する場合は、100 / 200 / 500 / 800 のように 100 単位にしなければ正常に動作しない。

letter-spacing
文字間隔は、ピクセル単位で指定する。例:3 px を指定すると、各文字の間隔が 3 ピクセルずつになる。

background-color
背景色は、16 進数か色名のどちらかで指定する。 ここで指定する背景色は「指定したテキストの背景部分のみ」なので注意すること。


これら 4 つの属性を使えば、サイトのリンクを思い通りにカスタマイズできるようになる。複数のタグを CSS ファイルに記述する場合のコツは、新しいタグを書くときに毎回 改行することだ。すっきり見やすくなる。下のような感じだ。

Step4:まとめ

a:link {
text-decoration: none;
color: #000000;
letter-spacing: 500;
}


a:visited {
text-decoration: none;
color: #666666;
font-weight: bold;
}


a:hover {
text-decoration: none;
color: green;
background: black;
}


a:active {
text-decoration: none;
color: red;
font-weight: normal;
}


それじゃ、上のコードを外部スタイルシートに貼り付けてみよう。

どうだろうか?デフォルトのリンク色が、上記の属性とタグで指定したとおりに変化しているだろう。

この調子でカスタマイズし倒してほしい!

引用:Web Design Library著者:Joseph Skidmore翻訳:五野上



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング