[携帯]カラーコードを3桁で指定するとどうなるか
背景色、文字色は通常6桁のカラーコードで指定しますが、CSSでは省略して3桁で書くことができます。
では、htmlで3桁のカラーコードを使っちゃうとどういうことになるか、というのをキャリア別にチェックしてみました。
先に結論を言ってしまうと、
「HTMLでカラーコード3桁は使うな」
ということなんですが、実際自分がつい使っちゃったことがあってしばしはまった経験があるので...一応書き残しておこうと思った次第です。
サンプルページ
QRコード
→サンプルページを見る
3桁でカラーコードを指定するとどうなるか
bodyタグに背景色をカラーコード3桁で指定
<body bgcolor="#333">
docomo(iモードブラウザ1.0)
[F-09A]背景が真っ黒になります。
[SO903i]背景が真っ白になります。
[D902i]背景が真っ白になります。
docomo(iモードブラウザ2.0)
[F-03B]背景が真っ黒になります。
au(W63K)
指定通りの背景色になります。
softbank(930P)
背景が真っ黒になります。
bodyタグに文字色、リンクカラーをカラーコード3桁で指定
<body bgcolor="#333" text="#666" link="#f00" vlink="#f00">
docomo(iモードブラウザ1.0)
[F-09A]文字色、リンク色、共に黒になります。
[SO903i]文字色は黒、リンク色は青になります。
[D902i]文字色は黒、リンク色は青になります。
docomo(iモードブラウザ2.0)
[F-03B]文字色、リンク色、共に黒になります。
au(W63K)
指定通りの文字色、リンク色になります。
softbank(930P)
文字色、リンク色、共に黒になります。
fontタグに文字色、リンクカラーをカラーコード3桁で指定(htmlの場合)
<font color="#fff">サンプルテキスト</font><br />
<a href="#"><font color="#f00">サンプルテキスト</font></a>
docomo(iモードブラウザ1.0)
[F-09A]文字色、リンク色、共に黒になります。
[SO903i]文字色は黒、リンク色は青になります。
[D902i]文字色は黒、リンク色は青になります。
docomo(iモードブラウザ2.0)
[F-03B]文字色、リンク色、共に黒になります。
au(W63K)
指定通りの文字色、リンク色になります。
softbank(930P)
文字色、リンク色、共に黒(背景と同化していて全く見えない)
まとめ
冒頭で結論は既に言っちゃいましたが、
「HTMLでカラーコード3桁は使うな」
です。
CSSであっても3桁での記述はdocomoのちょっと前の端末でうまく反映されないようです。なので、携帯ではカラーコードを3桁に省略せずに、きちんと6桁での記述がよいと思われます。