【html/CSS】空白文字(スペース)を作る方法

「文字と文字の間を空白スペースでちょっとだけ空けたい」

「pタグの文頭だけ1文字分空白を空けたい」

htmlやCSSで空白文字を作る方法を解説します。

ただ空白（隙間や間隔）を作りたい場合はこちら↓

【html】スペースキー

空白文字を作るのに真っ先に思いつくのはスペースキーでしょう。

下記は全角スペース、半角スペースを入れた例です。

<div class="example">　全角　スペ　　　　　　ース　</div><br>
<div class="example"> 半角 スペ      ース </div>

全角スペースはちゃんと効いています。

半角スペースは効いていたり、いなかったりします。

半角スペースは開始タグ直後と終了タグ直前は効かず、連続である場合は1つしか効かない特徴があります。

【html】 

半角スペースは効いたり効かなかったりするため、半角スペースの代わりに「 」を使いましょう。

<div class="example">&nbsp;半角&nbsp;スペ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ース&nbsp;</div>

一文字分の空白ならスペースキーを打ってもいいでしょうが、大幅に空けたいならCSSを使いましょう。

改行したいならbrかpタグで囲う

スペースキーで空白ができるからと言ってスペースキーは連続して使うべきではありません。

改行させたいからとスペースキーを使っても文字のサイズやフォント、横幅によって崩れてかえって読みにくくなることがあります。

改行するときはbrを使うかpタグで囲うなどしましょう。

【CSS】paddingg-left:1em

CSSで一文字分空白を空けるには任意の箇所にspanタグを入れて、それにpaddingg-left(-right):1emを指定しましょう。

<style>
.example{
    display: inline-block;
    border: 1px solid #999;
}
.example span{
    padding-left: 1em;
}
</style>
<div class="example">空白文字<span>を空ける</span></div>

paddingは要素の内側に空白を作るCSSです。

padding-leftは左側に、padding-rightは右側に空白を作ります。

padding-topとpadding-bottomもありますが、spanタグには効かないため省きます。

emは文字サイズを基準とする範囲です。

1emだと一文字分の大きさになりますし、0.5emだと半文字分の大きさになります。

文字サイズが16pxなら1emは16px、0.5emは8pxとなります。

最初の一字だけ空白にする

最初の一字だけ空白にするには「text-indent」を指定しましょう。

最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする

<style>
.example2{
    /*コレ*/text-indent: 1.1em;
    letter-spacing: 0.1em;
    border: 1px solid #999;
}
</style>
<p class="example2">最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする最初の一字だけ空白にする</p>

text-indentは一行目の文字の位置を左にずらすCSSです。

マイナスを指定すると右にずれます。

1emを指定すると1文字分ずれ、空白ができます。

letter-spacingを使っているときは注意が必要です。

letter-spacingは文字の右に指定した分スペースを空けるCSSです。

text-indent:1emで作った空白は文字ではないため、letter-spacingで指定した分だけずれが発生します。

よってtext-indentにはletter-spacingの数値も足すことをオススメします。

具体的にはletter-spacing: 0.1emを指定しているならtext-indent: 1.1emといった具合です。

【まとめ】空白文字を作る方法

html

• 全角スペース
•  （半角スペース）

CSS

• paddingg-left:1em（任意の箇所）
• text-indent:1em（最初の一字）

以上、空白文字を作る方法でした。