tande lab.

[CSS] リンク<a>のスタイルを変更する

リンクテキストの色などスタイルをCSSで変更する方法です。
これも 前記事の<hr> に引き続き、毎回ぐぐって調べていたのでメモしておくことにしました。

<a>のスタイル設定例

a{ /*リンクされた文字*/
    color:0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:link { /*未訪問のリンク*/
    color:0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:visited { /*訪問後のリンク*/
    color:#934C7B;
    text-decoration:underline;
}
a:hover { /*マウスをのせたとき*/
    color:#ff0000;
    font-style:normal;
    text-decoration:underline;
}
a:active { /*クリック中*/
    text-decoration:none;
}

順番も大切で、上記の順で書かないとうまく反応しないことがあるそうです。要注意!

"text-decoration"で指定できるスタイル一覧

スタイル名説明表示例
none装飾なし。
何も設定しない場合、これになります。
あいうえお
underline下線がつきます。
リンクテキストでよく見かけるやつです。
あいうえお
overline上線がつきます。
用途があまり思いつきません。。
あいうえお
line-through打ち消し線がつきます。あいうえお
blink点滅します。
ブラウザ依存が激しいので推奨しません。
これを使ってるかっこいいサイトを
見かけたことがありません。
あいうえお

参考サイト

以下のサイトを参考にさせてもらいました。




1 comment
  1. […] [CSS] リンク<a>のスタイルを変更する […]

Submit comment