HTMLで空白(スペース)を思い通りに作るには?【HTML初心者入門】 | WEBCAMP NAVI
【8月枠も残りわずか】転職保証コース

HTMLで空白(スペース)を思い通りに作るには?【HTML初心者入門】

HTMLを使う中で、空白が思うように作れない!と悩んだことはありませんか?
HTMLでは半角スペースが反映されないため、思うような空白が作りづらいですよね。

今回は、そんな曖昧になりがちな「空白の作り方」について解説していきます。

文章中の空白の作り方について解説していくため、余白の作り方が知りたい方はこちらの記事を読んでみてください!
CSSを使った余白の取り方を理解することができます。

CSS【paddingとmarginの使い分け】余白の作り方を徹底解説!

HTMLで文章中に空白を作るには?

HTML文書では、コーディング中の空白や改行は無視されます。
詳細に言えば、半角スペース1つ分だけが反映され、他は反映されない状態になります。

そのため、テキストエディタ等で空白スペースを挿入しても、実際のHTML文書を実行した際には表示されません。

半角スペースが反映されないのはなぜでしょうか?
それは、HTMLでコーディングをする際に空白でインデントを行うからです。

改行した時などに、字下げを行うことをインデントと呼びます。
コードを見やすくするために入れた半角スペースが、webページに影響を与えないようにするために反映されなくなっています。

その解決策としてHTML上で、タグやもしくは特殊なコードを記載して明示してあげる必要があります。

この記事では以下の4つの方法をオススメする順番でお伝えします。

  1. 特殊文字を使う方法
  2. preタグを使う方法
  3. CSSで調整する方法
  4. 全角スペースを使う方法

特殊文字を使って空白を作るには?

htmlでは、ある特定の3つの特殊文字を利用することで空白を表示することが可能です。
もしかすると見たことがあるものがあるかもしれませんが、
今回ご紹介するのは以下の三つです。

  1.  
  2.  
  3.  

1つ1つの特徴を確認していくことにしましょう。

元になるHTMLのコードは以下の通りです。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>空白の開け方について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	ここ→←に間を作ります<br>
	ここ→←に間を作ります<br>
	ここ→←に間を作ります
</body>
</html>

HTML空白

 ❶&nbsp;

半角スペースで作ったスペース(空白)と同じ分だけ空間を空けることができます。
2回使えば2回分の空白を空けることができます。

  • 1つ使用した場合
HTML
<!DOCTYPE html>
<html>
<head>
    <title>空白の開け方について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	ここ→&nbsp;←に間を作ります<br>
	ここ→←に間を作ります<br>
	ここ→←に間を作ります
</body>
</html>

HTML空白

  • 2つ使用した場合
HTML
<!DOCTYPE html>
<html>
<head>
    <title>空白の開け方について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	ここ→&nbsp;&nbsp;←に間を作ります<br>
	ここ→←に間を作ります<br>
	ここ→←に間を作ります
</body>
</html>

HTML空白

❷&emsp;

&nbsp;より少し大きいスペース(空白)を作ることができます。
実際に比べてみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>空白の開け方について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	ここ→&nbsp;←に間を作ります<br>
	ここ→&emsp;←に間を作ります<br>
	ここ→←に間を作ります
</body>
</html>

HTML空白

どちらも1つずつしか使っていませんが、空白の大きさが違うことがわかります。

❸&thinsp;

&nbsp;より少し小さいスペース(空白)を作ることができます。
では実際に比べてみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>空白の開け方について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	ここ→&nbsp;←に間を作ります<br>
	ここ→&emsp;←に間を作ります<br>
	ここ→&thinsp;←に間を作ります
</body>
</html>

HTML空白

preタグを使って空白を作るには?

preタグを使って、空白を自由に使う方法もあります。
<pre></pre>で囲むことによって、空白や改行をHTMLに打ち込んだまま反映させることができます。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>空白の開け方について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<pre>ここに 空白を  作ります。
	   改行も 思うままに   作ることができます。</pre>
</body>
</html>

HTML空白

CSSを使って空白を表示する

spanタグで囲った部分に対して、CSSで指定をすることによって空白を作る方法です。

ステップとしては2つだけですが、他の方法に比べると少し手間がかかるかもしれません。

  1. 空白を作りたい部分をspanタグで囲む
  2. CSSでmarginを指定する
HTML
<!DOCTYPE html>
<html>
<head>
    <title>空白の開け方について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<h1>余白を<span class="yohaku">ここに</span>作ります。</h1>
</body>
</html>
CSS
.yohaku{
	margin:0px 20px;
}

HTML空白

全角スペースを使う方法

空白スペースはHTMLの見た目に反映されないと紹介しましたが、それは「半角スペース」の場合です。

正確には、

1. 全角の場合、html上で全角スペースは打った分だけ反映されます。
2. 半角の場合は、半角スペースを何度入力しても1回分しか反映されません。

そのため、この後紹介する方法を用いなくても全角ならばスペースを反映可能です。
ただし、空白が何文字分あるのかを把握しておかなければ編集が難しいため、あまりオススメしません。

まとめ

初心者の方向けに空白(スペース)を表示する方法を紹介していきました。

全角スペースを利用する方法は、その時は簡単なものの、他の人が見たときにわかりづらいので使わないことをお勧めします。
特殊文字やCSSで指定をするようにしましょう。

文章中の空白ではなく、webページ上に余白を作る方法について知りたい方は、こちらの記事を読んでみてください。

CSS【paddingとmarginの使い分け】余白の作り方を徹底解説!

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点