未経験でも転職出来る!!Web制作者になった元飲食店員が語るBLOG

  1. Web制作について
  2. Web制作でよく使う「特殊文字」を紹介

Web制作でよく使う「特殊文字」を紹介

どうも、Tommyです。

Web制作していると、『特殊文字』を扱う機会が多いかと思います。私もよく使うので、個人的に使用度が高い特殊文字を記事に載せておこうと思います。

どういう時に特殊文字を使うか

HTMLファイルにて使用します。普段タグで使用している『<』や『>』をテキスト内などで使用する時、記号のまま使用するとタグで扱われるものとHTMLは認識してしまう恐れがあるためエスケープ処理を行います。

また、機会依存文字というものもあり、OS環境に依存され異なる環境で表示させた場合、『文字化けや誤作動』を引き起こすことがあります。

そうならないために、特殊文字・機会依存文字はエスケープ処理を行わなければなりません。

使用度が高い特殊文字の表

ここでは、個人的に使用度が多いなと感じている特殊文字・機会依存文字を中心としたものを表で表しております。ここにない特殊文字・機会依存文字も山ほどあります。もし、探している文字がない場合は検索してみてください。

記号 コード 説明
< &lt; タグで使用している記号。コードを表示したい時など使用しましょう。
> &gt;
& &amp; 半角アンドマークを使用する際はこちらを使いましょう。
© &copy; コピーライトで使用します。
  &nbsp; 改行されない空白文字。スペースキーをいくつ打っても出力されるのは1つだけのため2つ以上スペースを開けたい場合使用する。主に、使用する場面はテーブル表にて部分だけ空白箇所がある場合この特殊文字を使用したりします。
① 〜 ⑳ &#9312; 〜 &#9331; &#9312; &#9313; &#9314;っと続きます。たまに使用するかなくらいですが、紹介しました。
« &laquo; こちらもたまに使用するので。
» &raquo;

上記の表は横スクロールします。

こんなところでしょうか。必ず使用するのは、©ですね。たまにWebサイト見ているとエスケープ処理をされていないサイトがあります。ここだけでも、初心者かどうか判断できますね。プロは絶対にしません。

ただ、検証ツールでは変換されている状態で表示されます。

特殊文字になっているか確認したい場合は、

ソースを確認することで、ちゃんとコードとして表示されていることがわかります。コードで書かなくても、表示されたりはしますが思わむ時に文字化けなどエラーが出る場合があるのでちゃんとコードで書くようにしましょう。

まとめ

少しめんどくさい部分はありますが、こういったものもあるということだけでも覚えておくといいでしょう。使用するのはだいたい決まってきますので、覚えてしまうかメモ帳などに書いておいて使う時にコピペできるようにしていると制作する際楽かと思います。