ホームページ作成/特殊文字・記号の記述 (HTML)

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

ウェブ上に表示できる矢印記号は、実は100種類以上もあります。上下左右を表す矢印「↑↓←→」だけではなく、斜め方向の矢印、二重線の矢印、カーブした矢印、太い矢印、手や指の形をした矢印など、テキストで表示できる絵文字のような矢印記号が多数あります。矢印の代わりに三角記号「▲▽」も使われますが、これも上下以外に横向きの三角形も表示できます。数値文字参照の書き方を使って特殊な矢印記号の出し方をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

どのような矢印記号が存在しているのかを調べる方法の例

Unicodeにどんな記号が定義されているのかを調べる方法はいくつかあります。本記事の冒頭でも少しご紹介したように、Unicodeを定義している組織The Unicode Consortiumのウェブサイトから調べる手もあります。しかし、あまり使い勝手が良い方法とは言えません。ここではもっと簡単な方法をご紹介いたします。

日本語環境には、何らかの日本語入力機能(IME)があるはずです。Windows環境なら、標準では「Microsoft IME」がインストールされています。ATOKなどのサードパーティー製IMEをお使いの方々もいらっしゃるでしょう。それらのIMEにはたいてい文字や記号を一覧する機能があります。その機能を使えば、様々な矢印記号を簡単に探せます。
 
文字や記号を一覧できる機能を使って矢印記号を探す

文字や記号を一覧できる機能を使って矢印記号を探す


以下に、Microsoft IMEの場合と、ATOKの場合の操作方法をご紹介しておきます。

Microsoft IMEで様々な矢印記号を探す操作方法
以下は、Windows7で動作しているMicrosoft IMEの表示例です。タスクバーにある言語バー(IMEのツールバー)内にある「IMEパッド」ボタンをクリックすると、下図のように「IMEパッド」というウインドウが開きます。
 
Microsoft IMEの「IMEパッド」で矢印記号を探す方法

Microsoft IMEの「IMEパッド」で矢印記号を探す方法


左端にあるボタン群から「文字一覧」ボタンをクリックすると、文字コード順に文字が参照できるようになります。「文字カテゴリ」欄から「矢印」などを選択すれば、上図のように矢印記号の一覧が表示されます。この一覧画面内で任意の記号をクリックすれば、その記号をそのまま入力することもできます。

ATOKで様々な矢印記号を探す操作方法
以下は、Windows10で動作しているATOKの表示例です。ATOKのツールバー内にあるメニューボタン(下図赤丸1)をクリックしてメニューを出し、その中の「文字パレット」項目(下図赤丸2)をクリックすると、下図の右側のように「ATOK文字パレット」というウインドウが開きます。
 
ATOKの「ATOK文字パレット」で矢印記号を探す方法

ATOKの「ATOK文字パレット」で矢印記号を探す方法


上図の赤丸3の部分に見える「Unicode表」タブをクリックすると、文字コード順に文字を参照できるようになります。さらに、赤丸4の部分に見える「見出し」欄に「矢印」などを指定すると、上図のように様々な矢印記号を一覧で見ることができます。任意の記号をクリックした上で「コピー」ボタンを押せば、その記号をクリップボードにコピーできます。「確定」ボタンを押せばその記号を直接入力することもできます。
 

HTMLの文字コードがUTF-8なら、特殊な矢印記号でもそのまま書ける

HTMLの文字コードがUTF-8なら、特殊な記号もそのままソースに含められる

HTMLの文字コードがUTF-8なら、特殊な記号もそのままソースに含められる

もしウェブページの文字コードを「UTF-8」などのUnicodeで作成しているのであれば、HTMLソース中にそのまま記号を書いても問題なく表示できます。しかし、「SHIFT-JIS」や「EUC-JP」などのUnicodeではない文字コードを使って作成している場合には、特殊な文字をそのままソースに含めることはできません。もし含めたとしても、保存時に文字化けしてしまいます。

その場合には、望む記号に対応する数値文字参照の番号を調べる必要があります。
 

特殊な記号に対応する数値文字参照の番号を調べる方法の例

特殊な記号に対応する数値文字参照の番号を調べるのはやや面倒です。ここでは、テキストエディタ「EmEditor」に搭載されているエンコード機能を使って変換する方法をご紹介いたします。

Step.1 目的の記号を入力する
編集領域に記号を入力

編集領域に記号を入力


まず、EmEditorの編集領域に、目的の記号を直接入力します。先程ご紹介したようにIMEの文字一覧機能を使って入力しても構いませんし、どこか別の場所に表示されている記号をコピー&ペーストしても構いません。

ここでは例として図のように4つの矢印記号を入力しました。

 
Step.2 範囲選択して「数値文字参照に変換」機能を適用
次に、それらを範囲選択して右クリックします(下図赤丸1)。するとメニューが表示されますから「選択範囲のエンコード/デコード」(下図赤丸2)をポイントして、「UnicodeをHTML/XML数値文字参照に変換」(下図赤丸3)をクリックします。
 
記号を範囲選択して右クリックし、メニューから「数値文字参照に変換」を選択

記号を範囲選択して右クリックし、メニューから「数値文字参照に変換」を選択


 
結果. 記号が数値文字参照に変換される
すると下図のように、選択範囲内に含まれていた記号が数値文字参照の書き方に変換されます。これらをHTMLソースなどに転記すれば、望みの記号をウェブ上に掲載できます。
 
入力した記号が数値文字参照に変換された

入力した記号が数値文字参照に変換された


 
上記の方法なら、どんな記号でも簡単に数値文字参照に変換できます。なお、上記のStep.2で「UnicodeをHTML/XML数値文字参照に変換」項目ではなく、「UnicodeをHTML文字実体参照に変換」項目の方をクリックすれば、数値文字参照ではなく文字実体参照に変換することもできます(その記号に文字実体参照の書き方が用意されている場合のみ)。
 

ウェブ上で表示可能な矢印記号は100個を超えて多数存在する

今回は、ウェブ上で使える様々な矢印記号と、その表示方法をご紹介いたしました。おそらく想像以上にたくさんの矢印記号があったのではないでしょうか? 望みの矢印記号を探して、ぜひ様々な場所で活用してみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます