Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

HTMLコーディングで記号を使うケースは多々ありますが、特殊文字を使用したい場合にコードがわからなくて調べた経験はありませんか?

コーディングで時間を取られるならまだ諦めもつきますが、それ以外の調べ物で時間を取られることは大変なストレスとなります。

そこで今回の記事では、特殊文字のコードについてのお役立ち記事を書いていきたいと思います。

使用の際の注意点

特殊文字を使用する際に若干注意すべき点がありますので予め説明しておきます。

日本語環境で使用する際、特殊文字の中には文字化けしてうまく表示されないものもいくつか存在します。

これに対し「そういうのは予め省いて掲載すれば良いだけでは?」と思われるかもしれません。

出来ることならそうすべきなのですが、ブラウザやOSのバージョンなど使用している環境によって変わってくるため、ご自身の環境で調べていただく必要があるということをご理解ください。

特殊文字一覧

よく使う特殊文字を一覧にしてみました。

アンパサンド(&)は全角にしてあるので、コピーして使用する場合にはアンパサンド(&)だけ半角に修正してください。

数学記号

+ ← − × ×
÷ ÷ * * ½ ½
= = ± ± ∞
≦ ≧

矢印

← ↑ →
↓ ↖ ↗
↘ ↙ ↔
↕ ⇐ ⇒
⇖ ⇗ ⇘
⇙ ⇔ ⇕

括弧や引用符

‘ ’ “
” 〝 〞
〟 ( ( ) )
[ [ ] ] { {
} } « « » »
〈 〉 《
》 「 」
&#12302; &#12303; < &lt;
> &gt; & &amp; &quot;
&#39;

単位

&#13056; &#13057; &#13058;
&#13059; &#13060; &#13061;
&#13062; &#13063; &#13064;
&#13065; &#13066; &#13067;
&#13068; &#13069; &#13070;
&#13071; &#13072; &#13073;
&#13074; &#13075; &#13076;
&#13077; &#13078; &#13079;
&#13080; &#13081; &#13082;
&#13083; &#13084; &#13085;
&#13086; &#13087; &#13088;
&#13089; &#13090; &#13091;
&#13092; &#13093; &#13094;
&#13095; &#13096; &#13097;
&#13098; &#13099; &#13100;
&#13101; &#13102; &#13103;
&#13104; &#13105; &#13106;
&#13107; &#13108; &#13109;
&#13110; &#13111; &#13112;
&#13113; &#13114; &#13115;
&#13116; &#13117; &#13118;
&#13119; &#13127; &#13121;
&#13122; &#13123; &#13124;
&#13125; &#13126; &#13127;
&#13128; &#13129; &#13130;
&#13131; &#13132; &#13133;
&#13134; &#13135; &#13136;
&#13137; &#13138; &#13139;
&#13140; &#13141; &#13142;
&#13143; &#8451; &#8453;
&#8457; &#8467; &#8486;
&#8487; &#8494; &#13169;
&#13170; &#13171; &#13172;
&#13173; &#13184; &#13185;
&#13186; &#13187; &#13188;
&#13189; &#13190; &#13191;
&#13192; &#13193; &#13194;
&#13195; &#13196; &#13197;
&#13198; &#13199; &#13270;
&#13271; &#13272; &#13273;
&#13274; &#13275; &#13276;
&#13277; &#13278; &#13279;
&#13210; &#13211; &#13212;
&#13213; &#13214; &#13215;
&#13216; &#13217; &#13218;
&#13219; &#13227; &#13221;
&#13222; &#13223; &#13224;
&#13225; &#13226; &#13227;
&#13228; &#13229; &#13230;
&#13231; &#13232; &#13233;
&#13234; &#13235; &#13236;
&#13237; &#13238; &#13239;
&#13240; &#13241; &#13242;
&#13243; &#13244; &#13245;
&#13246; &#13247; &#13248;
&#13249; &#13250; &#13251;
&#13252; &#13253; &#13254;
&#13255; &#13256; &#13257;
&#13258; &#13259; &#13260;
&#13261; &#13262; &#13263;
&#13264; &#13265; &#13266;
&#13267; &#13268; &#13269;
&#13270; &#13271; &#13272;
&#13273; &#13274; &#13275;
&#13276; &#13277;

特殊記号の使い方

特殊記号の使い方は至ってシンプルです。

コンテンツ(要素で囲んだ中身)に直接上記の記号を記述すれば、後はブラウザが自動で判断してくれます。

よく特殊記号の説明では計算問題が使われますので、当記事でも計算式を例にしてサンプルコードを完成させてみます。

具体的には次のようになります。

// 30+2×5-(4÷2)=38
<p>30&#43;2&#215;5&#8722;&#40;4&#247;2&#41;&#61;38</p>

表示結果

まとめ

特殊記号について一覧をメインに簡単な使い方と共に記事にしてみましたが、いかがでしたか?

今回は解説というよりは一覧がメインとなってしまいましたが、この記事をブックマーク登録してもらって、特殊記号がわからないという時に役立ててもらえたら嬉しいです。

特殊文字を全部覚えるのは大変だと思いますので、自身でよく使うものはリスト化したりマクロ化したり色々工夫してみましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。