2017/06/08

CSSの忘備録「擬似要素:contentに文字化けせずに全角を設定する」

Web制作早川朋孝
CSSの擬似要素:contentに全角を入れたら文字化けした

こんな経験をしたWebデザイナーやhtmlコーダーが少なからずいるはずです。半角ならそのまま入力すればいいのですが、全角の場合は一手間かければ、contentの中身を文字化けせずに設定することができます。

contentの中身を文字化けせずにする方法はとっても簡単。全角文字をそのままではなく、数値文字参照は16進数で入力すればOKです。数値文字参照に関しては、変換スクリプトがネット上にあるので、それを使うと便利です。例えばこちらのサイトなどに変換ツールがあります。変換ツールはだいたいどのウェブサイトも、以下のように入力内容と変換後の文字が表示されるようになっています。

記入例

疑似要素contentの中身は例えば以下のように記述します。これで煩わしい文字化けとおさらばできます。

.class:before { content:"" }

この記事を書いた人
浜田 友世
公立はこだて未来大学卒。エスキュービズムに新卒入社。入社後、エスキュービズム・テクノロジーにて製品サイトのデザイン、マーケティングを担当。サイト構成考案、デザイン、コーディングから、ディレクションまでを経験。現在はエスキュービズム通商のマーケティンググループにて、Webだけでなく製品のパンフレットやチラシなどのグラフィックデザインも任されている。
この記事を書いた人
早川 朋孝

上場企業へのCMS提案・導入経験が多数あり、「あかもん」の使い方を120%マスターしている。豊富な運用経験に基づくサポートに自信がある。ワードプレス、MT歴はどちらも10年を超えるがCMSの魅力は「あかもん」のほうが上と確信している。趣味は読書など。
ウェブマーケティングブログ
facebook twitter


PAGE TOP
お問い合わせはこちら

記事に関する疑問やCMSに関するご質問など、お気軽にお問い合わせください