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

執筆者:

関連記事

サイトを引っ越したときのリダイレクトの方法について

このページのもくじ サイトを別のURLへ引っ越ししたときの対処方法.htaccessファイルを使う301リダイレクトする301リダイレクトとは301リダイレクトと302リダイレクトの違い設定方法「40 …

no image

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

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

no image

絶対に導入しておきたいWordPressプラグイン10+3選

絶対に導入しておきたいWordPressプラグイン10+3選   このページのもくじ WordPress サイトの集客に必須のプラグインWordPressの高速化に必須のプラグインWordP …

サイトの文章や画像を簡単にコピーできないようにするには?

  Devanath / Pixabay 作ったサイトの文章や画像を簡単にコピーできないようにする方法です。 画像の保存を完全に防ぐことはできません。 でも、コピーにひと手間かかることが抑止 …

EC-cube3★受注管理・編集ページにメール通知へのリンクを追加

EC-cube3になってノンプログラマーにはカスタマイズの敷居がグンとあがってしまいました。。。(泣) 悪戦苦闘しながら少しずつカスタマイズしているところ。 どこを触ったのか自分用の備忘録メモ。 管理 …

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

メタ情報