HTMLの三角・矢印の特殊文字まとめ!

今回はHTMLコーディングでよく利用する三角・矢印の特殊文字をまとめてご紹介します。特殊文字をきちんと使わないと、実際のソースコードでは記号が表示されているのにブラウザで見ると表示されなかったり、文字化けを起こす場合もあります。きちんと表示されるように特殊文字を使いましょう!

コンテンツ [表示]

  1. 1HTMLの三角・矢印の特殊文字
  2. 1.1三角一覧
  3. 1.2矢印一覧
  4. 2まとめ

HTMLで記号や空白などを入力してもうまく表示されないことはないですか?
それは主に下のような理由が考えられます。

ちゃんと表示されない主な理由

  • 特殊記号や文字をHTMLタグと区別するため
  • HTMLタグによる不正な動作がおこなわれないように処理するため
  • Shift-JISやutf-8などの文字コードの違いのため

そこで、今回は特殊文字(エスケープシーケンス)を使って、HTMLコーディングでよく利用する三角・矢印をご紹介します。

特殊文字を使うと、安全にかつ文字化けせずに特定の文字を表示することができます。
コピペで使えますのでぜひ利用してみてください。

Photo byvanmarciano

HTMLの三角・矢印の特殊文字

三角一覧

表示 文字実体 数値文字 説明
△ △ 上向き正三角形
- ▷ 左向き正三角形
▽ ▽ 下向き正三角形
- ◁ 右向き正三角形
▵ ▵ 上向き小正三角形(白)
▹ ▹ 右向き小正三角形(白)
▿ ▿ 下向き小正三角形(白)
◃ ◃ 左向き小正三角形(白)
◸ ◸ 直角三角形(左上)
◹ ◹ 直角三角形(右上)
◺ ◺ 直角三角形(左下)
⊿ ◻ 直角三角形(右下)
- ▲ 上向き正三角形(黒)
- ▶ 右向き正三角形(黒)
- ▼ 下向き正三角形(黒)
- ◀ 左向き正三角形(黒)
▴ ▴ 上向き小正三角形(黒)
▸ ▸ 右向き小正三角形(黒)
▾ ▾ 下向き小正三角形(黒)
◂ ◂ 左向き小正三角形(黒)

矢印一覧

表示 文字実体 数値文字 説明
< &lt; &#60; 小なり
> &gt; &#62; 大なり
&lsaquo; &#8249; 山カッコ (始)
&rsaquo; &#8250; 山カッコ (終)
« &laquo; &#171; 二重山カッコ (始)
» &raquo; &#187; 二重山カッコ (終)
&larr; &#8592; 左矢
&uarr; &#8593; 上矢
&rarr; &#8594; 右矢
&darr; &#8595; 下矢
&harr; &#8596; 左右矢
&lArr; &#8656; 二重左矢
&uArr; &#8657; 二重上矢
&rArr; &#8658; 二重右矢
&dArr; &#8659; 二重下矢
&hArr; &#8660; 二重左右矢

まとめ

いかがでしたでしょうか?

今回は、三角・矢印を中心にご紹介しましたが、特殊文字はこの他にもまだまだたくさんあります。

特殊文字を使わないことで、記号が表示されなかったりなど、
トラブルの要因の1つになりますので、みなさんも、積極的に使っていきましょう!

あわせて読みたい
CSSのcontentプロパティで特殊文字を表示する方法!のイメージ
CSSのcontentプロパティで特殊文字を表示する方法!
CSSのcontentプロパティ(::before・::after疑似要素)で三角やコピーライトなど特殊文字の記号を表示する方法をサンプルコード付きで解説していきます。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

Qumeru事務局
ライター

Qumeru事務局