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

by sakaki0214[Mobile]
2009-11-09 03:48:50
[ページ移動: 1 2]

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

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

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

サンプルページ

<画像: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)で指定した色が背景色となり、その反転色が文字色となります。 その反転色は白になる場合もありますが(リンク背景色が黒の場合など)、このような感じの色になる時もあります。視認性の悪いフォントカラーになる時がありますが...どうしようもないです。

softbank

html

[文字色]

[背景色]
alinkで指定した色。alinkの指定がない場合はlink(vlink)で指定した色

xhtml

[文字色]

[背景色]
a:focusで指定した色。a:focusの指定がない場合はa:link(a:visited)で指定した色

softbankはリンクフォーカス時の文字色は常に「白」。ってことは、背景色に白を指定した場合、つまりalink、a:focusを白にするとどうなるかというと、その場合はこういった感じになります。強制的にデフォルトの青い背景に...なります。

まとめ

各サンプルページの表示はこんな感じになります。

サンプルページ1

[指定方法]
link/a:link 黒
vlink/a:visited 赤

[ページ移動: 1 2]

[*]前の記事 | [#]次の記事
TOP



Powered by MT4i 3.0.8X1
携帯アクセス解析