モバイルサイトのCSSで短縮カラーコード(3桁)は使ってはいけない
投稿日: 2011/12/07 更新日: 2018/11/23
CSS Mobile
CSSの短縮カラーコード（3桁）を使っていますか？
どしどし使って欲しいおススメではあるのですが、モバイルサイトでは使ってはいけない理由があるのをご存知でしょうか？
目次
短縮カラーコード（3桁）とは
HTMLで色指定するとき、#FFFFFF を、#FFF というように省略して書くことができます。
6桁を3つに分解して、後ろを省略する形です。
例えば、#FF9900 の場合は、#F90 になります。
慣れればコーディングがかなり楽になるのですが、モバイルサイトでは上手く表示されないので使わないようにしましょう。
モバイルではどう表示されるか？
モバイルサイトとは、スマートフォンではなくフィーチャーフォンいわゆるガラケーで見るWebサイトのことです。
スマホサイトは今回の注意事項はありません。
色指定3桁に対応していない機種でサイトを見るとどうなるか?!
実はすべて「黒色」になってしまいます。
とはいえすべてのガラケーがそうなるわけではなく、私が実際に確認した限りでは次の通りでした。
- docomo ... OK
- softbank ... OK
- au ... NG
3桁で書いたサンプル
最後に実際にカラーコード3桁で書いてみたHTMLを用意しておきますので、実際にアクセスして確か見てみてください。
※もしかすると最新機種で見れるようになっているかもしれませんし。
<span style="color: #FFF; background-color: #C33;">これは背景が赤色で白色の文字です</span>
ガラケーでアクセスされるときは、こちらのQRをお使いください。
https://www.banana-juice.com/tech/articles/css/attention-for-mobile
実際に検証することはとても大事ですね。
