「PCではCSSで色をつけたチェックマーク（✔）が、スマホで見ると勝手に黒くなっている…」
「color: red; と指定しているのに、なぜかCSSのスタイルが無視され、iPhoneの絵文字のような、テカテカした立体的なチェックマークが表示されてしまう…」
そんな経験はありませんか？
実はこれ、CSSのバグではなく、スマホ特有の「絵文字の仕様」が原因なんです。
今回は、その理由と、一瞬で解決する魔法のコードをご紹介します。
原因はスマホの「おせっかい」機能？
スマホ（特にiPhoneなどのiOS端末）は、特定の記号を見つけると
「これはテキストじゃなくて、リッチな絵文字で表示したほうがいいよね！」
と自動で判断してしまいます。
これを「絵文字プレゼンテーション」と呼びます。
絵文字として描画されると、それは「文字」ではなく「画像」に近い扱いになるため、CSSの color プロパティが効かなくなってしまうのです。
解決策：魔法のコード「︎」を添えるだけ
最も簡単な解決策は、チェックマークのすぐ後ろに ︎ というコードを書き加えることです。
具体的なコード
<span>✔</span>
<span>✔︎</span>これは何？
これは「バリエーション・セレクター（異体字選択子）」と呼ばれる命令の一つです。
︎：「この文字をテキストスタイルで表示して！」️：「この文字を絵文字スタイルで表示して！」
これを末尾に付けるだけで、ブラウザに「勝手に絵文字にしないで、普通の文字として扱ってね」と伝えることができます。
その結果、CSSの色指定がしっかり反映されるようになります。
他の絵文字にも使える？
この方法は、チェックマーク以外にも以下のような「歴史の長い記号」に有効です。
- 矢印系: ➡、⬅、⬆
- 記号系: ⚠（警告）、✉（メール）、☎（電話）、❓（はてな）
- 数字系: 1、2、3…
ただし、比較的新しい絵文字（😀 や 🍎 など）は、そもそも「テキスト用のデザイン」がシステム内に用意されていないため、このコードを使っても色が変わらない（あるいは文字化けする）ことがあるので注意しましょう。
もっと確実にデザインを統一したいなら
「どのデバイスでも100%同じ色・形で見せたい」という場合は、文字としての絵文字を使うのではなく、以下の手法を検討するのが制作現場では一般的です。
- SVG画像を使う: ベクターデータなので、色も形も自由自在。拡大しても綺麗です。
- CSSで自作する:
borderを組み合わせて「L字」を作り、回転させることでチェックマークを表現します。 - アイコンフォント: Google Fonts (Material Symbols) などを使えば、文字と同じ感覚で扱えます。
まとめ
スマホでチェックマークの色が黒くなってしまうのは、スマホが良かれと思って絵文字に変換しているからでした。
まずは手軽な ︎ を試してみて、それでもダメならSVGやCSS自作に切り替える、というステップがおすすめです。
サイトの中でチェックマークを使っているなら、一度確認してみましょう。