オーダーメイドコース
icon
icon

HTMLの特殊文字で表示できる矢印を現役エンジニアが紹介【初心者向け】

初心者向けにHTMLの特殊文字で表示できる矢印について解説しています。最初にWeb上で特殊文字を扱う際の注意点について説明します。次に文字コードを使って特殊文字の矢印を表示する方法を学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

HTMLの特殊文字で表示できる矢印について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

特殊文字で表示できる矢印について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの特殊文字で表示できる「矢印」を表示してみよう!

今回は、HTMLの特殊文字で表示できる矢印を表示する方法について解説してみます。

特殊文字とは

通常の半角英数字、ひらがな、カタカナ、漢字、ごく一部の記号を除いた特別な記号のことを指します。
単位、郵便番号、数学などで登場する算術記号などが含まれます。全部覚えておく必要はありません。

Googleで、「任意の出したい記号」と「文字コード」と半角スペース区切りで入力し、検索しましょう。出た結果をコピー&ペーストすると良いでしょう。特殊文字表一覧のサイトをブックマークしておいても良いでしょう。

矢印の出し方

ほとんどの記号に関しては、「やじるし」「みぎ」「ひだり」「した」と入力し、文字変換して使うとよいでしょう。

一部の矢印はコードで入力した方がよいのですが、実際サイト制作で必要になることはあまりない、と考えてよいでしょう。

一般的によく使われるであろう矢印

では、一般的な矢印以外の特殊記号を表示してみます。(一般的な名称を入れてみました)

← ←/←
↑ ↑/↑
→ →/→
↓ ↓/↓
↔ ↔/↔
↕ ↔/↕

↖ ↖
↗ ↗
↘ ↘
↙ ↙

↵ ↵/↵

⇐ ⇐/⇐
⇒ ⇒
⇔ ⇔/⇔

⇕ ⇕
⇖ ⇖
⇗ ⇗
⇘ ⇘
⇙ ⇙

⇝ ⇝
‹ ‹/‹
› ›/›
 >/>

« «/«
» »/»

〈 〈
〉 〉

《 《
》 》

‹ ‹
› ›

∧ ∧/∧
∨ ∨/∨

≪ ≪
≫ ≫

▲ ▲
△ △
▴ ▴
▵ ▵

▶ ▶
▷ ▷
▸ ▸
▹ ▹
► ►
▻ ▻

▼ ▼
▽ ▽
▾ ▾
▿ ▿

◀ ◀
◁ ◁
◂ ◂
◃ ◃
◄ ◄
◅ ◅

◢ ◢
◣ ◣
◤ ◤
◥ ◥

☜ ☜
☝ ☝
☞ ☞
☟ ☟

結構ありますね!!!

 

注意:一部の記号表示は文字コードを使うこと!

基本的な全角の矢印については、そのまま入力でよいでしょう。

一部の特殊な星については、機種依存文字となるので、HTML上では文字コードでの入力がベターです。
クライアントさんからいただいた原稿からコピー&ペーストする際にはこれらの記号は大丈夫かを確認しましょう(別途文字校正担当さんがいても軽くは見ておきましょう)。

特殊文字記号を使った場合は、制作物の納品前にそういった記号が正しく表示されているか?を端末毎にチェックしておきましょう。

 

[PR] Webデザインで副業する方法とは

注意:サイト全体での記号の統一

補足的な注意となりますが、サイト全体での記号の統一も重要です。違うスタイルの矢印が混在しているようなサイトは読みにくく、文字校正上でも適切ではありません。一般的な用例、用法に沿った使い方をすること、統一をするように心がけることも必要です。

今回は、HTMLの特殊文字で表示できる矢印の表示、表示方法について紹介しました。

 

監修してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。
制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。