[携帯]xhtmlのﾘﾝｸ指定方法～cssとbodyの違い : これからゆっくり考L +α

[携帯]xhtmlのﾘﾝｸ指定方法～cssとbodyの違い

by sakaki0214[Mobile]
2009-11-20 13:54:17

結論から言ってしまうと､｢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ｺｰﾄﾞ>
→ｻﾝﾌﾟﾙﾍﾟｰｼﾞを見る

<画像：ﾘﾝｸの文字色と下線の色が同一のｻﾝﾌﾟﾙ画像>
iﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0以外の見え方

こうすることによって､iﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0以外の端末で見たときに､ﾘﾝｸの文字色と下線が異なるといったことが発生しなくなります｡ちょっと面倒ですけど｡

iﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0に関しては...恐らく仕様上変更できないと思います｡

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

ｺﾒﾝﾄ(5)