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

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

関連記事

無線LANセキュリティ

無線LANのセキュリティ

パソコン、スマホなどの無線LAN設定画面を開くと、電波の届く ...

セキュリティのこと、しらなくて大丈夫?

ブックレビュー「サイバーセキュリティ読本」

一田和樹さん執筆の「サイバーセキュリティ読本」を読みましたの ...

デスクワークのしすぎで腰が痛い

デスクワークによる腰痛解消に効く4つのこと

一日中いすに座りっぱなしのデスクワークに従事する人が増えたせ ...

宝塚生瀬廃線後ハイキング

JR福知山線廃線敷生瀬~武田尾の紅葉ハイキング

JR福知山線「宝塚」駅の隣の駅「生瀬」駅近くのJR福知山線廃 ...