[CSS][サンプル集]実践で使えるLinkの装飾

はじめに

このページでは実際に使われそうなサンプルをすぐに使える形でまとめていきます。

基本、コード解説はしません。「前書いたあれ、どんなコードだっけ」という方向けです。いわゆる備忘録。

下線を削除

 a {
   text-decoration: none;
 }

テキスト色を変更

常に固定

a { color:black;}

未訪問の場合の色を設定

a:link { color:black;}

訪問済みの場合の色を設定

訪問済みでリンクが茶色になるのがちょっと…な人向け

a:visited { color:black;}

ボタンにする

ブロック要素にするところがみそ。下線と文字色も変更して、よりボタンに近づけましょう。

プレビュー

 a {
 /* 構造 */
 display: block;
 margin: 0;
 padding: 0;
 width: 160px;
 /* 見た目(背景) */
 background-color:gold;
 border: 1px solid goldenrod;
 border-radius: 4px;
 /* 見た目(テキスト) */
 color: white;
 text-align: center;
 text-decoration: none;
}

コメントを残す