まほ〜のあいらんどけんきゅ〜

リンクの装飾

CSSの擬似クラスを用いたリンクの装飾について見ていきましょう。 まずは、擬似クラスの指定方法です。

<style><!--a:link{color:blue}a:visited{color:navy}a:hover{color:yellow}a:active{color:red}--></style>

上記は擬似クラス別に文字の色を変える指定です。 この擬似クラスというのは、要素の状態に応じて要素の表示を変えたいときに用います。 通常のクラス指定だと、状態に関係なく指定した要素の表示を変えるだけですが、擬似クラスによって状態によって表示を変えられるというわけで、JavaScriptなどを使わずに要素に動的な変化を加えることもできます。

a:link未訪問リンク
a:visited訪問済みリンク
a:hoverオンマウスの状態
a:activeクリックした状態

CSSでは後に書いた指定の方が優先されるので、a:activea:hoverより後に書いておかないとa:hoverの方が優先されて効果がなくなってしまいます。 必ず上記の順序で指定するようにしましょう。 また、hoveractive はダイナミック擬似クラスと呼ばれ、Mozilla系のブラウザではa要素以外にも適用可能です。 (この場合、IEの方が標準とされている仕様と異なっています…というより、他の点でもIEの方が標準勧告に準拠していないことが多いです。)

それでは、具体的に見ていきましょう。 ここでは、分かりやすいようにaa:hoverだけを取り上げてみてみます。 a:hover以外の擬似クラスを指定していないときは、a要素の指定が適用されます。 (bodyタグの属性で指定してあれば、それが適用されます)

  1. 下線と色変化(text-decorationは文字の装飾のプロパティです。 noneで何もなし。underlineで下線が表示されます。)
    <style><!--a{text-decoration:none;color:aqua}a:hover{text-decoration:underline;color:yellow}--></style>
  2. 背景色を変える(iらんどの場合は改行を抜いてください。)
    <style><!--a{text-decoration:none;color:white;background:blue;width:50%;height:2em;line-height:2.0;display:block;margin:auto} a:hover{background:red}--></style>
  3. ボーダーを付ける
    <style><!--a{text-decoration:none}a:hover{border-style:outset;border-width:2px;border-color:white}--></style>
  4. 文字を大きくする
    <style><!--a:hover{font-size:xx-large}--></style>
  5. 文字を太くする
    <style><!--a:hover{font-weight:bold}--></style>
  6. 文字を斜体にする
    <style><!--a:hover{font-style:italic}--></style>
  7. 文字間隔を拡げる
    <style><!--a:hover{letter-spacing:5px}--></style>

他にもいろいろできるので、自分でCSSの本やサイトを見て工夫してみましょう。

SEO [PR] おまとめローン Windows7 冷え性対策 動画 掲示板 レンタルサーバー ライブチャット SEO