Debriefing [デブリーフィング]

Debriefing[デブリーフィング]は都内で働く20代Web系男子が運営するブログメディア。Web制作に関すること、恋愛、仕事、ライフハック、などについて情報を発信していきます。

Android端末だと©(コピーライト)にCSS指定が適用されない原因と解決方法

Android端末だと©(コピーライト)にCSS指定が適用されない原因と解決方法

スマートフォンのコーディングをした後にAndroid端末でレイアウトを確認した時に、フッターの©(コピーライト)だけCSSが適用されない現象がおきました。

どうやら©以外にも®(登録商標)にも起きるようです。今回はAndroid端末でおきる©のバグを解消する方法について書いてきます。

 

目次

現象

AndroidだとコピーライトにCSSが適用されない

具体的な現象は画像のような状態です。

コピーライトの文章全体に色をCSSで適用したいと思っていましたが、なぜか©の部分だけ色が変わってくれません。
ちなみにiPhone(iOS)ではこのような現象は起きません。
昔に比べたらAndroidのブラウザバグは少なくなった印象がありますが、まだまだ細かい点が治っていないところもあるようですね。

原因

原因を調査してみたところ、どうやらHTMLのlang属性を「ja」(Japanese)にしているとなるようです。

<html lang="ja">

lang属性を「en」にすると治ります。
どうやら©はAndroidにインストールされている日本語フォントではCSSの指定が効かないみたいです。

lang属性とはそのHTMLが何語で書かれているかを示すために使用します。英語で書く場合は「en」(English)です。

それならlang属性を「en」にすれば一発解決するのでは?と思いがちですが、「en」にしてブラウザで確認するとGoogleの自動翻訳機能のポップアップが起動してしまい、かえってユーザービリティを落としてしまいますし、そもそもHTMLの記述ルールに沿っていません。

解決方法

解決方法は©を指定しているタグのfont-family(フォントファミリー)をAndroidで使える欧文フォントに変更してあげることで解決することができます。

Androidにインストールされているフォントは「Roboto」や「Droid Sans」が搭載されているので、これらをCSSのfont-familyで指定してあげれば解決できます。

HTML

<div class="copyright">© All Rights Reserved.</div>

CSS

.copyright {
  font-family: Roboto, Arial, Helvetica, Tahoma, Verdana;
  color: #ff0000;
}