HTML文章中に空白を入れる方法と注意点

htmlで空白を入れたい場合はどうしたらよいのでしょうか?

今回はhtmlに空白を入れる方法を説明します。

HTMLでの一般的な空白の入れ方

space

一般的には、そのままスペースキーで空白を入れる方法があります。

ですが、半角空白の場合、2つ以上スペースキーを打っても1つの空白としてhtmlに出力されてしまいます。

表示結果

 例えば こんなに半角空白や改行を入れても、1つしか空白 は表示されません。

 

全角空白を使えば連続で空白をいれることができます。

表示結果

  例えば     全角空白を5つ打てば、5つ全角空白が表示されます。

HTMLで空白をいれるための特殊文字

しかし、「全角では広すぎる、半角空白で入れたい!」という方もいるでしょう。

htmlでは特殊な文字を使用したい場合に、特殊文字と呼ばれる文字を使用できます。

空白を入れる特殊文字は以下の4つがあります。

  •  
  •  
  • $emsp;
  • $thinsp;

まず、 は半角空白と同じサイズの空白を入れることができます。単純に半角空白を入れたい場合はこの特殊文字をhtml内に記述しましょう。この特殊文字の場合、いくつ記述しても、記述した分だけ半角空白を入れることができます。

次に、 は よりも少し広めの空白を入れることができます。

次に、 は の2倍の広さの空白を入れることができます。

最後に、 は よりも狭い空白を入れることができます。

特殊文字を使用した例が以下です。

表示結果

この後に空白が入ります| |←ここに空白がはいりました。(そこでは改行しないスペース)
この後に空白が入ります| |←ここに空白がはいりました。(n と同じ幅のスペース)
この後に空白が入ります| |←ここに空白がはいりました。(m と同じ幅のスペース)
この後に空白が入ります| |←ここに空白がはいりました。(細い空白)
連続で空白を入れられます|     |←ここに空白がはいりました。(複数スペース)

一般的に文字間隔を調整するために空白文字を使用するのは好ましくないとされています。頻繁に利用する必要が出た場合は、CSS(letter-spacingなど)を利用していきましょう。

<pre>を使用した方法

htmlのpreタグで囲まれた文章は、記述されたまま出力されます。

ソースコードなどを表示したときに使いましょう。

指定した位置で空白や改行を入れられますが、あくまでhtmlコードを表示したいときなどでのみ利用しましょう。

表示結果

preを使用すれば、
    このような  文章でも
そのまま出力されます。

 最後に

いかがでしたでしょうか?

今回はhtml 空白の特殊文字などを紹介しました。興味がある人はその他の特殊文字を調べてみるのもいいのではないでしょうか。

 

CTA

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

2013年3月 ・物販を始める

5月 ・プロに教わるも赤字で二ヶ月でやめてしまう​

8月 ・自分で物販をやるが五ヶ月間赤字が続く​

12月 ・試行錯誤を繰り返し、10万円を稼げるようになる​

2014年1月 ・物販の生徒さん第一号ができる​

2月 ・生徒さん第一号の稼ぎはプラマイゼロ​ (生徒さん第一号は、現在毎月25万円ほど稼いでいる)

6月 ・15万円を稼げるようになる​  

7月 ・生徒さんが五人に増える​  
 
12月 ・20万円を稼げるようになる​

2015年1月 ・レベルを高めるため、物販の会社に就職​
   
12月 ・スキルを身に付け退社し、再び物販に力を入れる​

2016年10月 ・純利益66万円を稼ぐ

2017年10月 ・純利益74万円を稼ぐ