[携帯]xhtmlのリンク指定方法〜cssとbodyの違い │ これからゆっくり考L +α

[携帯]xhtmlのリンク指定方法〜cssとbodyの違い

結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。

<body link="#5994FF" vlink="#59E2FF">

<style type="text/css">
<![CDATA[
a:link{color:#5994FF;}
a:focus{color:;}
a:visited{color:#59E2FF;}
]]>
</style>

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

bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？
って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。

まずは予備知識として

docomoのiモードブラウザ1.0では、CSSを使う場合はインラインに記述する必要があったのですがく（リンクの疑似クラスのみhead内に記述することができます）、iモードブラウザ2.0ではhead内もしくは外部ファイルに書いたCSSも効くようになりました。

※「iモードブラウザ1.0」2008年秋冬モデル以前
※「iモードブラウザ2.0」2009年春夏モデル以降

docomoとソフトバンクのリンク色の仕様として、aタグの内側に文字色の指定をしてもリンクの下線の色はbodyないしcssで指定した色が適用されてしまいます。

リンクの文字色と下線の色が異なるのサンプル画像

classを使ってリンク色を指定することによって、この「リンクの下線の色」もリンク色と同一色にすることができます。

iモードブラウザ1.0の為にaタグの内側にspanタグで文字色指定もしておきます。

<style type="text/css">
<![CDATA[
a:link {color:#FF71BA;}
a:focus {}
a:visited {color:#FF71BA;}

a.orange:link {color:#ff6600;}
a.orange:visited {color:#ff6600;}

a.blue:link {color:#3366FF;}
a.blue:visited {color:#3366FF;}
]]>
</style>
・
・
・
<a href="#">リンクサンプルです</a><br />
<a href="#" class="orange"><span style="color:#ff6600;">リンクサンプルです</span></a><br />
<a href="#" class="blue"><span style="color:#3366FF;">リンクサンプルです</span></a><br />

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