記事内にはプロモーションが含まれています

【保存版】HTML特殊文字・記号の文字コード一覧表

【保存版】HTML特殊文字・記号の文字コード一覧表 HTML

HTMLでWebページを作成していると、「<」や「>」といったタグに使われる記号を表示したり、「©(コピーライト)」や「矢印(→)」、「ハートマーク(♥)」などの特殊な記号を使いたくなったりする場面があります。

これらの特殊な文字は、キーボードから直接入力しても正しく表示されなかったり、文字化けしたり、あるいはHTMLタグとして誤認識されてレイアウト崩れの原因になったりします。

これらを正しく表示するために使うのが「文字実体参照」「数値文字参照」と呼ばれるコードです。

この記事では、HTMLで使用できる特殊文字や記号のコードをジャンル別に大量にまとめました。
コピペして使える一覧表としてご活用ください。

【本記事の信頼性】
プロフィール
執筆者:マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

HTMLにおける特殊文字の書き方(実体参照と数値参照)

特殊文字を表示するには、以下の3つの書き方があります。

どれを使っても画面上の表示は同じですが、覚えやすさやサポート状況に違いがあります。

【書き方のルール】

  • 文字実体参照 (Entity Name):&名前;
    例:&copy; → © (覚えやすいが、定義されていない文字もある)
  • 数値文字参照(10進数) (Decimal):&#番号;
    例:&#169; → © (どの文字でも使える)
  • 数値文字参照(16進数) (Hexadecimal):&#x番号;
    例:&#xA9; → © (Unicode番号と同じ)

この記事の「数値参照」では、すべて10進数で紹介していきます。

【基本】HTMLで絶対に必要な制御文字・空白

HTMLタグを構成する記号や、スペースなどは、そのまま書くとブラウザに無視されたり誤解されたりします。

これらは最も頻繁に変換が必要な文字です。

表示 名称 文字実体参照 数値参照
< 小なり(Less Than) &lt; &#60;
> 大なり(Greater Than) &gt; &#62;
& アンパサンド(Ampersand) &amp; &#38;
ダブルクォーテーション &quot; &#34;
シングルクォーテーション &apos; &#39;
ノーブレークスペース(空白) &nbsp; &#160;
半角スペースより少し広い空白 &ensp; &#8194;
全角スペース相当の空白 &emsp; &#8195;

【記号】句読点・引用符・一般記号

著作権マークや商標、引用符など、文章中でよく使われる記号です。

表示 名称 文字実体参照 数値参照
© コピーライト(著作権) &copy; &#169;
® 登録商標 &reg; &#174;
トレードマーク(商標) &trade; &#8482;
§ セクション記号 &sect; &#167;
パラグラフ記号(段落) &para; &#182;
ダガー(短剣符) &dagger; &#8224;
ダブルダガー &Dagger; &#8225;
三点リーダー &hellip; &#8230;
« 二重山括弧(左) &laquo; &#171;
» 二重山括弧(右) &raquo; &#187;
左シングル引用符 &lsquo; &#8216;
右シングル引用符 &rsquo; &#8217;
左ダブル引用符 &ldquo; &#8220;
右ダブル引用符 &rdquo; &#8221;
ビュレット(黒丸) &bull; &#8226;
· 中黒(ミドルドット) &middot; &#183;
¡ 逆感嘆符 &iexcl; &#161;
¿ 逆疑問符 &iquest; &#191;
¦ 破断線 &brvbar; &#166;
¬ 否定記号 &not; &#172;

【通貨】世界のお金・通貨記号

円マークやドルだけでなく、ユーロやポンドなども特殊文字で表示できます。

表示 名称 文字実体参照 数値参照
¥ 円記号 &yen; &#165;
¢ セント &cent; &#162;
£ ポンド &pound; &#163;
¤ 一般通貨記号 &curren; &#164;
ユーロ &euro; &#8364;
$ ドル &dollar; &#36;
ウォン &#8361;
ドン &#8363;
ペソ &#8369;
ルピー &#8377;
ルーブル &#8381;
฿ バーツ &#3647;

【矢印】方向を示す矢印記号

UIデザインやナビゲーションで頻繁に使用される矢印記号の一覧です。

表示 名称 文字実体参照 数値参照
左矢印 &larr; &#8592;
上矢印 &uarr; &#8593;
右矢印 &rarr; &#8594;
下矢印 &darr; &#8595;
左右両矢印 &harr; &#8596;
リターン(改行) &crarr; &#8629;
左二重矢印 &lArr; &#8656;
上二重矢印 &uArr; &#8657;
右二重矢印 &rArr; &#8658;
下二重矢印 &dArr; &#8659;
左右二重矢印 &hArr; &#8660;
左上矢印 &#8598;
右上矢印 &#8599;
右下矢印 &#8600;
左下矢印 &#8601;
回転(時計回り) &#8634;
回転(反時計回り) &#8635;

【数学】算術記号・単位・論理記号

数式や単位を表すための記号です。

表示 名称 文字実体参照 数値参照
× 乗算(かける) &times; &#215;
÷ 除算(わる) &divide; &#247;
± プラスマイナス &plusmn; &#177;
マイナス &minus; &#8722;
無限大 &infin; &#8734;
等しくない(ノットイコール) &ne; &#8800;
近似(ニアリーイコール) &asymp; &#8776;
以下 &le; &#8804;
以上 &ge; &#8805;
ルート(根号) &radic; &#8730;
総和(シグマ) &sum; &#8721;
総乗 &prod; &#8719;
積分 &int; &#8747;
偏微分 &part; &#8706;
すべての(全称記号) &forall; &#8704;
存在する(存在記号) &exist; &#8707;
空集合 &empty; &#8709;
ナブラ &nabla; &#8711;
属する &isin; &#8712;
属さない &notin; &#8713;
° 度(角度・温度) &deg; &#176;
プライム(分・フィート) &prime; &#8242;
ダブルプライム(秒・インチ) &Prime; &#8243;
摂氏(℃) &#8451;
華氏(℉) &#8457;
µ マイクロ &micro; &#181;
&ang; &#8736;
垂直 &perp; &#8869;
ゆえに &there4; &#8756;

【文字】ギリシャ文字・ラテン拡張

数学や科学で使われるギリシャ文字などの一覧です。

表示 名称 文字実体参照 数値参照
α アルファ(小) &alpha; &#945;
β ベータ(小) &beta; &#946;
γ ガンマ(小) &gamma; &#947;
δ デルタ(小) &delta; &#948;
ε イプシロン(小) &epsilon; &#949;
ζ ゼータ(小) &zeta; &#950;
η イータ(小) &eta; &#951;
θ シータ(小) &theta; &#952;
ι イオタ(小) &iota; &#953;
κ カッパ(小) &kappa; &#954;
λ ラムダ(小) &lambda; &#955;
μ ミュー(小) &mu; &#956;
ν ニュー(小) &nu; &#957;
ξ クシー(小) &xi; &#958;
ο オミクロン(小) &omicron; &#959;
π パイ(小) &pi; &#960;
ρ ロー(小) &rho; &#961;
σ シグマ(小) &sigma; &#963;
τ タウ(小) &tau; &#964;
υ ウプシロン(小) &upsilon; &#965;
φ ファイ(小) &phi; &#966;
χ カイ(小) &chi; &#967;
ψ プサイ(小) &psi; &#968;
ω オメガ(小) &omega; &#969;
Γ ガンマ(大) &Gamma; &#915;
Δ デルタ(大) &Delta; &#916;
Θ シータ(大) &Theta; &#920;
Λ ラムダ(大) &Lambda; &#923;
Ξ クシー(大) &Xi; &#926;
Π パイ(大) &Pi; &#928;
Σ シグマ(大) &Sigma; &#931;
Φ ファイ(大) &Phi; &#934;
Ψ プサイ(大) &Psi; &#936;
Ω オメガ(大) &Omega; &#937;

【アイコン】トランプ・チェス・星座・天気

画像を使わなくても、フォントだけで表示できるアイコン類です。

表示 名称 文字実体参照 数値参照
スペード &spades; &#9824;
クラブ &clubs; &#9827;
ハート &hearts; &#9829;
ダイヤ &diams; &#9830;
チェス(キング・白) &#9812;
チェス(クイーン・白) &#9813;
チェス(ルーク・白) &#9814;
チェス(ビショップ・白) &#9815;
チェス(ナイト・白) &#9816;
チェス(ポーン・白) &#9817;
チェス(キング・黒) &#9818;
黒星 &#9733;
白星 &#9734;
太陽 &#9728;
&#9729;
&#9730;
雪だるま &#9731;
温泉マーク &#9832;
四分音符 &#9833;
八分音符 &#9834;
連桁付き八分音符 &#9835;
十六分音符 &#9836;
フラット &#9837;
シャープ &#9839;
女性記号 &#9792;
男性記号 &#9794;
おひつじ座 &#9800;
おうし座 &#9801;
ふたご座 &#9802;
かに座 &#9803;
しし座 &#9804;
おとめ座 &#9805;
てんびん座 &#9806;
さそり座 &#9807;
いて座 &#9808;
やぎ座 &#9809;
みずがめ座 &#9810;
うお座 &#9811;

【罫線】四角・ブロック・線・幾何学模様

図形や罫線を描くための文字コードです。

表示 名称 文字実体参照 数値参照
上半分ブロック &#9600;
下半分ブロック &#9604;
全ブロック &#9608;
淡い網掛け &#9617;
中くらいの網掛け &#9618;
濃い網掛け &#9619;
黒四角 &#9632;
白四角 &#9633;
黒三角(上) &#9650;
白三角(上) &#9651;
黒三角(下) &#9660;
白三角(下) &#9661;
黒ひし形 &#9670;
白ひし形 &#9671;
白丸 &#9675;
黒丸 &#9679;
二重丸 &#9678;
横線 &#9472;
縦線 &#9474;
角(左上) &#9484;
角(右上) &#9488;
角(左下) &#9492;
角(右下) &#9496;
T字(左) &#9500;
T字(右) &#9508;
T字(上) &#9516;
T字(下) &#9524;
十字 &#9532;

【その他】手・鉛筆・チェックマークなど

Dingbatsと呼ばれる装飾記号の一部です。

表示 名称 文字実体参照 数値参照
はさみ &#9986;
電話 &#9990;
封筒 &#9993;
鉛筆 &#9998;
チェックマーク &#10003;
太いチェックマーク &#10004;
バツ印 &#10005;
太いバツ印 &#10006;
指差し(左) &#9754;
指差し(右) &#9755;
指差し(左・黒) &#9756;
指差し(上) &#9757;
指差し(右・黒) &#9758;
指差し(下) &#9759;
警告サイン &#9888;
リサイクル &#9855;
ハンマーとピック &#9874;
ギア &#9881;
雪だるま(スノーマン) &#9924;
サッカーボール &#9917;
野球ボール &#9918;

HTML/CSSのスキルを活かして年収を上げる方法

以上、HTMLにおける特殊文字コード一覧について紹介してきました。

なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

HTML/CSSのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。