CSSレイアウト[TIPS]
リンクの指定
セレクタ「a」で指定する
セレクタ「a」でリンク時の状態を一括指定し、その後に変化させたい疑似クラスだけを指定する方法が、シンプルで使いやすい。
例えば本サイトでは、<body>に下記の指定をしている。
a { ←リンク部分の通常時は、
color: #666666; ←文字色グレー
text-decoration: none; ←装飾無し
}
a:hover {
color: #cc0000; ←ロールオーバー時、文字は赤
}
color: #666666; ←文字色グレー
text-decoration: none; ←装飾無し
}
a:hover {
color: #cc0000; ←ロールオーバー時、文字は赤
}
このように、セレクタaで指定してあれば、4つの疑似クラス（a:link, a:visited, a:hover, a:active）を全部指定する必要はない。
4つ全部指定する時は、a:link→a:visited→a:hover→a:activeの順番で書くこと。この順番で書かないと、指定がうまく反映されない場合がある。
（注意）FireFoxでは「a:visited（訪問済み）」のスタイルは無効。
また、インラインリンク以外（ボックスにしたい）の場合は、「display: block;」の指定を忘れずに。リンクにid名やclass名を指定する
セレクタに「#id名」や「.class名」を指定することで、特定のリンク部分にスタイルを指定する事が出来る。
[ 特定のリンク部分にCSS指定をする例 ]
a .special {color: #00cc00; font-weight: bold;}
a .special:hover {color: #cc0000}
HTMLタグ↓
<a href="xxx.html" class="spacial">リンク</a>
↑リンクタグにclass(またはid)を呼び出す。
[ 特定の要素の中のリンク部分に、CSS指定を加える例 ]
a .special:hover {color: #cc0000}
HTMLタグ↓
<a href="xxx.html" class="spacial">リンク</a>
↑リンクタグにclass(またはid)を呼び出す。
#navi a {color: #00cc00; font-weight: bold;}
#navi a:hover {color: #cc0000}
HTMLタグ↓
<p id="navi">テキスト<a href="xxx.html">リンク</a>テキスト</p>
↑ボックスにid名(またはclass名)を指定。リンク部分にこのCSS指定が反映される。
#navi a:hover {color: #cc0000}
HTMLタグ↓
<p id="navi">テキスト<a href="xxx.html">リンク</a>テキスト</p>
↑ボックスにid名(またはclass名)を指定。リンク部分にこのCSS指定が反映される。