lang=””の設定で色がおかしくなる
最近、コピーライトマーク「©」の色がおかしなWebサイトに遭遇しました。
iOSでは問題ないようですが、Androidでは色がおかしなことになってしまいます。
特にCSSの記述もなく、タグで囲まれているわけでもないので不思議な現象で、対応に困りました。
コピーライト表記全体をCSSで色指定しても効かず・・・
該当の部分だけをタグで囲み、CSSで色を指定しても効かず・・・
確認できた環境
この現象を確認できた環境は「Android 6.0」「Chrome」という組み合わせで確認できました。
Android 7.0の端末では見受けられず、Android 6.0特有のバグなのかもしれません。
「lang=”en”」にすると直る
あれこれと試したり調べた結果、head内に記述する「lang=”ja”」が原因だとわかりました。
この「lang=”ja”」を「lang=”en”」とかにすると直るのです。不思議です。
ですが「lang=””」はWebサイトの言語を指定する箇所です。
jaとする事で日本語、enとする事で英語で記述されていますよ。と宣言する部分です。
「©」の一部だけの不具合で、Webサイト全体の言語指定を変えてしまうのもおかしな話です。しかもAndroid端末だけ・・・ここまで限定的な環境のみで起こる事象であれば、他の手段をとって何とかしたいものですね。
フォントの指定を変えてみる事で解決
Androidで使う事ができる書体を指定する事で、正しく表示させることができるようです。
.copyright {
font-family: Verdana, “Droid Sans”;
}
などと記述する事で問題を解決する事ができました。
「©」だけ書体が変わってしまうと気持ちが悪いので、コピーライト表記全体の書体を変更したほうが綺麗になりそうですね。
また、指定したフォントを表示させている機械が持っていない場合は次に記述されている書体が適用されますので、更に「”メイリオ”,”Meiryo”,”ＭＳ Ｐゴシック”,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,sans-serif」なども記述しておくと良さそうですね。
®（アールマーク）も同様の現象が起こる
商標を表す「®；（アールマーク）」こちらも「©」と同様の現象が起こるようです。
なので書体を変えて、対応する必要がありますね。
OS毎にも表示確認を行う
Webサイトの表示は使っているブラウザやOSによって解釈の仕方が異なります。
表示する環境によっては、指定した書体がなかったり、解釈できる記述やCSSに差があるので、思った表示と全く同じ状態で表示させることが難しいものです。
1px程度ズレる。改行位置がズレる。句読点の幅が違う。など、微妙な差が出るものですが、ここまで微妙な違いでも閲覧には大きな影響はありません。
ですが今回のような「©、®」は明らかにおかしいです。
書体が変わり、文字色が変わってしまうので、Webサイト全体のイメージを損なう恐れがあります。
閲覧環境によって変わってしまうので、様々な環境で表示の確認を行う事は重要でしょう。
