ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > HTMLの特殊文字とは？変換方法と特殊文字一覧も紹介

HTMLの特殊文字とは？変換方法と特殊文字一覧も紹介

HTML/CSS

2022/01/25

2022/05/22

HTML特殊文字に関する記事サムネイル

Webサイトを制作時やHTMLメールを作成時に「< や &、¥」などの記号が正しく表示されないことはありませんか？

これらの記号はコンピューターの中で特殊な意味を持つため、特殊文字を使って出力する必要があります。

この記事では実際に「< や &」などの記号を特殊文字を使って表示させる方法と、特殊文字の一覧を紹介します。

ぜひ最後までご覧ください。

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

特殊文字とは？

冒頭でも紹介しましたが、「< や &」などの記号はブラウザやメールなどで出力できないことがあります。

理由は記号によって異なりますが、代表的なものを2つ紹介します。

  • HTMLのタグとして認識される
  • 文字コードの違い

これらの理由によって、一部の記号は表示することができません。

そこで、「< や &」などの記号を出力するための文字が「特殊文字」です。

具体的には　それぞれ以下のように記述すると記号として表示することができます。

  • <（小なり）は「&lt;」
  • &（アンパサンド）は「&amp;」

灰色の背景で記述された文字を特殊文字と呼びます。

実際に特殊文字を使う場合と使わない場合の出力結果を確認します。

ZeroPlusgate50教材の動画

記号をWebページに出力する方法

特殊文字を使った場合と使わなかった場合で「<div>タグをブラウザに表示」と出力することを試みます。

特殊文字を使わなかった場合の出力

まずは、特殊文字を使わなかった場合の出力を確認します。

HTMLの基本に則り表示するテキストをpタグで囲んで出力してみます。

<p><div>タグをブラウザに表示</p>

出力結果

特殊文字出力結果

本来「<div>タグをブラウザに表示」と反映させたい一方で、<div>の表示が無くなりました。

検証ツールを使ってタグの構造を確認すると、<div>タグがブラウザによって間違った認識をされていることがわかります。

特殊文字出力結果

テキストとして「<div>」を出力したいのにタグとして「<div>」が認識されてしまっているのです。

ブラウザがHTMLを正しく読み取れるように特殊文字を使ってエスケープ処理をする必要があります。

次に特殊文字を使って出力する方法を確認します。

特殊文字を使った場合の出力

今回は「< (小なり)と >（大なり）」の2つ記号が使われています。
それぞれに対応する特殊文字「&lt; と &gt;」を利用してWebページ上に出力することを試みます。

<p>&lt;div&gt;タグをブラウザに表示</p>

出力結果

特殊文字出力結果 正しく出力することができました。

記号が表示されない場合は適切な特殊文字を使うことを試みましょう。

ZeroPlusgate50教材の動画

特殊文字一覧

記号ごとに異なる特殊文字が存在するので、一覧を紹介します。

一般的な記号一覧

記号読み方特殊文字（実体参照）特殊文字（数値参照）
&アンパサンド&amp;&#38;
¦破断縦線&brvbar;&#166;
µマイクロ記号&micro;&#181;
‰パーミル&permil;&#8240;
¤一般通貨記号&curren;&#164;
€ユーロ記号&euro;&#128;
¢セント記号&cent;&#162;
£ポンド記号&pound;&#163;
¥円記号&yen;&#165;
©著作権記号&copy;&#169;
®登録商標記号&reg;&#174;
™商標記号&trade;&#8482;
↑上向き矢印&uarr;&#8593;
→右向き矢印&rarr;&#8594;
↓下向き矢印&darr;&#8595;
←左向き矢印&larr;&#8592;
↔左右両向き矢印&harr;&#8596;
↵改行マーク&crarr;&#8629;
⇑上向き二重矢印&uArr;&#8657;
⇒右向き二重矢印&rArr;&#8658;
⇓下向き二重矢印&dArr;&#8659;
⇐左向き二重矢印&lArr;&#8656;
⇔左右両向き二重矢印&hArr;&#8660;
♠スペードマーク&spades;&#9824;
♣クラブマーク&clubs;&#9827;
♥ハートマーク&hearts;&#9829;
♦ダイヤマーク&diams;&#9830;
ª女性序数標識&ordf;&#170;
º男性序数標識&ordm;&#186;
¹上付き1&sup1;&#185;
²上付き2&sup2;&#178;
³上付き3&sup3;&#179;
½2分の1&frac12;&#189;
¼4分の1&frac14;&#188;
¾4分の3&frac34;&#190;
·中点&middot;&#183;
¡逆さ感嘆符&iexcl;&#161;
¿逆さ疑問符&iquest;&#191;
"引用符&quot;&#34;
‘左一重引用符&lsquo;&#8216;
’右一重引用符&rsquo;&#8217;
“左二重引用符&ldquo;&#8220;
”右二重引用符&rdquo;&#8221;
«左二重角引用符&laquo;&#171;
»右二重角引用符&raquo;&#187;
 改行なし空白&nbsp;&#160;
 “m”幅空白&emsp;&#8195;
 “n”幅空白&ensp;&#8194;
 狭い空白&thinsp;&#8201;
—“m”幅ダッシュ&mdash;&#8212;
–“n”幅ダッシュ&ndash;&#8211;
­ソフトハイフン&shy;&#173;
•行頭文字&bull;&#8226;
段落記号&para;&#182;
§セクション記号&sect;&#167;
†ダガー記号&dagger;&#8224;
‡ダブルダガー記号&Dagger;&#8225;
…省略記号&hellip;&#8230;
◊菱形&loz;&#9674;
‾上線&oline;&#8254;
⁄区切りスラッシュ&frasl;&#8260;

数学記号など一覧

記号読み方特殊文字（実体参照）特殊文字（数値参照）
∞無限記号&infin;&#8734;
√根号&radic;&#8730;
−マイナス&minus;&#8722;
±プラスマイナス&plusmn;&#177;
×乗算記号&times;&#215;
÷除算記号&divide;&#247;
≠等しくない&ne;&#8800;
≈ほぼ等しい&asymp;&#8776;
≅およそ等しい&cong;&#8773;
>大なり&gt;&#62;
<小なり&lt;&#60;
≥大なりまたは等しい&ge;&#8805;
≤小なりまたは等しい&le;&#8804;
ƒ関数記号&fnof;&#402;
∝比例する&prop;&#8733;
′プライム&prime;&#8242;
″二重プライム&Prime;&#8243;
∫積分記号&int;&#8747;
∂偏微分&part;&#8706;
∇ナブラ&nabla;&#8711;
∑数列の和&sum;&#8721;
∏数列の積、直積&prod;&#8719;
ℑ虚数&image;&#8465;
ℜ実数&real;&#8476;
℘ワイエルシュトラスのP&weierp;&#8472;
∼チルダ演算子&sim;&#8764;
∴故に&there4;&#8756;
ϖパイ記号&piv;&#982;
∠角&ang;&#8736;
°度記号&deg;&#176;
⊥直交する&perp;&#8869;
≡合同な&equiv;&#8801;
¬否定記号&not;&#172;
∀任意の&forall;&#8704;
∃存在する&exist;&#8707;
∧論理積&and;&#8743;
∨論理和&or;&#8744;
∅空集合&empty;&#8709;
∩集合積&cap;&#8745;
∪集合和&cup;&#8746;
∈～の要素である&isin;&#8712;
∉～の要素ではない&notin;&#8713;
∋～を要素として含む&ni;&#8715;
⊂含まれる&sub;&#8834;
⊃含む&sup;&#8835;
⊄含まれない&nsub;&#8836;
⊆含まれるか等しい&sube;&#8838;
⊇含むか等しい&supe;&#8839;
⋅点演算子&sdot;&#8901;
∗アスタリスク演算子&lowast;&#8727;
⊕丸囲み加算(直和)&oplus;&#8853;
⊗丸囲み乗算(直積)&otimes;&#8855;
⌈左上限&lceil;&#8968;
⌊左下限&lfloor;&#8970;
⌉右上限&rceil;&#8969;
⌋右下限&rfloor;&#8971;

飾り付きアルファベット

記号読み方特殊文字（実体参照）特殊文字（数値参照）
´アキュートアクセント&acute;&#180;
¸セディラ(セディーユ)&cedil;&#184;
ˆサーカムフレックス&circ;&#710;
¯マクロン&macr;&#175;
˜チルダ&tilde;&#732;
¨ウムラウト(ダイエリシス)&uml;&#168;
á小文字Aアキュート&aacute;&#225;
Á大文字Aアキュート&Aacute;&#193;
â小文字Aサーカムフレックス&acirc;&#226;
Â大文字Aサーカムフレックス&Acirc;&#194;
æ小文字AE合字(リガチャ)&aelig;&#230;
Æ大文字AE合字(リガチャ)&AElig;&#198;
à小文字Aグレーブ&agrave;&#224;
À大文字Aグレーブ&Agrave;&#192;
å小文字Aリング&aring;&#229;
Å大文字Aリング&Aring;&#197;
ã小文字Aチルダ&atilde;&#227;
Ã大文字Aチルダ&Atilde;&#195;
ä小文字Aウムラウト&auml;&#228;
Ä大文字Aウムラウト&Auml;&#196;
ç小文字Cセディラ&ccedil;&#231;
Ç大文字Cセディラ&Ccedil;&#199;
é小文字Eアキュート&eacute;&#233;
É大文字Eアキュート&Eacute;&#201;
ê小文字Eサーカムフレックス&ecirc;&#234;
Ê大文字Eサーカムフレックス&Ecirc;&#202;
è小文字Eグレーブ&egrave;&#232;
È大文字Eグレーブ&Egrave;&#200;
ð小文字Eth(アイスランド語)&eth;&#240;
Ð大文字Eth(アイスランド語)&ETH;&#208;
ë小文字Eウムラウト&euml;&#235;
Ë大文字Eウムラウト&Euml;&#203;
í小文字Iアキュート&iacute;&#237;
Í大文字Iアキュート&Iacute;&#205;
î小文字Iサーカムフレックス&icirc;&#238;
Î大文字Iサーカムフレックス&Icirc;&#206;
ì小文字Iグレーブ&igrave;&#236;
Ì大文字Iグレーブ&Igrave;&#204;
ï小文字Iウムラウト&iuml;&#239;
Ï大文字Iウムラウト&Iuml;&#207;
ñ小文字Nチルダ&ntilde;&#241;
Ñ大文字Nチルダ&Ntilde;&#209;
ó小文字Oアキュート&oacute;&#243;
Ó大文字Oアキュート&Oacute;&#211;
ô小文字Oサーカムフレックス&ocirc;&#244;
Ô大文字Oサーカムフレックス&Ocirc;&#212;
ò小文字Oグレーブ&ograve;&#242;
Ò大文字Oグレーブ&Ograve;&#210;
ø小文字Oスラッシュ&oslash;&#248;
Ø大文字Oスラッシュ&Oslash;&#216;
õ小文字Oチルダ&otilde;&#245;
Õ大文字Oチルダ&Otilde;&#213;
ö小文字Oウムラウト&ouml;&#246;
Ö大文字Oウムラウト&Ouml;&#214;
œ小文字OE合字(リガチャ)&oelig;&#339;
Œ大文字OE合字(リガチャ)&OElig;&#338;
ßエスツェット(ドイツ語)&szlig;&#223;
š小文字Sキャロン(ハーチェク)&scaron;&#353;
Š大文字Sキャロン(ハーチェク)&Scaron;&#352;
þ小文字Thorn(アイスランド語)&thorn;&#254;
Þ大文字Thorn(アイスランド語)&THORN;&#222;
ú小文字Uアキュート&uacute;&#250;
Ú大文字Uアキュート&Uacute;&#218;
û小文字Uサーカムフレックス&ucirc;&#251;
Û大文字Uサーカムフレックス&Ucirc;&#219;
ù小文字Uグレーブ&ugrave;&#249;
Ù大文字Uグレーブ&Ugrave;&#217;
ü小文字Uウムラウト&uuml;&#252;
Ü大文字Uウムラウト&Uuml;&#220;
ý小文字Yアキュート&yacute;&#253;
Ý大文字Yアキュート&Yacute;&#221;
ÿ小文字Yウムラウト&yuml;&#255;
Ÿ大文字Yウムラウト&Yuml;&#376;

ギリシャ文字

記号読み方特殊文字（実体参照）特殊文字（数値参照）
Α大文字アルファ&Alpha;&#913;
α小文字アルファ&alpha;&#945;
Β大文字ベータ&Beta;&#914;
β小文字ベータ&beta;&#946;
Γ大文字ガンマ&Gamma;&#915;
γ小文字ガンマ&gamma;&#947;
Δ大文字デルタ&Delta;&#916;
δ小文字デルタ&delta;&#948;
Ε大文字イプシロン&Epsilon;&#917;
ε小文字イプシロン&epsilon;&#949;
Ζ大文字ゼータ&Zeta;&#918;
ζ小文字ゼータ&zeta;&#950;
Η大文字エータ&Eta;&#919;
η小文字エータ&eta;&#951;
Θ大文字シータ&Theta;&#920;
θ小文字シータ&theta;&#952;
ϑシータ記号&thetasym;&#977;
Ι大文字イオタ&Iota;&#921;
ι小文字イオタ&iota;&#953;
Κ大文字カッパ&Kappa;&#922;
κ小文字カッパ&kappa;&#954;
Λ大文字ラムダ&Lambda;&#923;
λ小文字ラムダ&lambda;&#955;
Μ大文字ミュー&Mu;&#924;
μ小文字ミュー&mu;&#956;
Ν大文字ニュー&Nu;&#925;
ν小文字ニュー&nu;&#957;
Ξ大文字クサイ&Xi;&#926;
ξ小文字クサイ&xi;&#958;
Ο大文字オミクロン&Omicron;&#927;
ο小文字オミクロン&omicron;&#959;
Π大文字パイ&Pi;&#928;
π小文字パイ&pi;&#960;
Ρ大文字ロー&Rho;&#929;
ρ小文字ロー&rho;&#961;
Σ大文字シグマ&Sigma;&#931;
σ小文字シグマ&sigma;&#963;
Τ大文字タウ&Tau;&#932;
τ小文字タウ&tau;&#964;
Υ大文字ウプシロン&Upsilon;&#933;
υ小文字ウプシロン&upsilon;&#965;
ϒウプシロン記号&upsih;&#978;
Φ大文字ファイ&Phi;&#934;
φ小文字ファイ&phi;&#966;
Χ大文字カイ&Chi;&#935;
χ小文字カイ&chi;&#967;
Ψ大文字プサイ&Psi;&#936;
ψ小文字プサイ&psi;&#968;
Ω大文字オメガ&Omega;&#937;
ω小文字オメガ&omega;&#969;

まとめ

この記事では次の3つを紹介してまいりました。
・特殊文字の定義
・特殊文字を用いたHTMLエスケープの方法
・特殊文字一覧

「記号が正しく出力できない…」そんな時には、是非この記事をご参照ください。皆さんのプログラミング学習のお役に立つこと、心より願っております。

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

FacBook
Twitter
LINE
はてブ
PPocket

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて
ZeroPlus Gateについて

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

完全無料！30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから