使いたいときの HTML特殊文字 & 機種依存文字
= よく使う記号、使われる記号、いざという時の... =

  • このページは、特殊文字や機種依存文字全般についての解説を目的としたものではありません。
  • 通常の日本語入力システムからは入力出来ない文字や、コードで入力した方がよい記号などを、Web制作の際に使いたいと思った時に役立つよう、使う頻度が高いと思われるものを中心に掲載しています。
よく使う、使われる記号、いざという時の... 矢印 & 矢印に使える、使えそうな記号
数字(ローマ数字、丸囲み、括弧付きなど) 括弧(かっこ) / 年号・曜日など
丸囲み文字・四角囲み文字 括弧付き文字
マーク・記号 罫線
単位 アクセント付き文字
ギリシャ文字 漢字 (360文字)
記号/符号の種類・名称・読み方へ    文字化け対策・機種依存文字等から数値文字参照への変換 
ユニコードに見る様々な矢印
ユニコードに見る装飾記号
ユニコードに見る顔文字
ユニコードに見る国旗
キーボードの記号とキーボードからの入力方法
*スマートフォンの縦向きで右側がはみ出す場合、横向きでご利用ください。(調整中です)

 よく使う記号、使われる記号、いざという時の...

< &lt;
&#60;
> &gt;
&#62;
左の二つは、HTMLなどのマークアップ言語でタグとして使われる文字列です。
& &amp;
&#38;
" &quot;
&#34;
&trade;
&#153;
© &copy;
&#169;
® &reg;
&#174;
  &nbsp;
&nbsp;」は、「改行されない空白文字(スペース)」で、no-break space / non-breaking space の略です。空白(半角スペース)として使用されることがあります。
&nbsp;を使った半角スペースの例

aa aa aa aa aa aa aa aa aa aa aa aa aa 
普通の半角スペースの例

aa aa aa aa aa aa aa aa aa aa aa aa aa
*どちらも、枠の幅を「45%」と設定してある。
 空白文字(スペース)の色々
  • Webページ制作で、キーボードからの半角スペースキーは、いくつ打っても一つしかスペースが入りませんが、これを解決するには、上記の「&nbsp;」を含めていくつかの方法があります。
  • 「&nbsp;」を含めて4つの方法を紹介します。
  • 例文を「Webページ」とし、それぞれ「Web」と「ページ」の間に文字実体参照でのスペースを入れました。スペースキーでの空白は一つしか入らなくても、文字実体参照を使うと半角も連続して入れることができます。
  • ただし、「&nbsp;」は「改行されない空白文字」ですので、ページ幅によってはレイアウトが崩れることがあるので注意が必要です。



*それぞれの空白に赤色でアンダーラインを入れてみました。
半角スペース
Web ページ」「Web ページ
  • 半角スペースキーでの空白です。
  • 「&#32;」でも表示できますが、スペースキーからの半角入力と同じように、いくつ書いても一つの半角としか認識しないようです。
&nbsp;
Web ページ」「Web ページ
  • 通常の半角スペースと同じサイズの空白です。
  • 上の欄でも紹介しましたが、「改行されない空白文字」ですので利用には注意が必要です。
  • 同じサイズの空白は「&#160;」でも表示することができますが、これも「改行されない空白文字」です。
&ensp;
Web ページWebページ
  • 通常の半角スペースより少し広めの空白です。
  • 「n」の字の幅の空白です。
&emsp;
Web ページWebページ
  • 通常の半角スペースよりさらに広めの空白です。
  • 「m」の字の幅の空白です。
  • この「&emsp;」は、キーボードからの全角スペースとほぼ同じ幅で表示されます。
Web ページ」「Web ページ
  • これは、キーボードから全角スペースを入力した例です。
&thinsp;
Web ページ」「Webページ
  • この「&thinsp;」は、「&nbsp;」や「&ensp;」よりも狭い空白です。
  • 「薄い」「厚みのない」といった意味を持つ「thin」で表されています。
« &laquo;
&#171;
» &raquo;
&#187;
&#8810; &#8811;
&harr;
&#8596;
&hArr;
&#8660;
&#8451; &#8457;
&spades;
&#9824;
&clubs;
&#9827;
&hearts;
&#9829;
&diams;
&#9830;
&#9828; &#9831; &#9825; &#9826;
&#12306; &#12320; % &#37; &#13261;
&#9312; &#9313; &#9314; &#9315;
&#9316; &#9317; &#9318; &#9319;
&#9320; &#9321; &#9322; &#9323;
&#9324; &#9325; &#9326; &#9327;
&#9328; &#9329; &#9330; &#9331;
&#8544; &#8545; &#8546; &#8547;
&#8548; &#8549; &#8550; &#8551;
&#8552; &#8553; &#8554; &#8555;
&#8560; &#8561; &#8562; &#8563;
&#8564; &#8565; &#8566; &#8567;
&#8567; &#8569; &infin; &ne;
&#13212; &#13213; &#13214; &#13216;
&#13217; &#13218; &#13198; &#13199;
&#13252; &#13206; &#13207; &#13208;
&#12945; &#13183; &#12849; ¥
&yen;
&#x00A5;
全角
&#xFFE5;
&#x2610; &#x2611; &#x2612; &#x2613;
  • 白い枠の中の上段は、その記号・文字の「文字実体参照」です。下段は「数値文字参照」 です。
  • 1行の場合は「数値文字参照」 です。「文字実体」、「数値文字」のどちらでも表示させることができます。

おすすめサイト・関連サイト…

Last updated : 2024/06/29