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で決めます。

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

関連記事

大阪城公園

同じ風景を一眼レフカメラ、スマホカメラで撮った場合の比較

一眼レフカメラで撮影した写真 スマホのカメラで撮影した写真 ...

内部ブログと外部ブログの違い

サイト内ブログとサイト外ブログってどっちがいい?

ブログには大きく分けて、サイト内ブログとサイト外ブログとがあ ...

わぷー

WordPressとは?

WordPressを使ってブログ、サイトを制作すると、簡単に ...

著作権について

他人の写真を勝手にコピペしたら法律違反ってほんと?

著作権とは 「著作権」は、文化的な創作物を保護の対象とするも ...