ホームページやブログを作っているときに「ここにちょっと空白を入れたい」「もっと見やすく間を空けたい」と思うことはありませんか？
HTML（エイチティーエムエル）では、文字やレイアウトに空白を入れる方法がいくつかあります。
しかしやり方を間違えると、デザインが崩れたりSEO（検索エンジン最適化）に悪影響が出ることも。この記事では、HTMLで安全かつきれいに空白を追加する方法を初心者向けにわかりやすく解説します。
文字の間にスペースを入れる基本的な方法
HTMLで空白が表示されない理由
HTMLでは通常、半角スペースをいくら入れてもブラウザには1つの空白として表示されます。
これはHTMLの仕様で決まっているルールです。
たとえば、このように書いても：
こんにちは。 今日はいい天気ですね。
ブラウザでは「こんにちは。 今日はいい天気ですね。」と空白1つしか表示されません。
（ノンブレークスペース）を使う
空白を増やしたいときは （エヌビーエスピー）という特殊文字を使います。これは「ノンブレークスペース」と呼ばれ、改行されない空白を意味します。
基本的な使い方
こんにちは。 今日はいい天気ですね。
これで「こんにちは。」と「今日はいい天気ですね。」の間に3つ分のスペースが入ります。
どんなときに使うの？
は次のような場面で使います：
- 住所の番地とアパート名の間
- 価格の数字と通貨記号の間
- 名前の姓と名の間を広げたいとき
注意点
多用するとコードが読みづらくなるので、ちょっとだけ空けたいときに使いましょう。大きな余白を作りたいときは、後で説明するCSSを使うのがおすすめです。
行や段落の間に空白を入れる方法
brタグで改行する
文章を改行するなら <br> を使います。これは「ブレーク」の略で、改行を意味します。
基本的な使い方
こんにちは。<br>今日はいい天気ですね。
これで「今日はいい天気ですね。」が次の行から始まります。
どんなときに使うの？
<br> は次のような場面で使います：
- 住所の都道府県と市区町村を分けるとき
- 詩や歌詞を改行するとき
- 短い文章を改行したいとき
使いすぎに注意
<br> を連続して使って余白を作るのは避けましょう。デザインはCSSで調整するのがHTMLの基本です。
pタグで段落を分ける
文章のかたまりを分けたいときは <p> を使います。これは「パラグラフ」の略で、段落を意味します。
基本的な使い方
<p>これは最初の段落です。</p>
<p>これが次の段落です。</p>
段落の間には自動的に少し余白が入ります。
pタグとbrタグの違い
<p>は意味のあるまとまりを作る<br>は単純に改行する
検索エンジンにとっても、きちんと段落で分けられた文章の方が理解しやすくなります。
もっと大きな余白を作る方法
CSSのmarginで余白を作る
たくさん空白を入れたいときは CSS（シーエスエス）で margin を指定します。これが一番きれいで管理しやすい方法です。
基本的な使い方
<p style="margin-top:30px;">
上に30ピクセルの余白を作ります。
</p>
marginの種類
margin-top: 上の余白margin-bottom: 下の余白margin-left: 左の余白margin-right: 右の余白
実際の例
<p style="margin-bottom:50px;">
この段落の下に50ピクセルの余白を作ります。
</p>
<p>この段落は上に余白があります。</p>
CSSでまとめて調整する方法
たとえば段落全体をまとめて余白を変えることもできます。
styleタグを使う方法
<style>
p {
margin-bottom:20px;
}
</style>
これで <p> タグの下には必ず20ピクセルの空白が入ります。
なぜCSSを使うの？
CSSを使うメリットは：
- 一度設定すれば全体に適用される
- 後から変更しやすい
- HTMLコードがすっきりする
- スマートフォンやタブレットでも見やすく調整できる
よくあるNG例と注意点
空白を連続した半角スペースで入れようとする
こんにちは。 今日はいい天気ですね。
こう書いてもブラウザでは空白1つにしかなりません。必ず を使いましょう。
brタグやnbspを乱用しない
見た目だけを整えるために <br> や を連打するのは避けましょう。
なぜダメなの？
- コードが読みづらくなる
- スマートフォンで見たときにレイアウトが崩れる
- 検索エンジンにとって理解しにくい
- 後から修正するのが大変
正しい方法
デザインはなるべくCSSで調整するのがHTMLの基本です。
実際の使い分け例
商品ページの場合
<h2>商品名</h2>
<p>価格：1,000 円</p>
<p style="margin-top:30px;">商品説明がここに入ります。</p>
<p>配送について：<br>
全国一律 500 円</p>
ブログ記事の場合
<h2>記事タイトル</h2>
<p>記事の最初の段落です。</p>
<p>次の段落です。</p>
<p style="margin-top:40px;">最後のまとめの段落です。</p>
まとめ
HTMLで空白を追加する方法は目的によって使い分けるのがコツです。
- 文字の間を少し空けたい →
- 行を変えたい →
<br> - 段落を分けたい →
<p> - 大きな余白を作りたい → CSSのmargin
コメント