特殊文字を使ってcssボタンを装飾
html特殊文字とは、ホームページに表示するため、html内に記載する場合、そのままの記号、文字ではホームページ上でうまく表示されない記号、文字のことです。
例えば、<は、html内では、コードの開始タグであるため、タグではなく記号文字として扱いたい場合は、決められた数値などの表現で表示させます。
ブログなどで、¥や、&は安易に使ってしまいがちですが、ブラウザによって文字化けすることがあるので注意が必要です。
似たようなもので、機種依存文字というのもあります。
これはパソコン、スマホの機種や、OSの違い（Mac、Windows）によって文字化けをおこす文字のことです。
こちらのサイトにうまくまとめられています。
ところで、ホームページ上で、ボタンを表示させる場合、スマホでもきれいに軽く表示させるため、ボタンを画像ではなくcssで装飾することがあります。
css3を使うと、グラデーションやドロップシャドウが使えますので、立体感のあるボタンを表示させることができます。
こちらのようなジェネレーターを使うと簡単に制作できます。
ボタンを表示させてみました。でも何か物足りない・・・矢印があればなあなんて思います。
そんなとき、使えるのがさきほどの特殊文字です。
特殊文字の矢印→をボタンに表示させてみます。
htmlはいじらず、cssのbefore/after疑似要素で表示させます。
この疑似要素は、htmlには記載されていないものをcssだけで表示させるという便利なものです。
beforeでしたら要素の前、afterでしたら要素の後に基本的には表示させます。
そして表示させたいものをcssのcontent:” “の中に入れます。先ほどの矢印→の数値文字参照コードを入れて表示させますが、このままではうまく表示されません。
まずは特殊文字を16進数に変換する必要があります。
文字列を16進数に変換するには、こちらのサイトが便利です。
→を16進数に変換すると＆＃ｘ2192；です。
次にこれを加工します。
&は¥に変換。#は0に変換。xは0に変換。最後のセミコロンは削除します。
すると¥002192になります。この数値の列をcssのcontentに入れます。そして、親要素であるbuttonからの位置をposition、abusoluteで決めます。
ただのボタンより矢印があることで少し締まるような気がします。画像でボタンを作ったほうが早いという感じもありますね。
でもスマホでもきれいに表示され、軽いということで色々なサイトで使われているようです。
