2017年4月12日水曜日

特殊文字、機種依存文字

html特殊文字とは、ホームページに表示するため、html内に記載する場合、そのままの記号、文字ではホームページ上でうまく表示されない記号、文字のことです。

例えば、<は、html内では、コードの開始タグであるため、タグではなく記号文字として扱いたい場合は、決められた数値などの表現で表示させます。
ブログなどで、¥や、&は安易に使ってしまいがちですが、ブラウザによって文字化けすることがあるので注意が必要です。

似たようなもので、機種依存文字というのもあります。
これはパソコン、スマホの機種や、OSの違い(Mac、Windows)によって文字化けをおこす文字のことです。

こちらのサイトにうまくまとめられています。

→みんなの知識ちょっと便利帳

ところで、ホームページ上で、ボタンを表示させる場合、スマホでもきれいに軽く表示させるため、ボタンを画像ではなくcssで装飾することがあります。
css3を使うと、グラデーションやドロップシャドウが使えますので、立体感のあるボタンを表示させることができます。

こちらのようなジェネレーターを使うと簡単に制作できます。

→css3generator

ボタンを表示させてみました。でも何か物足りない・・・矢印があればなあなんて思います。
そんなとき、使えるのがさきほどの特殊文字です。
特殊文字の矢印→をボタンに表示させてみます。

htmlはいじらず、cssのbefore/after疑似要素で表示させます。

この疑似要素は、htmlには記載されていないものをcssだけで表示させるという便利なものです。
beforeでしたら要素の前、afterでしたら要素の後に基本的には表示させます。
そして表示させたいものをcssのcontent:" "の中に入れます。先ほどの矢印→の数値文字参照コードを入れて表示させますが、このままではうまく表示されません。

まずは特殊文字を16進数に変換する必要があります。
文字列を16進数に変換するには、こちらのサイトが便利です。

→文字列と数値文字参照(文字参照)の変換

→を16進数に変換すると&#x2192;です。
次にこれを加工します。
&は¥に変換。#は0に変換。xは0に変換。最後のセミコロンは削除します。
すると¥002192になります。この数値の列をcssのcontentに入れます。そして、親要素であるbuttonからの位置をposition、abusoluteで決めます。

ただのボタンより矢印があることで少し締まるような気がします。画像でボタンを作ったほうが早いという感じもありますね。
でもスマホでもきれいに表示され、軽いということで色々なサイトで使われているようです。

関連記事

youtube関連動画を非表示設定ができない場合の解決方法

YouTube関連動画非表示設定がうまくいかない場合の解決法

関連動画とは? 関連動画の非表示設定について 関連動画が非表 ...

無線LANって何?

無線LANって何?

インターネットの普及で色々な通信用語を耳にします。 何となく ...

paypal設定はデビットカードが便利

デビットカードでPayPalを設定して海外のネットショップで欧文フォントを購入!

海外の販売サイトの決済は、クレジットカード決済またはPayP ...

格安SIM事業者が分からなくなったときの解決法

格安スマホのSIM事業者が分からなくなったときの解決方法

具体的な依頼内容 SIM事業者を調べるために試した方法 SI ...