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

執筆者:

関連記事

パソコンのカメラをOFFにして、iPhoneをWEBカメラにする方法|EpocCam

新型コロナウィルスの影響でオンラインミーティングの機会が増えました。ところが、カメラの位置がイマイチよろしくない。モニターのカメラだと位置が上すぎるし、ノートパソコンだと斜めに向いていいるし。。。  …

CSS★fontawesome 6 を疑似要素で使う

リニューアル案件でfontawesomeを使用。MacでのテストはOKだけど、Winで表示テストすると文字化けしてアイコンフォントが表示されない。恐らくCSSの設定が間違ってるんだ!と思ったので、いろ …

サイトで使っているサーバーを調べる方法

現在公開されているWebサイトがどこのサーバで公開されているのかを知りたいとき、どうすればいいか調べてみました。 というのも、あるレンタルサーバーを解約することにしたのですが、そこにはクライアントさん …

自分のインスタのURLを見て欲しい相手に送るには

自分のインスタのURLを名刺やはがきにプリントしたいとき、どうすればわかるのかつまづいたので調べてみた。 答え:「instagram.com」の後ろに自分のユーザーネームを加える。 アカウントURLは …

CSS★最低の高さを決めて後は可変にする方法

最小の高さだけ決めて、 あとはdivなどの要素の高さに応じて高さを可変にできる指定方法。 CSSで下記のように指定します。   min-height: 80px; height: auto !impo …

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