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

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

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 赤
alink/a:focus グレー

docomo
未訪問リンク 訪問済リンク リンク選択時
au
未訪問リンク 訪問済リンク リンク選択時
softbank
未訪問リンク 訪問済リンク リンク選択時

サンプルページ2

[指定方法]
link/a:link 黒
vlink/a:visited 赤
alink/a:focus ピンク

docomo
未訪問リンク 訪問済リンク リンク選択時
au
未訪問リンク 訪問済リンク リンク選択時
softbank
未訪問リンク 訪問済リンク リンク選択時

サンプルページ3

[指定方法]
link/a:link 黒
vlink/a:visited 赤
alink/a:focus 指定なし

docomo
未訪問リンク 訪問済リンク リンク選択時
au
未訪問リンク 訪問済リンク リンク選択時
softbank
未訪問リンク 訪問済リンク リンク選択時

個人的には

alink、a:focusはいつも使いません。
使う色を間違えると非常に残念な感じになります...

link/a:link とalink/a:focusに同じ色を指定するのは絶対ダメ。docomoでリンクフォーカス時に文字が見えなくなるので要注意!です。

トラックバックURL

コメントする


匿名でも本名でもなんでも。


公開されません。


ブログやホームページなどありましたら。


コメントは承認制となっております。公開までしばらくお待ちくださいませ。

サイト内検索
モバイルサイト
これからゆっくり考L:QRコード

このページのトップへ