WEB制作 Interenet

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

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WEB制作, Interenet

執筆者:

関連記事

no image

WordPress★カスタムフィールドを使って関連リンクを手動で埋め込む方法

SEOの「内部対策」のひとつ、 内部リンクの調整で大切なこと SEOには「内部対策」と「外部対策」の二つがあります。 内部対策は、Googleからクロール&インデックスされやすいようにHTMLソースを …

CSS★span要素内のテキストを上下中央に配置する

ナビ項目の文字の後ろに「▼」をつけたのですが、そのままだと、文字よりも「▼」のほうが大きく見えてしまい、文字よりも「▼」が目立ってしまった(汗) それを解消するために「span」で「▼」だけフォントサ …

HTML共通部分を部品化して読み込ませる方法

今回はHTMLでサイトを作って欲しいとの要望。 ナビやヘッダー、フッター部分は全ページ共通なので、修正や後々のメンテナンスも考えて、それらを部品化して1箇所で管理したい。 HTMLには、他のページを読 …

no image

MailPoet|購読者ページのカスタマイズ

ニュースレーターを配信できるプラグインを探していたらこの「MailPote」と「MailChimp」という2つのプラグインがダントツで使われていたので試してみた。 まずは一番人気のMailChimpだ …

jQueryでウィンドウサイズによって読み込む画像を切り替える

サイトデザインの確認のために、 全体を一枚のJPGで書き出してサクッとブラウザで確認してもらいたい時に ブラウザの幅を広げると大きな画像に、狭めると別に用意した小さな画像を表示させたい! HTMLだけ …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。