100種類以上ある！ ウェブ上で使える矢印記号(絵文字)(2ページ目)

漢字変換では出せない矢印記号も多々ある

矢印記号の中でも標準的な「上矢印↑」「左矢印←」「下矢印↓」「右矢印→」などは、日本語入力環境であれば漢字変換で簡単に出すことができます。読みとして「やじるし」と入力して漢字変換してみて下さい。下図のように出てくるでしょう。
 
しかし、斜め方向の矢印や手(指)形の矢印など特殊な記号は、漢字変換では出せない場合も多々あります。そこで役に立つHTMLの仕様が、「文字実体参照」と「数値文字参照」です。

特殊な矢印記号も表示できる文字実体参照・数値文字参照の書き方

HTMLの仕様には、特殊な文字や記号を表示する仕組みとして、文字実体参照と数値文字参照という2つの記述方法があります。これらの記述方法を使うことで、前ページでご紹介したような100個を超える様々な矢印記号を簡単にウェブ上に表示できます。
 
この文字実体参照や数値文字参照とは、簡単に紹介すると下記のような書き方のことです。
 

• 文字実体参照とは「&」＋英字＋「;」で構成される記述方法です。
  例えば「⇒」記号なら「⇒」で表せます。
• 数値文字参照とは「&#」＋数値＋「;」で構成される記述方法です。
  例えば「⇒」記号なら「⇒」で表せます。

これらの仕様に沿った文字列をHTMLソース内に書くことで、対応する文字をウェブ上に表示できます。すべて半角文字で記述しなければならない点と、最後に「;」(セミコロン)記号が必要な点を忘れないよう注意して下さい。
 

備考：一般的な記号の表示にも文字実体参照や数値文字参照が使える

なお、文字実体参照や数値文字参照は特殊な文字だけを対象にした仕組みではないため、下記のような漢字変換で出せる「↑↓←→」などの標準的な記号であってもこれらの書き方で表示できます。

「↑」＝↑ ↑　「⇑」＝⇑ ⇑
「↓」＝↓ ↓　「⇓」＝⇓ ⇓
「←」＝← ←　「⇐」＝⇐ ⇐
「→」＝→ →　「⇒」＝⇒ ⇒
「↔」＝↔ ↔　「⇔」＝⇔ ⇔

上記の「↑」記号では、「↑」が文字実体参照の書き方で、「↑」が数値文字参照の書き方です。どちらの書き方を使っても、同じ記号「↑」が表示されます。

さて、本記事の冒頭に掲載したような特殊な矢印記号の具体的な表示方法を以下にご紹介いたします。HTMLソースに実際に記述して表示を試してみて下さい。
 

白抜き矢印、手(指)型矢印、斜め一本線の矢印

まずは、使いどころの多そうな白抜き矢印、手(指)型矢印、斜め一本線の矢印を表示する書き方をご紹介いたします。各記号の表示例は下図の通りです。
 
この記事の本文中では特殊な矢印記号を表示できない可能性があるため、矢印記号そのものは記載していません。表示例の図と照らし合わせて使って下さい。

※各行末尾の括弧の中は、Unicodeで定義されている記号名称と、Unicodeのコード番号です。特に必要ではありませんが参考までに掲載しています。
 

• 白抜き矢印1(上)　： ⇧ (UPWARDS WHITE ARROW／U+21E7)
• 白抜き矢印2(下)　： ⇩ (DOWNWARDS WHITE ARROW／U+21E9)
• 白抜き矢印3(左)　： ⇦ (LEFTWARDS WHITE ARROW／U+21E6)
• 白抜き矢印4(右)　： ⇨ (RIGHTWARDS WHITE ARROW／U+21E8)
• 白抜き矢印5(上下)： ⇳ (UP DOWN WHITE ARROW／U+21F3)
• 白抜き矢印6(改行)： ⏎ (RETURN SYMBOL／U+23CE)

• 手(指)型矢印1(上)　： ☝ (WHITE UP POINTING INDEX／U+261D)
• 手(指)型矢印2(下)　： ☟ (WHITE DOWN POINTING INDEX／U+261F)
• 手(指)型矢印3(左)　： ☜ (WHITE LEFT POINTING INDEX／U+261C)
• 手(指)型矢印4(右)　： ☞ (WHITE RIGHT POINTING INDEX／U+261E)
• 手(指)型矢印5(黒右)： ☛ (BLACK RIGHT POINTING INDEX／U+261B)
• 手(指)型矢印6(黒左)： ☚ (BLACK LEFT POINTING INDEX／U+261A)

• 斜め矢印1(右上)： ↗ (NORTH EAST ARROW／U+2197)
• 斜め矢印2(右下)： ↘ (SOUTH EAST ARROW／U+2198)
• 斜め矢印3(左上)： ↖ (NORTH WEST ARROW／U+2196)
• 斜め矢印4(左下)： ↙ (SOUTH WEST ARROW／U+2199)
• 斜め矢印5(左上～右下)：⤡
  (NORTH WEST AND SOUTH EAST ARROW／U+2921)
• 斜め矢印6(左下～右上)：⤢
  (NORTH EAST AND SOUTH WEST ARROW／U+2922)

■フォントによって矢印の形は微妙に異なる
上記の矢印記号は環境によっては表示できない場合もある点にご注意下さい。また、実際の見た目はフォントによって異なります。例えば下図は3種類のフォント「游ゴシック」・「メイリオ」・「ＭＳゴシック」で上記の各矢印記号を表示したところです。どれも記号としての内容は同じですが、見た目は微妙に異なります。
   

横向きの三角形記号、カッコ、曲線の矢印

次に、さらに使いどころがありそうな、横向きの三角形記号やカッコ、曲線の矢印を表示する書き方をご紹介いたします。横向きの三角形は矢印の代わりに使いやすいですが、漢字変換では出せない可能性があるので数値文字参照の書き方を知っておくと便利です。
 
※各行末尾の括弧の中は、Unicodeで定義されている記号名称と、Unicodeのコード番号です。特に必要ではありませんが参考までに掲載しています。
 

• 横向き三角形1(白左)： ◁ (WHITE LEFT-POINTING TRIANGLE／U+25C1)
• 横向き三角形2(白右)： ▷ (WHITE RIGHT-POINTING TRIANGLE／U+25B7)
• 横向き三角形3(黒左)： ◀ (BLACK LEFT-POINTING TRIANGLE／U+25C0)
• 横向き三角形4(黒右)： ▶ (BLACK RIGHT-POINTING TRIANGLE／U+25B6)

• 横向きカッコ1(一本線)： < (LESS-THAN SIGN／U+003C)
• 横向きカッコ2(一本線)： > (GREATER-THAN SIGN／U+003E)
• 横向きカッコ3(二本線)： «
  (LEFT-POINTING DOUBLE ANGLE QUOTATION MARK／U+00AB)
• 横向きカッコ4(二本線)： »
  (RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK／U+00BB)

• 曲線矢印1(上がり調子)： ⤴
  (ARROW POINTING RIGHTWARDS THEN CURVING UPWARDS／U+2934)
• 曲線矢印2(下がり調子)： ⤵
  (ARROW POINTING RIGHTWARDS THEN CURVING DOWNWARDS／U+2935)
• 曲線矢印3(右上～左下)： ⤶
  (ARROW POINTING DOWNWARDS THEN CURVING LEFTWARDS／U+2936)
• 曲線矢印4(左上～右下)： ⤷
  (ARROW POINTING DOWNWARDS THEN CURVING RIGHTWARDS／U+2937)

※カッコは数値文字参照ではなく文字実体参照で指定できます。「<」記号を出すための「lt」は「Less Than(小なり)」の意味で、「>」記号を出すための「gt」は「Greater Than(大なり)」の意味です。よく使われる記号には、このように分かりやすい名称が付けられています。例えば、コピーライト記号「©」なら「&copy;」、ハートマーク「♥」なら「&hearts;」などのようにです。
 

太い矢印、鏃のような矢印、矢のような矢印

右向きの矢印に限定すると、もっとたくさんの矢印があります。図の上部に掲載したような「太い矢印」も需要は多いでしょう。また、鏃や矢のような矢印も使ってみると面白いかもしれません。それぞれ、以下の数値文字参照で表示できます。
 
※各行末尾の括弧の中は、Unicodeで定義されている記号名称と、Unicodeのコード番号です。特に必要ではありませんが参考までに掲載しています。
 

• 太い矢印1： &#38;#10132; (HEAVY WIDE-HEADED RIGHTWARDS ARROW／U+2794)
• 太い矢印2： &#38;#10140; (HEAVY ROUND-TIPPED RIGHTWARDS ARROW／U+279C)
• 太い矢印3： &#38;#10145; (BLACK RIGHTWARDS ARROW／U+27A1)
• 太い矢印4： &#38;#10162; (CIRCLED HEAVY WHITE RIGHTWARDS ARROW／U+27B2)

• 鏃のような矢印1： &#38;#10146;
  (THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD／U+27A2)
• 鏃のような矢印2： &#38;#10147;
  (THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD／U+27A3)
• 鏃のような矢印3： &#38;#10148;
  (BLACK RIGHTWARDS ARROWHEAD／U+27A4)
• 鏃のような矢印4： &#38;#10151;
  (SQUAT BLACK RIGHTWARDS ARROW／U+27A7)

• 矢のような矢印1： &#38;#10163;
  (WHITE-FEATHERED RIGHTWARDS ARROW／U+27B3)
• 矢のような矢印2： &#38;#10173;
  (HEAVY WEDGE-TAILED RIGHTWARDS ARROW／U+27BD)
• 矢のような矢印3： &#38;#10168;
  (HEAVY BLACK-FEATHERED RIGHTWARDS ARROW／U+27B8)
• 矢のような矢印4： &#38;#10170;
  (TEARDROP-BARBED RIGHTWARDS ARROW／U+27BA)

 

特殊な矢印記号の存在を探して、その表示方法を調べるには

さて、このページでは使いどころのありそうな数種類の矢印記号に限定して、数値文字参照での書き方をご紹介いたしました。実際にお使いのブラウザで表示を確認してみたい場合は、サンプルページ「ウェブ上で使える矢印記号いろいろ」をご覧下さい。
 
上記のサンプルページでも、すべての矢印記号を網羅しているわけではありません。前ページでご紹介したようにUnicodeで定義されている矢印記号は100個を超えており、そのすべてを本記事中で紹介するにはスペースがまったく足りません。

そこで最後に、どのような記号が存在していて、それを数値文字参照で入力するにはどうすれば良いのかを自力で調べる方法を紹介しておきます。好みの矢印記号を見つけて、活用してみて下さい。