Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

Webサイト上で文字列を表示する際、文字と文字の間にスペースを入れたい場合がありますよね。

テキストエディタに半角スペースを複数打ち込んでも、Webサイト上では狙った通りに反映されません。

本記事では、HTMLでWebサイト上にスペースを設定する方法を4つご紹介していきたいと思います。

HTMLでスペースを設定する方法は4つある


HTMLでWebサイト上にスペースを設定する方法は4つあります。

上から順におすすめする方法となっているので、確認してみてください。

  • CSSでスペースを設定
  • 特殊文字でスペースを設定
  • preタグでスペースを設定
  • 全角でスペースを設定

HTMLで半角スペースを複数記述した場合の画面表示を確認しよう


本題に入る前に、HTMLで半角スペースを複数記述した場合の画面表示について確認しておきたいと思います。

HTMLに半角スペースを複数記述したサンプルコード

下記のコードが今回使用するサンプル用のHTMLとなります。

サンプル用のHTMLでは半角スペースを4つ打ち込んでいますが、Webサイト上では半角スペース1つ分しか表示されていないことをご確認頂けます。

半角スペース4つ分など、任意のスペースをWebサイト上で表示したい場合には、以降に解説する4つの方法でスペースを設定する必要があります。

index.html

  1. <!DOCTYPE html>
  2. <html lang="jp">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Space Sample</title>
  6. </head>
  7. <body>
  8. <div>
  9.   HTMLでスペースを表示する    サンプルです。
  10. </div>
  11. </body>
  12. </html>

サンプルコードをWeb上に表示すると下記のキャプチャのように表示されます。

HTMLにCSSでスペースを設定する


HTMLでスペースを設定する方法として最もおすすめなのが、CSSを利用した方法です。

CSSを利用することで、環境に左右されることなく、ブラウザ上で表示した際のスペースが担保されます。

「margin」「padding」プロパティでスペースを取る方法と、「letter-spacing」プロパティで文字間隔を決めるスペースを設定する方法をご紹介していきます。

HTMLにCSSでスペースを設定するサンプルコード

HTMLにCSSでスペースを設定するサンプルコードは下記の通りとなります。

「margin」「padding」プロパティと「letter-spacing」プロパティの表示内容の違いについて、しっかりと認識しておきましょう。

index.html

  1. <!DOCTYPE html>
  2. <html lang="jp">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Space Sample</title>
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <div>
  10.   marginの<span class="margin-css"></span>スペースです。
  11. </div>
  12. <div>
  13.   paddingの<span class="padding-css"></span>スペースです。
  14. </div>
  15. <div class="letter-spacing-css">
  16.   文字の間隔全てに適用されます。
  17. </div>
  18. </body>
  19. </html>

style.css

  1. .margin-css {
  2.   margin-left: 30px;
  3. }
  4. .padding-css {
  5.   padding-left: 30px;
  6. }
  7. .letter-spacing-css {
  8.   letter-spacing: 30px;
  9. }

サンプルコードをWebブラウザ上で表示すると、下記キャプチャのようになります。

「margin」と「padding」を設定した行は、「span」タグを埋め込んだ箇所に30pxのスペースが表示されています。

一方で、「letter-spacing」を設定した行では、全ての文字の間に30pxのスペースが表示されていることをご確認頂けます。

HTMLに特殊文字でスペースを設定する


HTMLに特殊文字でスペースを設定する方法も一般的に利用される方法です。

実務では、主に「&nbsp;」という特殊文字を見かけることが多いかと思います。

スペースを表示するための特殊文字は実は複数存在する

スペースを表示するための特殊文字は「&nbsp; 」以外にも複数存在します。

一般的には「&nbsp; 」の利用で問題ありませんが、それぞれの特徴だけ抑えておくようにしましょう。

  • &nbsp; : 自動的に改行されることを防ぐためのスペース
  • &ensp; : 半角スペースよりも少しだけ広いスペース
  • &emsp; : 全角スペース
  • &thinsp; : 半角スペースよりも少し狭いスペース

HTMLに特殊文字でスペースを設定するサンプルコード

サンプルコードでは、それぞれの特殊文字を各行に設定しています。

少しずつスペースの大きさに違いがあることをご確認頂けると思います。

index.html

  1. <!DOCTYPE html>
  2. <html lang="jp">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Space Sample</title>
  6. </head>
  7. <body>
  8. <div>
  9.   HTMLでスペースを&nbsp;表示しています。<br>
  10.   HTMLでスペースを&ensp;表示しています。<br>
  11.   HTMLでスペースを&emsp;表示しています。<br>
  12.   HTMLでスペースを&thinsp;表示しています。
  13. </div>
  14. </body>
  15. </html>

サンプルコードをWebブラウザ上で表示した結果が下記のキャプチャとなります。

HTMLにpreタグを使用してスペースを設定する


HTMLで利用出来るタグに「pre」タグというものが存在します。

「pre」タグの内部に記述したスペースはそのままWebブラウザ上に表示されるため、半角スペースの複数表示も可能となります。

HTMLにpreタグでスペースを表示するサンプルコード

実際にHTMLで「pre」タグを利用したサンプルコードを確認していきましょう。

ポテパンダの一言メモ

今回は参考情報として紹介しますが、実務などで一般的に利用されるのは上述した2つです。
あくまで参考程度に理解しておいてください。

index.html

  1. <!DOCTYPE html>
  2. <html lang="jp">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Space Sample</title>
  6. </head>
  7. <body>
  8. <div>
  9.   <pre>HTMLでスペースを    表示しています。</pre>
  10. </div>
  11. </body>
  12. </html>

サンプルをWebブラウザ上で表示した結果が下記のキャプチャとなります。

キャプチャでは分かりにくいですが、半角スペース4つ分が指定した通り画面に表示されています。

HTMLに全角でスペースを設定する


HTMLでは全角スペースを入力するとWebサイト上でも複数のスペースを設定することが可能です。

一方で、間違って全角スペースが入っているのか、意図的にスペースを入れているのかコードを見ただけでは分かりにくいこともあり、非推奨とされていることが多いようです。

こんな方法もあるんだという意味で確認しておきましょう。

HTMLに全角でスペースを設定するサンプルコード

今回のサンプルでは全角スペースを文章の途中に3つ設定しました。

実際にブラウザ上で、全角3つ分のスペースが設定されていることをご確認頂けます。

index.html

  1. <!DOCTYPE html>
  2. <html lang="jp">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Space Sample</title>
  6. </head>
  7. <body>
  8. <div>
  9.   HTMLでスペースを　　　表示しています。
  10. </div>
  11. </body>
  12. </html>

サンプルコードをWebブラウザ上で表示した結果が下記のキャプチャとなります。

さいごに：HTMLでスペースを設定する方法にはCSSが一番おすすめ


本記事では、HTMLでスペースを設定する方法について、4種類のコーティング方法をご紹介してきました。

基本的にはCSSもしくは特殊文字でHTMLにスペースを設定するようにしましょう。

もし複数のスペース分表示間隔を空けたい場合には、特殊文字を複数コード上に連続させるよりも、CSSでスペースの幅を調整する方法をおすすめします。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。