クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【HTML特殊文字 85種類】サイトカスタマイズに使えそうな記号コードまとめ(©▼♬✡...)

f:id:clrmemory:20171122104824p:plain

こんにちはクリアメモリです!

サイトをカスタマイズしている時「©(コピーライト)」や「▼(逆三角)」などを使うことがあると思います。

 

このような記号はHTML特殊文字と呼ばれており、対応したコードを入力することで自動的に書き換えられているんです。

そこで今回は、HTML特殊文字の記号コードをまとめて紹介します。

 

はじめに

 

今回紹介するのは「HTML特殊文字」についてです。

フッターに「©サイトタイトル」のように表記したい時、この記号をどのように入力すれば良いかわかりますか?

 

HTMLの記号コードを入力することで、自動的に変換してくれます。

マークダウンでブログを書くときにも使えるので、ぜひ覚えてみてください。

 

©(コピーライト)

 

まずは、HTML特殊文字「コピーライト」です。

HTMLの中に以下のように記述してください。

©

 

表示 コード
© ©

 

HTMLの中で使う場合、「©」と入力するだけです。

基本的に「&○○;」のような形になるので、覚えておきましょう。

 

○(丸)

 

ひとことで丸といっても、二重丸や塗りつぶした丸・小さな丸など色々ありますよね。

一気に見ていきましょう。

 

表示 コード 表示 コード
○ ◎
● ◦
◯

 

上から順に、

  • 普通の丸
  • 二重丸
  • 黒丸
  • 小さい丸
  • 大きい丸

 

となっています。

丸はHTMLコードの中でも出番が多いので、ぜひ覚えておきましょう。

 

□(四角)

 

続いて四角形のHTML特殊文字です。

 

表示 コード 表示 コード
□ ■
▫ ▪
◇ ◆

 

順に

  • 普通の四角形
  • 黒い四角形
  • 小さな四角形
  • 小さな四角形(黒)
  • 回転した四角形
  • 回転した四角形(黒)

 

△(三角形)

 

次は三角形の記号コードです。

 

表示 コード 表示 コード
△ ▲
▽ ▼
◀
◢ ◣
◥ ◤

 

三角形は、クリックされた時に表示されるコンテンツなどでよく使われていますね。

 

トランプ記号

 

HTML特殊文字を使えば、トランプのマークを表示することもできるんです。

 

表示 コード 表示 コード
♡ ♤
♢ ♧
♥ ♠
♦ ♣

 

このように、ハート・スペード・ダイヤ・クローバーをHTMLで入力できるようになります。

それぞれ、黒いバージョンもあるので覚えておきましょう。

 

♪(音符マーク)

 

次は音符マークを表示させてみましょう。

 

表示 コード 表示 コード
♩ ♪
♫ ♬
♭ ♮

 

音符に関しては、文章を書く時にも使えるかもしれませんね♪

 

☆(星)

 

次はいろんな形の記号です。

 

表示 コード 表示 コード
☆ ★
✩ ✪
✫ ✡

 

六芒星なんかも入力できました。

☆お気に入り」のように使うのがオススメ!

 

↑(矢印)

 

続いては、矢印の紹介です。

 

表示 コード 表示 コード
↑ →
↓ ←
↔ ↕
↖ ↗
↘ ↙
⇐ ⇒
↵
☝ ☞
☟ ☜

 

矢印といっても、色々ありますね。

「up arrow」「right arrow」を省略して「uarr」のようなコードになっているので、比較的覚えやすいかと思います。

指のマークもあるので、サイトのデザインに合わせて使い分けてみましょう。

 

> <(大なり小なり)

 

こちらも多く登場する記号「大なり小なり」です。

 

表示 コード 表示 コード
> &gt; < &lt;
&ge; &le;
&rsaquo; &lsaquo;
&#12297; &#12296;
» &raquo; « &laquo;
&and; &or;
&#8810; &#8811;

 

いろんな形の大なり小なりでした。

特に「&lt;」「&gt;」あたりは、使うタイミングが多いので、ぜひ覚えておきましょう。

 

㈱(株式会社)

 

人によっては使うこともある「㈱(株式会社)」は、以下のように書くことで表示できます。

 

表示 コード 表示 コード
&#12849; &#12945;

 

™(商標)

 

商標(トレードマーク)は、以下のように記述します。

 

&trade;

 

表示 コード
&trade;

 

✓(チェック)

 

チェックマークは、サイトカスタマイズでも使えますし、記事内の見出しにも使えるかもしれません。

 

表示 コード 表示 コード
&#10003; &#10004;
&#x2610; &#x2611;
&#x2612; &#x2613;

 

ただの四角形に見えるのは、一応チェックなしの状態を表しています。

チェックとは少し違いますが、バツ(☓)も一緒に紹介しました。

 

&(アンドマーク)

 

これまで紹介してきたHTML特殊文字を見てみると、「&〇〇」というような形になっていましたよね。

&(アンド)をマークダウンの記事などで入力すると、意図しない変換が起こってしまうことがあるので、これはぜひ覚えておいてください。

 

&amp;

 

表示 コード
& &amp;

 

☀(天気マーク)

 

あまり出番はありませんが、晴れ・雨などの天気マークにもHTML特殊記号が用意されているんです。

 

表示 コード 表示 コード
&#9728; &#9729;
&#9730; &#9731;

 

まとめ

 

いかがだったでしょうか。

今回紹介したHTML特殊文字ですが、実はこれでも一部なんです。

今回はサイトカスタマイズに使えそうなHTML特殊文字だったので割愛しましたが、ギリシャ文字やローマ数字にも記号コードが用意されているので、余裕があれば探して見てください。

 

用意されているHTML特殊文字の中には、&amp(ampersand)や&lt;(Less than)、&copy;(Copyright)など、記号の名前を元に設定されているものが多いです。

そういったことを考えながら、改めてHTML特殊文字を見ると面白いですよね。

www.clrmemory.com

 

ぜひ覚えてみてください。

ではまた。

新着記事