HTMLの特殊文字の書き方と頻出の特殊文字一覧表【コピペOK!】

HTMLのファイル内には「HTML」としてそれ自体が意味をもっている記号などは、そのまま記載しても記号として表示されません。

例えば、「<」はHTMLの開始タグと認識されるため、「<」という記号だけをそのまま記載するとブラウザでの表示が崩れたり、そもそも表示されなかったりします。

このようなHTMLで使われる記号をブラウザでそのまま表示させたい場合は、「特殊文字」というものに変換する必要があります。

特殊文字には専用の文字コードがあり、そのコードを記載することで記号をブラウザ上にそのまま表示させることができます。

今回は、特殊文字の記載方法と、「よく使われる特殊文字の見やすい一覧表」をご用意しました。

特殊文字の使い方

例えば、WEBサイトなどの画面上に

<  前の画面へ戻る

という文字列を表示したい場合。

HTMLでPタグの中に、

とそのまま書くと、「<」の記号がHTMLの開始タグだと認識されてしまい、上手くいきません。

そこで、下記のように特殊文字を使用した書き方をします。

こうすれば、画面上にはきちんと 「 <  前の画面へ戻る  」 が表示されます。

」という記号の特殊文字コードが「<」だという事ですね。

このように、HTMLで画面に記号を表示させたい場合は、記号そのままでなく、その記号に割り当てられた「特殊文字コード」を使います。

よく使われる特殊文字一覧

頻出の記号

記号 特殊文字 よみかた
& & アンパサンド
" ダブルクォーテーション
' シングルクォーテーション
    半角スペース
< 小なり
> 大なり
˜ ˜ チルダ
¥ ¥
© © 著作権(コピーライト)
® ® 登録商標
™ 商標
« « 二重山括弧(開始)
» » 二重山括弧(終了)
½ ½ 分数1/2
² ² 上付き数字の2
, , カンマ
. . ピリオド
: : コロン
; ; セミコロン
&prime プライム
&Prime ダブルプライム
&tprime トリプルプライム
&qprime クワトロプライム
¨ ¨ ウムラウト
&hellip 三連ドット
/ / スラッシュ

\ バックスラッシュ
| | バーティカルバー

矢印記号

記号 特殊文字 よみかた
← 左向き矢印
↑ 上向き矢印
→ 右向き矢印
↓ 下向き矢印
↔ 水平矢印
↕ 垂直矢印
↖ 左斜め上向き矢印
↗ 右斜め上向き矢印
↘ 右斜め下向き矢印
↙ 左斜め下向き矢印
↚ 打ち消し左向き矢印
↛ 打ち消し右向き矢印
↝ 右向き波矢印
↞ 左向き二重矢印
↟ 上向き二重矢印
↠ 右向き二重矢印
↡ 下向き二重矢印
↢ 左向き尾付き矢印
↣ 右向き尾付き矢印
↤ 基準付き左向き矢印
↥ 基準付き上向き矢印
↦ 基準付き右向き矢印
↧ 基準付き下向き矢印
↩ 引き返し左向き矢印
↪ 引き返し右向き矢印
↫ ループ左向き矢印
↬ ループ右向き矢印
↭ 左右波矢印
↮ 打ち消し左右矢印
↰ 上向き左折矢印
↱ 上向き右折矢印
↲ 下向き左折矢印
↳ 下向き右折矢印
↵ コーナー付き矢印
↶ 上カーブ左向き矢印
↷ 上カーブ右向き矢印
↺ 左巻き矢印
↻ 右巻き矢印
↼ 左方向上向き銛型矢印
↽ 左方向下向き銛型矢印
↾ 上方向右向き銛型矢印
↿ 上方向左向き銛型矢印
⇀ 右方向上向き銛型矢印
⇁ 右方向下向き銛型矢印
⇂ 下方向右向き銛型矢印
⇃ 下方向左向き銛型矢印
⇄ 右左二重矢印
⇅ 上下二重矢印
⇆ 左右二重矢印
⇇ 左左二重矢印
⇈ 上上二重矢印
⇉ 右右二重矢印
⇊ 下下二重矢印
⇋ 左右銛型二重矢印
⇌ 右左銛型二重矢印
⇍ 打ち消し左向き二重線矢印
⇎ 打ち消し左右二重線矢印
⇏ 打ち消し右向き二重線矢印
⇐ 左向き二重線矢印
⇑ 上向き二重線矢印
⇒ 右向き二重線矢印
⇓ 下向き二重線矢印
⇔ 左右二重線矢印
⇕ 上下二重線矢印
⇖ 左斜め上向き二重線矢印
⇗ 右斜め上向き二重線矢印
⇘ 右斜め下向き二重線矢印
⇙ 左斜め下向き二重線矢印
⇚ 左向き三重線矢印
⇛ 右向き三重線矢印
⇝ ジグザグ右向き矢印
⇤ 行き止まり左向き矢印
⇥ 行き止まり右向き矢印
⇵ 下上二重矢印
⇽ 白抜き左向き矢印
⇾ 白抜き右向き矢印
⇿ 白抜き左右矢印

スペースのバリエーション

記号 特殊文字 よみかた
 
  改行しない半角スペース
  nと同じ幅のスペース
  mと同じ幅のスペース
  細い空白

ポップな特殊文字

記号 特殊文字 よみかた
★ 黒星
☆ 白星
♪ 8分音符
♭ フラット
♮ ナチュラル
♯ シャープ
☎ 電話

算術記号・分数記号

記号 特殊文字 よみかた
+ + 加算記号
− 減算記号
× × 乗算記号
÷ ÷ 除算記号
± ± プラスマイナス
= = 等しい
≠ 等しくない
≈ ほぼ等しい
≅ ほぼ等しい
≡ 定義/合同
< 不等号(より小さい)
> 不等号(より大きい)
∧ 論理積
∨ 論理和
≤ 小さいか等しい
≥ 大きいか等しい
≪ はるかに小さい
≫ はるかに大きい
* * アスタリスク
∗ アスタリスク(下段)
ƒ ƒ 関数記号
¬ ¬ 否定記号
² ² 上付き2
³ ³ 上付き3
¹ ¹ 上付き1
º º 上付き0
∀ 全てについて
∂ 偏微分
∃ 存在する
∇ ナブラ
∏ n回の乗算
∑ n回の加算
√ 平方根
∝ 比例記号
∞ 無限
∠ 角度
∫ 積分記号
∬ 二重積分
∮ 回転積分
∴ したがって
∵ なぜなら
∼ チルダ演算子
∽ 相似
∅ 空集合
∩ 集合の積
∪ 集合の和
⊂ 左辺は右辺の部分集合
⊃ 左辺は右辺を含む
⊄ 左辺は右辺の部分集合でない
⊆ 左辺は右辺の部分集合または等しい
⊇ 左辺は右辺を含むか等しい
∈ 右辺の要素である
∉ 右辺の要素でない
∋ 要素として含む
⊕ 直和
⊖ 対称差
⊗ 直積
⊘ 丸囲みスラッシュ
⊙ 丸囲みドット
⊚ 丸囲みサークル
⊛ 丸囲みアスタリスク
⊝ 丸囲みダッシュ
⊥ 直交
⋅ ドット演算子
½ ½ 2分の1
⅓ 3分の1
¼ ¼ 4分の1
⅕ 5分の1
⅔ 3分の2
⅖ 5分の2
¾ ¾ 4分の3

便利なツール

上記のような、頻出のコード一覧表から探すのが一番手っ取り早いかとは思いますが、記号を入力するだけで特殊文字コードに変換してくれる便利なツールもあるようなので、ご紹介しておきます。

HTML特殊文字変換ツール

https://tech-unlimited.com/escape.html

特殊文字だけでなく、カラーコードの変換ツールなどもあって面白いですね!

まとめ

以上、特殊文字の使い方や頻出の特殊文字コード一覧、便利なツールをご紹介しました。

ぜひ参考にしてみてくださいね。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?