ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング