【HTML】なかなか覚えられない特殊記号コードについて一覧と簡単な使い方を説明。
  • facebookページ
  • twitterページ
  • 2020.06.03

    【HTML】なかなか覚えられない特殊記号コードについて一覧と簡単な使い方を説明。

    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;

    特殊記号の使い方

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

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

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

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

    表示結果

    まとめ

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

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE