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

WP Bizvector コンテンツエリアのウィジェットを編集する

Bizvectorのテーマを使ったサイトで、 トップページとなるフロントページの見え方を修正した方法。 自分用の備忘録。 トップページのリスト表示にアイキャッチ画像も一緒に表示させるようにした。 この …

「table」について調べてみた 【HTML5編】

サイトのコーディングはCoda2を愛用中。 Emmetで「table」とタイプしてから「Control」+「E」で展開。 すると、下記のようなコードを自動で展開してくれます。 <table&gt …

no image

HTML上で要素に直接スタイルシートを指定する

style=””   ・style属性で、要素に対して直接スタイルを指定することができます。 ・この属性を使用する場合は、meta要素で基準となるスタイルシート言語を指定しておく必要がありま …

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

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

no image

EC-cube 3.0|帳票出力プラグイン|ロゴ画像・サイズ・位置を変更する

EC-cubeは3.0にバージョンアップしてから、 便利な機能はプラグインとしてすべて有料化してしまい、 ノンプログラマーにとっては運用が難しくなってしまいました(泣) 今日は、帳票出力プラグイン(← …

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