iPhone で「♥（黒塗りハート）」が絵文字になってしまう問題

ウェブ制作ノウハウ

2014.11.03

この記事は約3分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

先日、スマホ用サイトを作っていました。

その時に、ドロップダウンリスト <select> に
「♥︎（黒塗りハート）」を使ったのですが
iPhone でそのハートが絵文字になってしまう問題に遭遇。

自分なりに調べたところ無事解決できたので
記事に残しておこうと思います。

iPhoneで「♥︎（黒塗りハート）」が絵文字になる

HTML でドロップダウンリスト <select> に
「♥︎（黒塗りハート）」を使用すると
選択時に iPhone の絵文字で表示されてしまいます。

実際の画面がこちら。
ページ上では黒塗りのハートですが
選択肢では絵文字のハートになっています。

iPhone が使っているフォントの関係でこうなるようです。

ちなみに、「♡（白抜きハート）」は問題なく
絵文字に変換されずそのまま普通に表示されます。

iPhone でテキストファイルに黒塗りハートを打ち
そのファイルを PC に転送して調べてみました。

すると、普通の黒塗りハートの後ろに
見えない文字が付いていることを発見。

その文字は、Unicode の「FE0E」に割り振られている「VS15」。
「VS15」という文字が出るわけではなく
「VS15」という意味を持つ見えない文字です。

この「VS15」が黒塗りハートの直後に付くと
絵文字のハートになるのを防ぐ効果があるようです。

この「VS15」なる文字を入力するには数値文字参照を使います。
HTMLソースに「︎」または「︎」と打つことで
「VS15」を入力できます。
（前者は10進数、後者は16進数での入力）

iPhone でテストした結果がこちら。

実際の表示を確認したい人はこちらのページヘ。

iPhone で絵文字になる文字は
「♥︎（黒塗りハート）」以外にも
「☎︎（電話）」「♨︎（温泉）」「♍︎（星座）」など多くあるようです。
詳しくは下記ページを参照して下さい。

これらの文字も、前述の説明と同様
直後に「VS15（︎ ︎）」を付加することで
絵文字になるのを防げます。

また、「VS16（️ ️）」を付加した場合は
強制的に絵文字になるようです。