WEBデザイン

【保存版】色々使えるHTML特殊文字まとめ

ウェブページを作っていて、ちょっとしたアクセントが欲しい時にとても便利な特殊文字

今回は、HTML特殊文字を使いやすい用途ごとにまとめてご紹介します!

知ってると便利!HTML特殊文字

特殊文字をコピペで使う人も多いようですが、ブラウザや使っているCMSなどではコピペでは表示がされない場合があります

そんな時にはきちんと『エスケープ処理』で文字変換処理をされたコードを使用してください。

文字化けや非表示のようなことも回避できますのでこの記事を参考にしてみてくださいね。

よく使われるHTML特殊文字

空白    
コピーライト © ©
登録商標 ® ®
トレードマーク ™
ダブルクオーテーション "
アポストロフィ '
大なり > >
小なり < &lt;
アンバサンド & &amp;
¥ &yen;

リンクボタンに使えそうな特殊文字

右角引用符 » &raquo;
左角引用符 » &raquo;
右向き黒三角 &#x25B6;
右向き三角 &#x25B7;
引き返し左向き矢印 &larrhk;
引き返し右向き矢印 &rarrhk;
下向き右折矢印 &rdsh;
コーナー付き矢印 &crarr;
左巻き矢印 &orarr;
右巻き矢印 &olarr;
右向き小正三角形(黒) &rtrif;
左向き小正三角形(黒) &ltrif;
右向き小正三角形(白) &rtri;
左向き小正三角形(白) &ltri;

リスト表示で使えそうな特殊文字

正方形(黒) &squf;
ひし形(黒) &lozf;
ひし形(白) &loz;
2つ結合した正方形 &boxbox;
チェックマーク &check;
エックスマーク &cross;
ビュレット &#x2022;
白ビュレット &#x25E6;
チェックなし &#9744;
チェック &#9745;
バツ &#9746;
白指差し記号・右 &#9758;

可愛くて便利なシンボル特殊文字

晴れ &#9728;
曇り &#9729;
&#9730;
&#9731;
黒電話 &#9742;
白電話 &#9743;
笑顔マーク &#9786;
不満顔マーク &#9785;
黒笑顔マーク &#9787;
ハート・白 &#9825;
スペード・白 &#9828;
ダイヤ・白 &#9826;
クローバー・白 &#9831;
ハート・黒 &#9829;
スペード・黒 &#9824;
ダイヤ・黒 &#9830;
クローバー・黒 &#9827;
八分音符 &#9834;
連桁付き八分音符 &#9835;
連桁付き十六分音符 &#9836;

おまけ:Macの記号 特殊文字

control &#8963;
shift &#8679;
Caps Lock &#8682;
command &#8984;
option &#8997;
delete右 &#8998;
delete左 &#9003;
return &#9166;
esc &#9099;

 

ABOUT ME
FreeLaDay管理人
FreeLaDay管理人
現役フリーランスによる情報サイト。 webデザインに関する知識などを主に、コラムやライティング術など、在宅ワークが充実するような楽しい記事も掲載中です。