[携帯]リンク色の指定方法、フォーカス時の各キャリア表示差異 │ これからゆっくり考L +α

[携帯]リンク色の指定方法、フォーカス時の各キャリア表示差異

モバイルサイトでリンク色を指定するには、htmlの場合はbodyタグ内に記述、xhtmlの場合はhead内に記述する必要があります。

<body link="#000000" vlink="#ff0000" alink="">

・link 通常のリンク色
・vlink 訪問済みのリンク色
・alink フォーカス時のリンク色

<head>
...
<style type="text/css">
<![CDATA[
a:link{color:#000000;}
a:visited{color:#666666;}
a:focus{color:;}
]]>
</style>
</head>

・a:link 通常のリンク色
・a:visited 訪問済みのリンク色
・a:focus フォーカス時のリンク色

未選択時のリンク色はどのキャリアも同じ表示ですが、選択時の文字色、背景色は各キャリアによって表示が異なります。

サンプルページ

QRコード
→サンプルページを見る

html版、xhtml版を作成しています。各ページの指定方法は以下の通りです。

[サンプルページ1]
通常リンク色は黒
訪問済リンク色は赤
フォーカス時のリンク色はグレー

[サンプルページ2]
通常リンク色は黒
訪問済リンク色は赤
フォーカス時のリンク色はピンク

[サンプルページ3]
通常リンク色は黒
訪問済リンク色は赤
フォーカス時のリンク色は指定なし

リンクフォーカス時の各キャリア表示差異

docomo

html

[文字色]
alinkで指定した色。alinkの指定がない場合、フォーカス時のリンク文字色はそのテキストの背景の色。
[背景色]
link（訪問済みリンクの場合はvlink）で指定した色。

xhtml

[文字色]
a:focusで指定した色。a:focusの指定がない場合、フォーカス時のリンク文字色はそのテキストの背景の色。
[背景色]
a:link（訪問済みリンクの場合はa:visited）で指定した色。

au

html

[文字色]
背景色の反転（？）色。制御不可。
[背景色]
link（訪問済みリンクの場合はvlink）で指定した色。

xhtml

[文字色]
背景色の反転（？）色。制御不可。
[背景色]
a:link（訪問済みリンクの場合はa:visited）で指定した色。

auではフォーカス時の文字色の制御ができません。
alinkは効かずにlink（vlink）で指定した色が背景色となり、その反転色が文字色となります。その反転色は白になる場合もありますが（リンク背景色が黒の場合など）、このような感じの色になる時もあります。視認性の悪いフォントカラーになる時がありますが...どうしようもないです。