投稿日：2007年9月21日　　　レベル：初心者　　　　ソフトウェア：-

---

もう知っているかもしれないが、リンクには 4 種類のオプションがある。通常のリンクの色、マウスオーバーしたときのリンクの色、一度クリックした後のリンクの色、そしてアクティブリンク (クリックしている最中のリンク) の色だ。

• Step1 ： ブラウザとコード
• Step2 ： ソース
• Step3 ： 解説
• Step4 ： まとめ

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

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




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

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

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 ファイルに記述する場合のコツは、新しいタグを書くときに毎回 改行することだ。すっきり見やすくなる。下のような感じだ。



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

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

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

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

スポンサードリンク