Unformed Building

テキストをCSS用にエスケープするオンラインツールを作ってみた

公開:
更新:

パーマリンク

テキストをCSS用にエスケープするツールを作ったので、一応紹介しておきます。

CSSのcontentプロパティなどでテキストを書くときなど、そのまま書いてもいいのですが、日本語などの場合は文字コードが面倒くさいのでエスケープした文字列を入れておくと便利だと思っています。
font-familyの指定とかに使うこともあるかもしれません。

この辺の話はWebTecNoteさんの「[css] contentプロパティで挿入できるコンテンツ」という記事が分かりやすいです。

で、上記リンク先にも今回作ったものと似たような変換機があって、以前はよく使わせてもらっていたのですが、何と言うか、練習も兼ねて自分で作ってみたいと思ったわけです。
まあ自分なりに使いやすいものができたかと思います。

Text Escaping for CSS

使い方は上のテキストエリアに好きな文字列を入れるだけです。
あ、改行も変換されますので注意してください。
書いたものが変換されない場合、一旦フォーカスを外すなどして下さい。
それと、多分IE 8未満では動きません。

とかとかみたいなのでも大丈夫です。
こういう文字は『i2Symbol』でたくさん見られますので、そういうところで探すといいんじゃないでしょうか。

元は自分用に作ったツールですが、よかったら使ってみてください。
あ、あと、テキストのエンコードなら下の2つがお勧めです!