【HTML】特殊文字の使い方+カテゴリごとにまとめた一覧を紹介!
  • facebookページ
  • twitterページ
  • 2020.06.26

    【HTML】特殊文字の使い方+カテゴリごとにまとめた一覧を紹介!

    特殊文字とは

    特殊文字とは、HTMLを記述する場合に使う記号(<> や ” など)や、©や&などの特別な文字のことをいいます。

    一般的には、英字、数字、カナ、かな、漢字以外の文字コードが当てはまります。

    特殊文字の書き方

    特殊文字の書き方には「数値文字参照(文字参照)」と「文字実体参照(実体参照)」の2種類があります。

    それぞれの特徴を簡単に説明しますね。

    数値文字参照(文字参照)

    数値文字参照は、10進数または16進数で該当の特殊文字をISO 10646の文字番号で指定する方法のことです。

    例えば、次のコードは「©」を意味しています。

    ※自動変換回避のため(;)を外しています。

    文字実体参照(実体参照)

    文字実体参照は、特定の文字列によって該当の特殊文字を指定する方法のことです。

    次のコードも先ほどと同じく「©」を意味しています。

    こちらは「copy」と書かれているので、直感的にどの特殊文字を意味しているのかがわかりやすいと思います。

    そのため、一般的に特殊文字は文字実体参照で表現されることが多いです。

    ただし、特殊文字の中には数値文字参照でしか表現できないものもある(「♪」など)ため、その場合は数値文字参照で記述します。

    それぞれの特徴はわかったかと思います。

    では、サンプルコードで表示を確認してみましょう。

    特殊文字の書き方

    特殊文字一覧

    特殊文字は、上記で紹介したもの以外にも様々なものが存在します。

    ここでは、特殊文字をカテゴリごとにまとめて一覧にしました。

    実際に使用する際に参考にしてください。

    図形(三角形)

    数値文字参照 文字実体参照 表示 説明
    &#9650 上向き正三角形(黒)
    &#9651 &xutri; 上向き正三角形(白)
    &#9652 &utrif; 上向き小正三角形(黒)
    &#9653 &utri; 上向き小正三角形(白)
    &#9654 右向き正三角形(黒)
    &#9655 右向き正三角形(白)
    &#9656 &rtrif; 右向き小正三角形(黒)
    &#9657 &rtri; 右向き小正三角形(白)
    &#9658 右向き三角形(黒)
    &#9659 右向き三角形(白)
    &#9660 下向き正三角形(黒)
    &#9661 &xdtri; 下向き正三角形(白)
    &#9662 &dtrif; 下向き小正三角形(黒)
    &#9663 &dtri; 下向き小正三角形(白)
    &#9664 左向き正三角形(黒)
    &#9665 左向き正三角形(白)
    &#9666 &ltrif; 左向き小正三角形(黒)
    &#9667 &ltri; 左向き小正三角形(白)
    &#9668 左向き三角形(黒)
    &#9669 左向き三角形(白)
    &#9698 右下直角三角形(黒)
    &#9699 左下直角三角形(黒)
    &#9700 左上直角三角形(黒)
    &#9701 右上直角三角形(黒)
    &#9720 &ultri; 左上直角三角形(白)
    &#9721 &urtri; 右上直角三角形(白)
    &#9722 &lltri; 左下直角三角形(白)
    &lrtri; 右下直角三角形(白)

    ※自動変換回避のため(;)を外しています。

    図形(丸・円)

    数値文字参照 文字実体参照 表示 説明
    &#9675 白丸
    &#9676 白丸(点線)
    &#9679 黒丸
    &#9678 二重丸
    &#9673 蛇の目
    &#10687 &ofcir; ⦿ 蛇の目、丸中黒
    &#9680 左半黒丸
    &#9681 右半黒丸
    &#9682 下半黒丸
    &#9683 上半黒丸
    &#9677 縦線丸
    &#9684 右上1/4の黒丸
    &#9685 右下3/4の黒丸
    &#9686 左半円
    &#9687 右半円
    &#8226 &bull; &bullet; ビュレット
    &#9702 白ビュレット

    ※自動変換回避のため(;)を外しています。

    矢印

    数値文字参照 文字実体参照 表示 説明
    &#8592 &larr; 左向き矢印
    &#8593 &uarr; 上向き矢印
    &#8594 &rarr; 右向き矢印
    &#8595 &darr; 下向き矢印
    &#8596 &harr; 左右向き矢印
    &#8597 &varr; 上下向き矢印
    &#8598 &nwarr; 左上向き矢印
    &#8599 &nearr; 右上向き矢印
    &#8600 &searr; 右下向き矢印
    &#8601 &swarr; 左下向き矢印
    &#8624 &lsh; 上から左向き矢印
    &#8625 &rsh; 上から右向き矢印
    &#8626 &ldsh; 下から左向き矢印
    &#8627 &rdsh; 下から右向き矢印
    &#8629 &crarr; Enterキー・改行
    &#8630 &cularr; 上半円の反時計回り矢印
    &#8631 &curarr; 上半円の時計回り矢印
    &#8634 &olarr; 開いた円の反時計回り矢印
    &#8634 &orarr; 開いた円の時計回り矢印
    &#8644 &rlarr; 右向き矢印+左向き矢印
    &#8645 &udarr; 上向き矢印+下向き矢印
    &#8646 &lrarr; 左向き矢印+右向き矢印
    &#8693 &duarr; 下向き矢印+上向き矢印
    &#8647 &llarr; ペアの左向き矢印
    &#8648 &uuarr; ペアの上向き矢印
    &#8649 &rrarr; ペアの右向き矢印
    &#8650 &ddarr ペアの下向き矢印
    &#8656 &lArr; 左二重線矢印
    &#8657 &uArr; 上二重線矢印
    &#8658 &rArr; 右二重線矢印
    &#8659 &dArr; 下二重線矢印
    &#8660 &hArr; 左右二重線矢印
    &#8661 &vArr; 上下向き二重矢印
    &#8662 &nwArr; 左上向き二重矢印
    &#8663 &neArr; 右上向き二重矢印
    &#8664 &seArr; 右下向き二重矢印
    &#8665 &swArr; 左下向き二重矢印
    &#8666 &lAarr; 左向き三重矢印
    &#8667 &rAarr; 右向き三重矢印
    &#8676 &larrb; 左タブ
    &#8677 &rarrb; 右タブ
    &#8669 &zigrarr; ジグザグ右向き矢印

    ※自動変換回避のため(;)を外しています。

    括弧(カッコ)

    数値文字参照 文字実体参照 表示 説明
    &#40 &lpar; ( 左カッコ
    &#41 &rpar; ) 右カッコ
    &#91 &lbrack; [ 左ブラケット
    &#92 &rbrack; ] 右ブラケット
    &#123 &lbrace; { 左ブレース
    &#125 &rbrace; } 右ブレース
    &#145 &apos; アポストロフィ(始)
    &#146 &apos; アポストロフィ(終)
    &#147 &quot; 二重引用符、ダブルクォーテーション(始)
    &#148 &quot; 二重引用符、ダブルクォーテーション(終)
    &#171 &laquo; « 左角引用符
    &#187 &raquo; » 右角引用符
    &#12296 左山カッコ
    &#12297 右山カッコ
    &#12298 左二重山カッコ
    &#12299 右二重山カッコ
    &#12300 左鉤括弧(かぎかっこ)
    &#12301 右鉤括弧(かぎかっこ)
    &#12302 左二重二重鉤括弧(かぎかっこ)
    &#12303 右二重鉤括弧(かぎかっこ)
    &#12304 左隅付き括弧・墨付き括弧(すみつきかっこ)
    &#12305 右隅付き括弧・墨付き括弧(すみつきかっこ)
    &#12308 左亀甲括弧(きっこうかっこ)・亀の子括弧(かめのこかっこ)
    &#12309 右亀甲括弧(きっこうかっこ)・亀の子括弧(かめのこかっこ)
    &#12314
    &#12315
    &#12317
    &#12319
    &#12310 左白抜き括弧
    &#12311 右白抜き括弧
    &#12312 左二重亀甲括弧(きっこうかっこ)
    &#12313 右二重亀甲括弧(きっこうかっこ)

    ※自動変換回避のため(;)を外しています。

    その他よく使う記号・空白・改行

    数値文字参照 文字実体参照 表示 説明
    &#38 &amp; & アンパサンド、アンド
    &#169 &copy; © コピーライト
    &#60 &lt; < 不等号(より小さい)
    &#62 &gt; > 不等号(より大きい)
    &#160 &nbsp; 改行しない半角スペース
    &#8194 &ensp; nと同じ幅のスペース
    &#8195 &emsp; mと同じ幅のスペース
    &#010 改行
    &#009 タブ

    特殊文字を簡単に変換する

    使いたい特殊文字を一覧から探すのは、時間がかかるし少し面倒ですよね。

    そんなときは特殊文字を簡単に変換してくれるツールを使うと便利です。

    例えば、以下のサイトは使いたい特殊文字を入力すると、対応する文字実体参照がわかります。

    逆に、文字実体参照を入力すれば特殊文字を表示してくれます。

    https://tech-unlimited.com/escape.html

    特殊文字を簡単に変換する

    特殊文字のエスケープとは

    エスケープとは、HTML上で特殊文字を表示すさせるための文字変換の方法のことです。

    例えば、プログラムコードでも使われる「<」や「>」などを、<や>で表現します。

    「なんでエスケープで表現するの?」と思う方もいるかもしれません。

    これらの記号をエスケープなしでプログラムに取り込んでしまうと、バグの原因になる可能性があるのです。

    また、クロスサイトスクリプティング(XSS)などのサイバー攻撃の標的になってしまう場合もあります。

    まとめ

    HTMLの特殊文字について解説しました。

    &や©など、HTML作成をする際によく使用する特殊文字は、数値文字参照や文字実体参照を覚えておくと便利です。

    また、使いたい特殊文字があればぜひこの記事を参考にしてください!



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

    この記事をシェア

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









    ABOUT US

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

    READ MORE