- 更新日: 2020年10月8日
- 公開日: 2017年6月7日
【初心者向け】HTMLで空白(スペース)を入れる3つの方法
HTMLで空白を入れたいけれど、思ったように空白が入らなくて困った事はありませんか？HTMLで空白をいれる際は、テキストファイルで使う空白と同じように機能しません。
今回は、HTMLで空白を挿入するための3つの方法を紹介していきます。これを読んでいただければ、HTMLで空白を自由自在に使えるようになりますよ。
HTMLで空白(スペース)を入れる3つの方法
HTMLで空白を通常のテキストファイルと同様に入れるとどのように表示されるのでしょうか？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
スペースを 入れたい
</body>
</html>
半角スペースを３つ入れています。ブラウザではどのように表示されるのでしょうか？
上記のように、文章中に複数の空白を入れても、１つ分の空白しか表示されません。HTML上にこのように空白を作るために、半角スペースや改行を入れても、ブラウザ上では空白１つ分で表示されてしまいます。
１つ分以上の空白を入れたい場合は、下記の３つの方法を使ってみてください。
全角スペースを入れる方法
HTMLに半角スペースを入れても、空白が１つ分しか表示されませんでした。しかし、全角スペースを使えば、使用した分だけそのまま文章に表示されます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
スペースを 入れたい
</body>
</html>
全角スペースを５つ打てば、５つ分の空白が表示されます。
ブラウザでもしっかりと表示されていますね！日本語入力に設定していれば、空白は全角スペースになります。
半角スペースを入れる方法
日本語入力を使っていれば、全角空白は比較的簡単にいれられます。でも、問題は半角スペースを入れたい場合ですよね。半角スペースを入れる方法もちゃんとあります。
半角スペースを使う場合は、「 」という特殊文字を使います。特殊文字とは、HTMLに記述しても、ブラウザでそのまま表示されない文字や記号のことです。
半角スペースを表す特殊文字「 」をHTML上で使うことで、ブラウザで半角スペースが表示されます。
ここでは、nbspが特殊文字にあたり、特殊文字を記述する方法として、「＆」と「;（セミコロン）」で囲んでいます。
nbspとは、英語で「non-breaking space」の略です。「自動改行させないスペース」という意味を持ち、英文の自動改行を調整するためによく使われます。
日本語でも、問題なく使えるのですが、文字調整のために利用すると、単語がうまく認識されなかったりと問題が起こる場合もあります。文字間隔を調整する場合は、スタイルシートを使うことが推奨されています。詳しくは Web上で使えるスペース(空白文字)いろいろをご参照ください。
を連続して使えば、その数だけ半角スペースが入ります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
スペースを[ ]入れたい
</body>
</html>
１個だけ入れたら、１個分表示されます。（わかりやすいように、空白となる場所を括弧で囲っています。）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
スペースを[ ]入れたい
</body>
</html>
３個入れたら、３個分表示されます。
他にも、空白スペースを入れる特殊文字があるので、まとめて紹介しますね。
 この特殊文字で、 よりも広めの空白をいれることができます。 この特殊文字で、 の２倍の広さの空白をいれることができます。 この特殊文字で、 よりも更に狭い空白を入れることができます。
これらの特殊文字を使って、空白を表示させてみたいと思います。サンプルコードをみてみましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
スペースを[ ]入れたい
スペースを[ ]入れたい
スペースを[ ]入れたい
スペースを[ ]入れたい
</body>
</html>
それぞれの特殊文字を入れてみました。それぞれ空白が表示されているか、ブラウザで確認してみます。
それぞれの特殊文字の特性に沿って空白が表示されてますね。
preタグを使う方法
最後に紹介するのが、preタグを使う方法です。文章をpreタグで囲むと、その文章内の空白分がそのままブラウザに表示されます。半角スペースや改行もしっかりと認識されます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<pre>
半角スペースを 入れたい
全角スペースを 入れたい
</pre>
</body>
</html>
「半角スペースを入れたい」という文には、半角スペースを３個入れています。「全角スペースを入れたい」という文には、全角スペースを３個入れています。
ブラウザではどのように表示されるのでしょうか。
半角スペースも、１つ文だけではなく、入力した分だけちゃんと表示されていますね。
改行を入れる方法
HTMLを書いている際に改行しようと思って、できなかった経験はありませんか？改行は
タグと
を使ってすることが可能です。
brタグとは、「改行を指示するタグ」です。このタグを挿入すると、その箇所で改行されます。
pタグとは、「段落」を作るタグです。pとは、英語で段落を示す「paragraph」の頭文字です。
改行の方法を学びたい方は、HTMLでの改行の入れ方を参考にしてみてくだい。
＼Webサイト担当者としてのスキルが身に付く／
まとめ
今回は、空白を入れる方法を３つ紹介しました。通常日本語入力を使って入れば、全角スペースで空白を入れることは可能です。
でも、半角スペースを使いたい場合もあれば、空白の幅を調整したい場合もあるかと思います。その場合は、今回紹介した特殊文字を使った方法を使ってみてください。
紹介した知識を使って、空白を使いこなしてください！
- この記事を書いた人
- Ayumi
