ホームへ

【html/CSS】空白文字を作る方法

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

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

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

【html】スペースキー

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

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

 全角 スペ      ース 

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

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

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

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

【html】&nbsp;

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

 半角 スペ      ース 
<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となります。

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

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

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

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

「::first-letter」は要素内最初の一字だけを指定する疑似要素です。

これにpadding-left:1emを指定することで最初の一字だけ空白にできます。

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

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

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

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

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

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

html

  • 全角スペース
  • &nbsp;(半角スペース)

CSS

  • paddingg-left:1em

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

マンガで読める関連記事