HTML 特殊文字

< >
⇑これどうやって出してるの?

< や >など普通に出せない文字の出し方

 HTMLでは、<(小なり)と>(大なり)はHTMLタグを示す記号として使われるので、普通に<、>と記入するだけでは文字として表示できません。
「<」を出すには「&lt;」と記入して、「>」を出すには、「&gt;」と入力します。
ちなみに、「&」の出し方は、「&amp;」と入力すると出すことができます。

 その他、HTMLで特殊な文字として扱われる文字には「空白」「"」「'」があります。
空白を出すには、「&nbsp;」、「&quot;」を出すには「"」、「'」を出すには「'」と記入すれば文字として表示できます。
これらのような文字の記入の仕方を「文字実体参照」と呼びます。

 文章ではわかりにくいので、表にしてみましょう。

文字実体参照 表示 備考・説明
&lt; < 小なり
&gt; > 大なり
&amp; & アンパサンド
&quot; " クォーテーション
&apos; ' アポストロフィ
&nbsp;   空白

他にも使えそうな特殊文字

 特殊文字はこれだけではありません。
「©」(著作権マーク)や「♥」(ハート)などを見たことはありませんか?
こういった特殊文字も、文字実体参照で表示することができます。

HTMLで使用可能な特殊文字は、HTMLの標準化を行っている W3Cのサイト に掲載されています。
この中から、特に使えそうな特殊文字を表にしてみました。
なお、ブラウザやOSなどの環境によっては表示できない文字があります。

一般的な記号
文字実体参照 表示 備考・説明
&lt; < 小なり
&gt; > 大なり
&amp; & アンパサンド
&quot; " クォーテーション
&apos; ' アポストロフィ
&nbsp;   空白
&iquest; ¿ 逆疑問符
&iexcl; ¡ 逆感嘆符
&bsol; \ バックスラッシュ
&dagger; ダガー
&Dagger; ダブルダガー
&para; 段落記号
&sect; § セクションマーク
&hellip; 省略記号
&numero; ナンバー
&oline; オーバーライン
&blank; 空白記号
&lsquo; シングルクォーテーションマーク(開始)
&rsquo; シングルクォーテーションマーク(終了)
&ldquo; ダブルクォーテーションマーク(開始)
&rdquo; ダブルクォーテーションマーク(終了)
&phone; 電話マーク
&male; 雄記号
&female; 雌記号
&copy; © 著作権マーク
&reg; ® 登録商標マーク
&trade; トレードマーク
&sung; 八分音符
&flat; フラット
&sharp; シャープ
&natur; ナチュラル
図形
文字実体参照 表示 備考・説明
&spades; スペード
&clubs; クラブ
&hearts; ハート
&diams; ダイヤ
&star; 白星
&starf; 黒星
&sext; 六角星
&xutri; 上向き正三角形
&xdtri; 下向き正三角形
&utrif; 上向き小正三角形(黒)
&utri; 上向き小正三角形(白)
&rtrif; 右向き小正三角形(黒)
&rtri; 右向き小正三角形(白)
&dtrif; 下向き小正三角形(黒)
&dtri; 下向き小正三角形(白)
&ltrif; 左向き小正三角形(黒)
&ltri; 左向き小正三角形(白)
&ultri; 直角三角形(左上)
&urtri; 直角三角形(右上)
&lltri; 直角三角形(左下)
&lrtri; 直角三角形(右下)
&squ; 正方形(白)
&squf; 正方形(黒)
&rect; 長方形
&marker; 縦長方形
&fltns; 平行四辺形
&loz; ひし形(白)
&lozf; ひし形(黒)
&boxbox; 2つ結合した正方形
&block; ブロック
&uhblk; ブロック(上半分)
&lhblk; ブロック(下半分)
&blk14; シェード(明るい)
&blk12; シェード(中間)
&blk34; シェード(暗い)
通貨・単位記号
文字実体参照 表示 備考・説明
&yen; ¥ 円マーク
&dollar; $ ドル
&cent; ¢ セント
&euro; ユーロ
&pound; £ ポンド
&curren; ¤ 国際通貨記号
&micro; µ マイクロ
&deg; ° 度記号
&prime; プライム(分)
&Prime; ダブルプライム(秒)
&ell; リットル
&angst; Å オングストローム
&ohm; Ω オーム
&mho; モー


数学記号
文字実体参照 表示 備考・説明
&plus; + プラス
&minus; マイナス
&times; × 乗算記号
&divide; ÷ 除算記号
&equals; = イコール
&plusmn; ± プラスマイナス
&mnplus; マイナスプラス
&ne; 等しくない
&efDot; ほぼ等しい
&equiv; 合同
&le; 小なりイコール
&ge; 大なりイコール
&permil; パーミル(千分率)
&radic; 根号(ルート)
&or; 論理和
&and; 論理積
&cup; 和集合
&cap; 共通部分
&sup; 含む
&sub; 含まれる
&sum; 総和
&prod; 総乗
&prop; 比例
&infin; 無限大
&there4; ゆえに
&becaus; なぜならば
&ang;
&angrt; 直角
&int; 積分
&Int; 二重積分
&conint; 周回積分
&nabla; ナブラ
&frac12; ½ 2分の1
&frac13; 3分の1
&frac23; 3分の2
&frac14; ¼ 4分の1
&frac34; ¾ 4分の3
矢印
文字実体参照 表示 備考・説明
&uarr; 上向き矢印
&darr; 下向き矢印
&larr; 左向き矢印
&rarr; 右向き矢印
&varr; 上下向き矢印
&harr; 左右向き矢印
&nwarr; 左上向き矢印
&nearr; 右上向き矢印
&searr; 右下向き矢印
&swarr; 左下向き矢印
&rlarr; 右向き矢印+左向き矢印
&lrarr; 左向き矢印+右向き矢印
&udarr; 上向き矢印+下向き矢印
&duarr; 下向き矢印+上向き矢印
&uuarr; ペアの上向き矢印
&ddarr; ペアの下向き矢印
&llarr; ペアの左向き矢印
&rrarr; ペアの右向き矢印
&uArr; 上向き二重矢印
&dArr; 下向き二重矢印
&lArr; 左向き二重矢印
&rArr; 右向き二重矢印
&vArr; 上下向き二重矢印
&hArr; 左右向き二重矢印
&nwArr; 左上向き二重矢印
&neArr; 右上向き二重矢印
&seArr; 右下向き二重矢印
&swArr; 左下向き二重矢印
&lAarr; 左向き三重矢印
&rAarr; 右向き三重矢印
&lsh; 上から左向き矢印
&rsh; 上から右向き矢印
&ldsh; 下から左向き矢印
&rdsh; 下から右向き矢印
&crarr; Enterキー・改行
&larrb; 左タブ
&rarrb; 右タブ
&zigrarr; ジグザグ右向き矢印
&cularr; 上半円の反時計回り矢印
&curarr; 上半円の時計回り矢印
&olarr; 開いた円の反時計回り矢印
&orarr; 開いた円の時計回り矢印
罫線
文字実体参照 表示 備考・説明
&boxh; 罫線 水平線
&boxv; 罫線 垂直線
&boxvh; 罫線 水平線+垂直線
&boxdr; 罫線 左上
&boxhd; 罫線 上
&boxdl; 罫線 右上
&boxvr; 罫線 左
&boxvl; 罫線 右
&boxur; 罫線 左下
&boxhu; 罫線 下
&boxul; 罫線 右下
&boxH; 二重罫線 水平線
&boxV; 二重罫線 垂直線
&boxVH; 二重罫線 水平線+垂直線
&boxDR; 二重罫線 左上
&boxHD; 二重罫線 上
&boxDL; 二重罫線 右上
&boxVR; 二重罫線 左
&boxVL; 二重罫線 右
&boxUR; 二重罫線 左下
&boxHU; 二重罫線 下
&boxUL; 二重罫線 右下
その他
文字実体参照 表示 備考・説明
&check; チェックマーク
&cross; エックスマーク
&copysr; マルPマーク
&target; 位置表示
&telrec; 電話録音記号
&vzigzag; 縦ジグザグ線
&cirmid; 垂直線上円
&midcir; 垂直線下円
&malt; マルタ十字
&incare; care of…(…様方)

サンプル

 今回説明した、特殊文字を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>~</body>)に書いてください。

サンプルソースコード

&lt;html lang = &quot;ja&quot;&gt;と表示するには、<br>
&amp;lt;html lang = &amp;quot;ja&amp;quot;&amp;gt;と書きます。<br>
&amp;を表示するには&amp;amp;と書きます。<br>

表示結果

<html lang = "ja">と表示するには、
&lt;html lang = &quot;ja&quot;&gt;と書きます。
&を表示するには&amp;と書きます。

特殊文字のまとめと次回記事について

 今回説明した特殊文字はいかがでしたでしょうか。
最初説明した6つさえ覚えておけば、困ることはないでしょう。
他の特殊文字を使いたくなった場合、その時に調べればよいのですから。

 次回は、HTMLでは表示しないけど、ソースコードの中には書いておきたいコメントの書き方を説明します。
以上、当サイト管理人のAsterismでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>