web-dev-qa-db-ja.com

CSSリンクカラースタイルのベストプラクティス

リンクの色をスタイル設定するための多くのcssサンプルがあります。

html5boilerplate.com は、リンク用のこのようなCSSコードを提供します。

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }​

ほとんどの場合これで十分ですか？

それとも、リンクの色をスタイリングするためのより良いCSSコードがありますか？

csscolorshyperlink
33
webvitaly

ほとんどの場合、これで十分です。

リンクのスタイルの正しい順序は次のとおりです。

a:link           { color: #c00 }  /* unvisited links       */
a:visited        { color: #0c0 }  /* visited links         */
a:hover, a:focus { color: #00c }  /* user hovers, or focus */
a:active         { color: #ccc }  /* active links          */

outlineは「見苦しい」かもしれませんが、これは非常に重要なアクセシビリティ機能です。これを削除する場合は、現在の要素（より大きな/太いフォント、高コントラストの背景など）を適切に区別する代替方法を提供してください。

46
Zoltan Toth

ブラウザ間で異なる設定を常にリセットします。

また、外部のWebサイトへのリンクに異なる画像を追加することも好きです（ウィキペディアの画像に似ています）。

a,
a:link,
a:active,
a:visited,
a:hover {
    color:           #d30;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Links to external websites */
a.external:before {
    content:         url(./pics/external.png);
}
5
R_User

リンクをスタイリングしている（リンクではないアンカーではない）ことを確認したい場合は、aの代わりにa:linkを使用する必要があります。

最後にa:activeを追加できます。ここに tutorial があります。

4
Oriol

そのアウトラインを削除しないでください。少なくともa：activeの場合のみ削除してください。すべてのアンカーに対して行うと、キーボードナビゲーションに使用されるa：focusに対しても削除されます。また、ホバーはタッチスクリーンに表示されないため、ホバーに頼りすぎることは非常に悪いことです。

すべてのリンクを他のコンテンツから簡単に区別できるようにしたいです。これは私の個人的な好みです：

2016バージョン

/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: bolder;
    text-decoration: none;
}
a:visited { color: rgb(160,0,160); }
a:active { color: rgb(192,0,0); }
a:active, a:focus, a:hover { border-bottom-width: medium; }


2015バージョン

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(128,0,128); }
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom-width: medium; }


2014バージョン

a { border-bottom: 1px solid;
    color: rgb(0,0,166);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom: 3px solid; }


2013バージョン

a { color: rgb(0,0,166);
    font-weight: 700;
    border-bottom: 1px dotted;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:hover, a:focus, a:active { border-bottom: 2px solid; }
a:focus, a:active { color: rgb(166,0,0); }


3
tomasz86