Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

特殊文字とは

特殊文字とは、HTMLを記述する場合に使う記号（<> や ” など）や、©や&などの特別な文字のことをいいます。

一般的には、英字、数字、カナ、かな、漢字以外の文字コードが当てはまります。

特殊文字の書き方

特殊文字の書き方には「数値文字参照（文字参照）」と「文字実体参照（実体参照）」の2種類があります。

それぞれの特徴を簡単に説明しますね。

数値文字参照（文字参照）

数値文字参照は、10進数または16進数で該当の特殊文字をISO 10646の文字番号で指定する方法のことです。

例えば、次のコードは「©」を意味しています。

&#169

※自動変換回避のため(;)を外しています。

文字実体参照（実体参照）

文字実体参照は、特定の文字列によって該当の特殊文字を指定する方法のことです。

次のコードも先ほどと同じく「©」を意味しています。

&copy;

こちらは「copy」と書かれているので、直感的にどの特殊文字を意味しているのかがわかりやすいと思います。

そのため、一般的に特殊文字は文字実体参照で表現されることが多いです。

ただし、特殊文字の中には数値文字参照でしか表現できないものもある（「♪」など）ため、その場合は数値文字参照で記述します。

それぞれの特徴はわかったかと思います。

では、サンプルコードで表示を確認してみましょう。

<body>
	<p>数値文字参照：&#169</p> // ; が必要です
	<p>文字実体参照：&copy;</p>
</body>

特殊文字の書き方

特殊文字一覧

特殊文字は、上記で紹介したもの以外にも様々なものが存在します。

ここでは、特殊文字をカテゴリごとにまとめて一覧にしました。

実際に使用する際に参考にしてください。

図形（三角形）

数値文字参照 文字実体参照 表示 説明
&#9650 ▲ 上向き正三角形(黒)
&#9651 &xutri; △ 上向き正三角形(白)
&#9652 &utrif; ▴ 上向き小正三角形(黒)
&#9653 &utri; ▵ 上向き小正三角形(白)
&#9654 ▶ 右向き正三角形(黒)
&#9655 ▷ 右向き正三角形(白)
&#9656 &rtrif; ▸ 右向き小正三角形(黒)
&#9657 &rtri; ▹ 右向き小正三角形(白)
&#9658 ► 右向き三角形(黒)
&#9659 ▻ 右向き三角形(白)
&#9660 ▼ 下向き正三角形(黒)
&#9661 &xdtri; ▽ 下向き正三角形(白)
&#9662 &dtrif; ▾ 下向き小正三角形(黒)
&#9663 &dtri; ▿ 下向き小正三角形(白)
&#9664 ◀ 左向き正三角形(黒)
&#9665 ◁ 左向き正三角形(白)
&#9666 &ltrif; ◂ 左向き小正三角形(黒)
&#9667 &ltri; ◃ 左向き小正三角形(白)
&#9668 ◄ 左向き三角形(黒)
&#9669 ◅ 左向き三角形(白)
&#9698 ◢ 右下直角三角形(黒)
&#9699 ◣ 左下直角三角形(黒)
&#9700 ◤ 左上直角三角形(黒)
&#9701 ◥ 右上直角三角形(黒)
&#9720 &ultri; ◸ 左上直角三角形(白)
&#9721 &urtri; ◹ 右上直角三角形(白)
&#9722 &lltri; ◺ 左下直角三角形(白)
&lrtri; ⊿ 右下直角三角形(白)

※自動変換回避のため(;)を外しています。

図形（丸・円）

数値文字参照 文字実体参照 表示 説明
&#9675 ○ 白丸
&#9676 ◌ 白丸(点線)
&#9679 ● 黒丸
&#9678 ◎ 二重丸
&#9673 ◉ 蛇の目
&#10687 &ofcir; ⦿ 蛇の目、丸中黒
&#9680 ◐ 左半黒丸
&#9681 ◑ 右半黒丸
&#9682 ◒ 下半黒丸
&#9683 ◓ 上半黒丸
&#9677 ◍ 縦線丸
&#9684 ◔ 右上1/4の黒丸
&#9685 ◕ 右下3/4の黒丸
&#9686 ◖ 左半円
&#9687 ◗ 右半円
&#8226 &bull; &bullet; • ビュレット
&#9702 ◦ 白ビュレット

※自動変換回避のため(;)を外しています。

矢印

数値文字参照 文字実体参照 表示 説明
&#8592 &larr; ← 左向き矢印
&#8593 &uarr; ↑ 上向き矢印
&#8594 &rarr; → 右向き矢印
&#8595 &darr; ↓ 下向き矢印
&#8596 &harr; ↔ 左右向き矢印
&#8597 &varr; ↕ 上下向き矢印
&#8598 &nwarr; ↖ 左上向き矢印
&#8599 &nearr; ↗ 右上向き矢印
&#8600 &searr; ↘ 右下向き矢印
&#8601 &swarr; ↙ 左下向き矢印
&#8624 &lsh; ↰ 上から左向き矢印
&#8625 &rsh; ↱ 上から右向き矢印
&#8626 &ldsh; ↲ 下から左向き矢印
&#8627 &rdsh; ↳ 下から右向き矢印
&#8629 &crarr; ↵ Enterキー・改行
&#8630 &cularr; ↶ 上半円の反時計回り矢印
&#8631 &curarr; ↷ 上半円の時計回り矢印
&#8634 &olarr; ↺ 開いた円の反時計回り矢印
&#8634 &orarr; ↻ 開いた円の時計回り矢印
&#8644 &rlarr; ⇄ 右向き矢印＋左向き矢印
&#8645 &udarr; ⇅ 上向き矢印＋下向き矢印
&#8646 &lrarr; ⇆ 左向き矢印＋右向き矢印
&#8693 &duarr; ⇵ 下向き矢印＋上向き矢印
&#8647 &llarr; ⇇ ペアの左向き矢印
&#8648 &uuarr; ⇈ ペアの上向き矢印
&#8649 &rrarr; ⇉ ペアの右向き矢印
&#8650 &ddarr ⇊ ペアの下向き矢印
&#8656 &lArr; ⇐ 左二重線矢印
&#8657 &uArr; ⇑ 上二重線矢印
&#8658 &rArr; ⇒ 右二重線矢印
&#8659 &dArr; ⇓ 下二重線矢印
&#8660 &hArr; ⇔ 左右二重線矢印
&#8661 &vArr; ⇕ 上下向き二重矢印
&#8662 &nwArr; ⇖ 左上向き二重矢印
&#8663 &neArr; ⇗ 右上向き二重矢印
&#8664 &seArr; ⇘ 右下向き二重矢印
&#8665 &swArr; ⇙ 左下向き二重矢印
&#8666 &lAarr; ⇚ 左向き三重矢印
&#8667 &rAarr; ⇛ 右向き三重矢印
&#8676 &larrb; ⇤ 左タブ
&#8677 &rarrb; ⇥ 右タブ
&#8669 &zigrarr; ⇝ ジグザグ右向き矢印

※自動変換回避のため(;)を外しています。

括弧（カッコ）

数値文字参照 文字実体参照 表示 説明
&#40 &lpar; ( 左カッコ
&#41 &rpar; ) 右カッコ
&#91 &lbrack; [ 左ブラケット
&#92 &rbrack; ] 右ブラケット
&#123 &lbrace; { 左ブレース
&#125 &rbrace; } 右ブレース
&#145 &apos; ‘ アポストロフィ(始)
&#146 &apos; ’ アポストロフィ(終)
&#147 &quot; “ 二重引用符、ダブルクォーテーション(始)
&#148 &quot; ” 二重引用符、ダブルクォーテーション(終)
&#171 &laquo; « 左角引用符
&#187 &raquo; » 右角引用符
&#12296 〈 左山カッコ
&#12297 〉 右山カッコ
&#12298 《 左二重山カッコ
&#12299 》 右二重山カッコ
&#12300 「 左鉤括弧(かぎかっこ)
&#12301 」 右鉤括弧(かぎかっこ)
&#12302 『 左二重二重鉤括弧(かぎかっこ)
&#12303 』 右二重鉤括弧(かぎかっこ)
&#12304 【 左隅付き括弧・墨付き括弧(すみつきかっこ)
&#12305 】 右隅付き括弧・墨付き括弧(すみつきかっこ)
&#12308 〔 左亀甲括弧(きっこうかっこ)・亀の子括弧(かめのこかっこ)
&#12309 〕 右亀甲括弧(きっこうかっこ)・亀の子括弧(かめのこかっこ)
&#12314 〚
&#12315 〛
&#12317 〝
&#12319 〟
&#12310 〖 左白抜き括弧
&#12311 〗 右白抜き括弧
&#12312 〘 左二重亀甲括弧(きっこうかっこ)
&#12313 〙 右二重亀甲括弧(きっこうかっこ)

※自動変換回避のため(;)を外しています。

その他よく使う記号・空白・改行

数値文字参照 文字実体参照 表示 説明
&#38 &amp; & アンパサンド、アンド
&#169 &copy; © コピーライト
&#60 &lt; < 不等号（より小さい）
&#62 &gt; > 不等号（より大きい）
&#160 &nbsp; 改行しない半角スペース
&#8194 &ensp; nと同じ幅のスペース
&#8195 &emsp; mと同じ幅のスペース
&#010 改行
&#009 タブ

特殊文字を簡単に変換する

使いたい特殊文字を一覧から探すのは、時間がかかるし少し面倒ですよね。

そんなときは特殊文字を簡単に変換してくれるツールを使うと便利です。

例えば、以下のサイトは使いたい特殊文字を入力すると、対応する文字実体参照がわかります。

逆に、文字実体参照を入力すれば特殊文字を表示してくれます。

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

特殊文字を簡単に変換する

特殊文字のエスケープとは

エスケープとは、HTML上で特殊文字を表示すさせるための文字変換の方法のことです。

例えば、プログラムコードでも使われる「<」や「>」などを、<や>で表現します。

「なんでエスケープで表現するの？」と思う方もいるかもしれません。

これらの記号をエスケープなしでプログラムに取り込んでしまうと、バグの原因になる可能性があるのです。

また、クロスサイトスクリプティング（XSS）などのサイバー攻撃の標的になってしまう場合もあります。

まとめ

HTMLの特殊文字について解説しました。

&や©など、HTML作成をする際によく使用する特殊文字は、数値文字参照や文字実体参照を覚えておくと便利です。

また、使いたい特殊文字があればぜひこの記事を参考にしてください！

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。