Now Loading...

スタッフブログ

戻る

当社ブログは社員での持ち回りで掲載しております。
ビジネスだけではなく、社内イベント、プライベートなことを書いておりますので予めご承知おきください。

擬似要素[::before]や[::after]にて特殊文字・機種依存文字を表示する方法

こんにちは、さいとうです。

えー、これからCSSのとってもニッチなことについて語らせていただきますので、
興味の無い方はこちらの写真で和んでから、そっとページを移動してください。

道の駅 しらぬか恋問
−−−

擬似要素[::before]や[::after]は、指定した要素内の前後に文字を挿入するCSSです。
言葉で書いてもわかりにくいですね。

[html]
<p class=“text”>おすすめアイテム</p>

[css]
p.text::before {
  content: “【NEW】”;
}

これをブラウザで表示した結果は、

【NEW】おすすめアイテム

といった具合に、表示結果を見ると「おすすめアイテム」というテキストの前に「【NEW】」のテキストが挿入されています。

−−−

では、「【NEW】」の代わりに「>」(半角の大なり記号)を入れてみましょう。
「>」はhtmlにおいてタグを指定する時に使用するため、サニタイズ(エスケープともいいます)します。
「>」をサニタイズすると「&gt;」となります。

[css]
p.text::before {
  content: “&gt;”;
}

結果は、、、

&gt;おすすめアイテム

、、、上手く表示されませんね。
サニタイズしたテキストがそのまま表示されてしまいました。
単純なサニタイズでは表示できないようです。

これを表示するには、別の方法でサニタイズする必要があります。
その方法をご紹介します。(前フリが長くてスイマセン)

−−−

以下がその手順です。

  1. (1)サニタイズする文字列は16進数で数値文字参照を行う。
  2. (2)& を \(バックスラッシュ)に変更する
  3. (3)#とxをそれぞれ0に変更する(または削除する)
  4. (4);(セミコロン)を削除する

面倒くs…、手順が多いですね。
こちらもわかりにくいので、“>”を例に(1)〜(4)の手順を実践してみましょう。

(1)サニタイズする文字列は16進数で数値文字参照を行う。

いきなり何言っているのか不明な感じですが、ザックリ言うと文字を数字に置き換えるということです。
その際16進数の数字に置き換えるのでアルファベットが混じった数値になります。
16進数は(0123456789ABCDEF)で桁が繰り上がる数字です。

“>”を変換すると“&#x3e;”になります。

16進数で数値文字参照を行うには、こちらのサイトなどで簡単にできます。
※「[3] 文字列を16進数数値文字参照に変換」で変換してください。

(2)& を \(半角バックスラッシュ)に変更する

変換した“&#x3e;”の“&”の部分を\(半角バックスラッシュ)に変換すると、“\#x3e;”になります。

〜半角バックスラッシュが入力できないという方〜
おそらく、たくさんいらっしゃるのではないかと思います。。。
Windowsでは和文フォントに半角バックスラッシュが含まれていないので入力することができません。
一般的なWindowsキーボードの「ろ」キーで、半角バックスラッシュにあたる“¥”を入れておくと良いでしょう。

(3)#とxをそれぞれ0に変更する(または削除する)

変換すると“\003e;”になります。

ふう、あと少しです。

(4);(セミコロン)を削除する

削除すると“\003e”になります。

これをCSSに入れてみましょう。

[css]
p.text::before {
  content: “\003e”;
}

さあ、表示結果は、、、

>おすすめアイテム

今度は、上手く表示されましたか?
あまり使う機会は無いかもしれませんが、

ハートマーク(\002665)とか、
温泉マーク(\002668)とか、
郵便マーク(\003020)みたいな特殊な記号も表示できるんです。

Webフォントもじわじわと浸透してきていますが、フォントを読み込むためページの表示が重たくなりがちです。
一般的な用途の記号マークであればこの手法でも十分対応できるので、試してみる機会はあるかもしれませんよ。

−−−

擬似要素[:before]や[:after]をサポートするブラウザは、

IE8+
Firefox3.5+
Chrome
Safari4+
Opera6+

IEがIE8以上となっていますが、その他はほとんどすべてのモダンブラウザ対応しています。
一般的に使用しても問題ないと言えますね。

ただし、IE8は記述の仕方が他のブラウザと同じではありません。

CSS3において擬似要素を指定する時は beforeの前に“:”が2つ付きます。

p.text::before { color: #FFF;}

しかし、IE8はCSS3に対応していないので、CSS2の書式で書く必要があります。

p.text:before { color: #FFF;}

モダンブラウザではCSS2の書式でもとりあえず表示されますので、
IE8が主要ブラウザから外れるまでは、CSS2の書式で書いておいた方が無難かもしれません。

IE8の正式サポートは2016年1月までとなっていますので、IE8が開発環境から外れるのもそう遠くない未来ではないでしょう。
Web制作者をさんざん苦しめたIEがこれからどんどん少なくなるのは、嬉しいような少し悲しいような、、、時代の流れを感じます。

IE対応から解放されると思っているWeb制作者の皆さん、おめでとうございます!
これからは AndroidのデフォルトブラウザがIE亡き後の「困ったちゃんブラウザ」の称号を引き継ぐと思われますので、
今後とも一緒に四苦八苦しましょう。

さいとう

その他の記事

記事一覧

BitStar流

Contact Us

ご不明な点や、気になったことなど、
お気軽にお問い合わせください。

お問い合わせ

Recruit

新卒採用、中途採用、エンジニア採用、
デザイナー採用を行っています。

採用情報