More than 1 year has passed since last update.

CSSの疑似要素内で特殊文字を使いたい時の注意点

Posted at 2023-05-29

皆さんはコーディングをする中で特殊文字を使用した事はありますでしょうか？
特殊文字というと種類は様々ですが、
よく目にするので有名なのはコピーライトや商標登録のマークでしょうか。

特殊文字の多くは基本的にキーボード上で打つ事が出来ないのが多く、
「文字実態参照」や「数値文字参照」と呼ばれるコードを用いて表します。

私は現場で特殊文字を使う機会が多いのですが、いつもはHTML上にて数値文字参照を使用して特殊文字を表示させておりました。
この度、CSSの疑似要素（after、before）を使ってcontentプロパティで特殊文字を表示させたい案件が来まして、
いつも通り数値文字参照にて変換しようと試みたのですが……

<body>
    <div id="sample">
        左に特殊文字が入ります。<br>
        「&#0174;」はHTMLに記述してます。
    </div>
</body>

#sample::before {
    content: "&#0174";
}

入力した文字がそのまま表示されてしまう事態が発生しました。
※サンプルでは分かり易い様に疑似要素の部分にグレーの背景色を敷いております。
　また、CSSはcontentプロパティ以外は記載を省略してます。

調べた結果、contentプロパティに特殊文字を使用する際は特定のルールに沿って変換する必要があるという事が分かりました。

自分が調べた範囲で分かったのは以下のルールです。

1.「#」は「0（数字のゼロ）」に変換
2.「&」は「\（環境によってはバックスラッシュ表示）」に変換
3.「数字」は「10進数」ではなく「16進数」に変換
4.「;（セミコロン）」は省略する

なので、例えば商標登録のマークを表示させたい場合は

#sample::before {
    content: "&reg;"; /* 文字実態参照の場合 */
    content: "&#0174"; /* 数値文字参照の場合 */
}

上記の様に入れるのではなく、

#sample::before {
    content: "\00AE"; /* ルールに沿って変換した場合 */
}

この様に表記する事で実際のWebページに表示させる事が出来ます。

使う機会は非常に限定的かと思いますが、知らずにいざ直面すると原因を探るのに時間をかけてしまう事もあるので頭の片隅にでも覚えておくと良いかもしれません。

▼一覧表を掲載されているサイトもご紹介しておきます。

「IT技術を身に着けようブログきまぐれアップデート」
・content で使える特殊文字コード CSS

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up