こんにちは、なっちる先生(@nacchi_jagariko)です。
特殊文字覚えてません、現役フリーランスエンジニアです。
今回は、html内で使う特殊文字とは何か、よく使う特殊文字は何か話していきます。
この記事は、以下のような人向けです。
特殊文字って何?よく使う特殊文字は?
では、参りましょう。
特殊文字とは
まず、特殊文字とは簡単に言ってしまえば、特殊な文字をパソコンが情報処理しないように特殊な文字に置き換えたものになります。
特殊と文字使いすぎて意味わかめw
この説明じゃ分かりズラいと思うので、例を出して説明します。
例えば、htmlを書いていると、タグにおいて「<」や「>」などを用いますよね。
その時に「詳細はこちら >」と言う言葉をh1タグの中に入れたいとします。
このような感じで↓
1 |
<h1>詳細はこちら ></h1> |
すると、以下のように文面がタグと混同され、警告が出てしまうのです。
Special characters must be escaped :[ < ]!!!
そんなときに、特殊文字を使います。
「>」は特殊文字で「>」と表すので、以下のようにコードを書き換えます。
1 |
<h1>詳細はこちら ></h1> |
すると、あら不思議、エラーがなくなります。
特殊記号さま!
このように、特殊な文字を普通の文字と認識させるために、特殊文字を使うのです。
また、「ö」などキーボード上に存在しない記号を使いたい時にも特殊記号が役に立ちます〜。
ちなみに、
特殊文字って覚えなくちゃいけないの!?
と思う方もいるかもしれませんが、特殊文字は覚えるものではありません!
使わなければいけない時にその都度ググってコピペすればOKです。
よく使う特殊文字(頻出大)
では、よく使う特殊文字を紹介していきます。
特殊文字には、「数値文字」と「文字実体」の2タイプの表し方(数字で表すか、文字で表すか)があるのですが、ここでは文字実体のものを紹介しています。
では、一気にどうぞ。
& | & |
< | < |
> | > |
" | “(普通のクオーテーション) |
“ | “(左のクオーテーション) |
” | ”(右のクオーテーション) |
© | ©(コピーライト) |
  | 半角スペースより狭い |
| 半角スペース |
  | 半角スペースと全角スペースの間 |
  | 全角スペース |
実際の空白の大きさはこちらを参考にしてみてください。
See the Pen xBaaOy by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
実際、プログラミングの現場では、ここにあげた特殊文字くらいしか使いません。
その他おもしろい特殊文字
最後に、プログラミングの業務では使うことは滅多にないと思いますが、おもしろい特殊文字を紹介します。
∞ | ∞ | |
≠ | ≠ | |
㎜ | ㎜ | |
㎝ | ㎝ | |
㎞ | ㎞ | |
㎠ | ㎠ | |
㎡ | ㎡ | |
㎢ | ㎢ | |
㎎ | ㎎ | |
㎏ | ㎏ | |
㏄ | ㏄ | |
㎖ | ㎖ | |
㎗ | ㎗ | |
㎘ | ㎘ | |
! | ! | |
# | # | |
$ | $ | |
% | % | |
← | ←(左向き矢印) | |
↑ | ↑(上向き矢印) | |
→ | →(右向き矢印) | |
↓ | ↓(下向き矢印) | |
↔ | ↔(水平矢印) | |
↕ | ↕(垂直矢印) | |
↖ | ↖(左斜め上向き矢印) | |
↗ | ↗(右斜め上向き矢印) | |
↘ | ↘(右斜め下向き矢印) | |
↙ | ↙(左斜め下向き矢印) | |
↰ | ↰(上向き左折矢印) | |
↱ | ↱(上向き右折矢印) | |
↲ | ↲(下向き左折矢印) | |
↳ | ↳(下向き右折矢印) | |
↵ | ↵(コーナー付き矢印) | |
⇄ | ⇄(右左二重矢印) | |
½ | ½(2分の1) | |
⅓ | ⅓(3分の1) | |
¼ | ¼(4分の1) | |
, | ,(カンマ) | |
. | .(ピリオド) | |
: | :(コロン) | |
; | ;(セミコロン) | |
' | ‘(アポストロフィ) | |
&hellip | …(3点ドット) | |
/ | /(スラッシュ) | |
\ | \(バックスラッシュ) | |
| | |(またはのバー) | |
( | ( | |
) | ) | |
[ | [ | |
] | ] | |
{ | { | |
} | } | |
° | °(度記号) | |
µ | µ(マイクロ記号) |
本当に特殊記号はたくさんあって、みているだけで面白いですね〜(^^)
ここであげた特殊記号は全体のほんの一部です。
もっと知りたいと言う方は以下を参照してみてください。
以上で、なっちる先生の授業を終えます〜!
リファランスとして活用してみてね〜
参考