検索サイトのリンクの色の比較

最適 なテキストリンクの色は？ | ウェブ力学に触発されて、大手検索エンジンの検索結果ページのリンクの色を調べてみた。


調査結果

	Google	Yahoo! JAPAN	Yahoo!	Bing
a	#1111CC	#0000DE	#0000DE	#0033CC
a:visited	#551A8B	#941D55※	#551A8B	#663399
a:active	#CC1111	#663399	#0000DE	指定なし
a:hover	指定なし	#CC3434	指定なし	指定なし

※Yahoo! JAPANのvisitedは、検索結果のリンクをクリックした後の色。再度検索すると、同じ検索結果でもvisitedにならない（また青色に戻る）。


所感

• Yahooは本家と日本で違う。
• hoverの指定をしないのが主流なのが意外だった。
• activeも指定しない方向で？
  
• Bingが一番すっきりしていて好き。

また、こんな調査結果もあった。

• 何事も普通が一番 - 検索エンジンにみるリンク色の違い - blog::tani.masaru
  
• 「:link」「:visited」について、どのような場合に必要な、どのように見せるのかを考える - blog::tani.masaru

自分が調べたのとちょっと違う。検索サイトも細かい改良をし続けているということかな？

CSSによる背景色グラデーションのブラウザごとの書き方

例えば、上から下に白から青のグラデーションを表示したい場合はこう書く。（省略可能なパラメータは省略した。）

/* IE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff)";

/* Firefox */
background: -moz-linear-gradient(white, blue);

/* Chrome, Safari */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(blue));

IE8は右辺をクォートで囲う必要があるので注意。

IE以外は、詳細な指定をすれば複数の濃淡を指定できたり球状の効果を表現できたりと色々できる。

Operaは未対応らしい。


参考
IE：Gradient - filter,フィルタ
Firefox：-moz-linear-gradient - MDC
Chrome, Safari：CSSでグラデーションを表現する - builder by ZDNet Japan

バリアフリーな色セット（8色）のRGB値の例

色盲の人にもわかるバリアフリープレゼンテーション法の「色盲の人にも色盲でない人にも見やすい色のセット」を、CSSで書きやすいようにRGBを"#xxxxxx"形式にしたみた。

※あくまで参考例の1つとして。

RGBとCMYKの値の関係はパソコンの機種やOS、使用ソフト、画像の色管理情報（プロファイル） の種類等によってかなり変化するので、この図の値はあくまで参考です。

from 色盲の人にもわかるバリアフリープレゼンテーション法

	色	RGB
	黒	#000000
	オレンジ	#e69f00
	水色	#56b4e9
	青みの強い緑	#009e73
	黄色	#f0e442
	青	#0072b2
	朱赤	#d55e00
	赤みの強い紫	#cc79a7

カラーユニバーサルデザイン推奨配色セットも推奨するRGB値を出す方向らしいので期待したい。

IEと Firefoxと grayと grey

色として灰色を指定する場合、Firefoxではアメリカ流の"gray"でもイギリス流の"grey"でも、どちらでも表示できる。
しかし、IEでは"gray"しか対応していないので注意。

もっと注意なのが。薄灰色。IEではgrayへの対応とは反対に、なぜか"lightgrey"の方しか対応していない。



Firefoxの場合

IE7の場合（IE6も同様だった）

参考：
　Remember grey!=gray in IE CSS! - Democratic Underground
　灰色 - Wikipedia