サイトアイコン WEB-Geek-Site.com

HTML特殊文字—ちょっと使いたい時に

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

< &lt;
&#60;
> &gt;
&#62;
左の二つは、HTMLなどのマークアップ言語でタグとして使われる文字列です。
& &amp;
&#38;
&quot;
&#34;
&trade
&#153;
© &copy;
&#169;
® &reg;
&#174;
&nbsp;
&#160;
左は、「改行されない空白文字(スペース)」で、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
 空白文字(スペース)の色々
  • Webページ制作で、半角スペースキーはいくつ打っても一つしかスペースが入りませんが、これを解決するには、上記の「&nbsp;」を含めていくつかの方法があります。
  • 「&nbsp;」を含めて4つの方法を紹介します。例文は「Webページ」としましたが、それぞれ「Web」と「ページ」の間に文字実体参照でのスペースが入っています。スペースキーでの空白は一つしか入らなくても、文字実体参照を使うと半角も連続して入れることができます。
  • しかし、「&nbsp;」は「改行されない空白文字」ですので、ページ幅によってはレイアウトが崩れることがあるので注意が必要です。
空白文字 半角スペース
Web ページ」 ※半角スペースキーでの空白です。
&nbsp;
Web ページ」 ※通常の半角スペースと同じサイズの空白です。
&ensp;
Web ページ」 ※通常の半角スペースより少し広めの空白です。
「n」
の字の幅の空白です。
&emsp;
Web ページ」 ※通常の半角スペースよりさらに広めの空白です。
「m」
の字の幅の空白です。
Web ページ」 ※これは全角スペースを入力した例です。
「&emsp;」は、全角スペースとほぼ同じ幅です。
&thinsp;
Web ページ」 ※「&nbsp;」や「&ensp;」よりも狭い空白です。
« &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; &#8560; &#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行の場合は「数値文字参照」 です。「文字実体」、「数値文字」のどちらでも表示させることができます。
出典:http://www.benricho.org/symbol/tokusyu_01_usefull.html
モバイルバージョンを終了