コーディング

擬似要素:beforeや:afterに、特殊文字を入力する方法

2017.05.02

2017.05.13

タイピング

今回は少し限定的な状況でのお話です。コピーライトやライセンス表記に使う©や®。
通常であればコピーライトは©ライセンスは®とhtmlに入力するとそれぞれの特殊文字へと変換されますが、疑似要素の中でこれを表示しようとすると平文で©と表示されてしまいます。

今回はその、疑似要素内での特殊文字表示方法についてまとめます。

文字参照ではなく数値参照で

特殊文字を©などの文字列で呼び出すことを文字参照と言います。これは直接入力できない©や®などの文字を表示させることのできる機能ですが、同じ機能のもので数字でこれを表示する数値参照というものがあります。

先述の©と®であれば©がコピーライト、®がライセンス表示となります。

See the Pen dWWrab by hoshu_t (@hoshu_t) on CodePen.

疑似要素用に記述を変換

疑似要素に利用する場合、この数値参照を元に、記述を改変する必要があります。
改変の手順は以下になります。

  1. 数値参照を16進数で行う
  2. & を \(バックスラッシュ)に変更する
  3. #とxをそれぞれ0に変更する
  4. ;(セミコロン)を削除する

つまり©であれば\00a9と疑似要素内に表記します。
以下の例を参照ください。

See the Pen ZKKNyW by hoshu_t (@hoshu_t) on CodePen.

いかがだったでしょうか。用途を限定される情報でしたが、案件で先日これが必要となったので、備忘録の意味も兼ねてご紹介いたしました。
特殊文字や機種依存文字を擬似要素で表示させたくなったときは思い出してみてください。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。