記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

HTMLでスペース(空白)を作成する方法6選!  サンプルコード付き!

HTMLでスペース(空白)の作り方を初心者の方向けに紹介。 HTMLでスペース(空白)を作成する方法6点紹介、各方法サンプルコード付きで、メリット・デメリットも詳しく解説。サンプルコード付きなので実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

こんにちは!
HTMLでスペース(空白)を空けたいけど、思うようにスペースを空ける事ができずに、困った事はありませんか? 実は、wordなどのテキストファイルでスペースを作成する方法と、HTMLでスペースを作成する方法はルールが違います。
今回は、HTMLで具体的にスペースを作成方法を6つと、それぞれのメリット・デメリットを詳しく解説していきます。

1.HTMLでスペースを作成する具体的な方法6選

それではさっそく、HTMLでスペースを作成する方法を紹介していきますが、長くなりますので、冒頭で各方法を簡単に説明します。

方法1:全角スペースでスペースを作成する方法
全角スペースでスペースを作成します。
全角スペース1個分で、全角スペース1個分のスペースを空ける事ができます。
wordなどのテキストファイルと同じ方法で、簡単に作成できますが、HTMLではデメリットもあるので非推奨となっています。


方法2:半角でスペース作成する方法
半角スペースでスペースを作成します。
半角スペース1個分で、半角スペース1個分のスペースを空ける事ができます。
wordなどのテキストファイルと同じですが、HTMLでは半角スペースを何回打っても、半角1個分のスペースしか空ける事ができません、こちらも非推奨となっています。


方法3:特殊文字でスペースを作成する方法
特殊文字を使用して、スペースを作成する事ができます。
視覚的でわかりやすく、スペース1個分の空白を作成するのにお勧めです。


方法4:CSSスペースを作成する方法
※一番お勧めの方法です。迷ったらこちらの方法だけを見てください。
スペースの幅をpx.em単位で指定できるので、web制作の現場でもっとも使われています。


方法5:preタグでスペースを作成する方法
preタグでスペースを作成する方法です。
preタグで囲んだ中は、wordなどのテキストファイルと同じように、スペースがそのまま反映されます。


方法6:改行をしスペースを作成する方法。
改行を行うことで、半角スペースを作成する事ができます。


それでは上記6点を詳しく解説していきます。

1-1.方法1:全角スペースでスペースを作成する方法

サンプルコード表示結果

HTMLサンプルコード

※解説
おはようの右隣に全角スペース1個分、こんにちはの右隣に全角スペース2個分のスペースを空ける事ができました。
簡単にできますね! 表示はできますが、なるべく避けた方が良いやり方です。
理由は、
●他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、全角だけでは判断できない。
●コードを見ても全角スペース何個分のスペースが空けられているのかがわかりずらい。
●全角1個単位からの指定となり、px.em単位のスペース幅の調整ができない。

○全角スペースでスペースを作成するメリット・デメリット

●メリット
・簡単にスペースを作成できる。
・wordと同じように全角スペース1個分に対して、全角スペース1個分のスペースを作成できるのでわかりやすい。

●デメリット
・他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、全角だけでは判断できない。
・コードを見ても全角スペース何個分のスペースが空けられているのかがわりずらい。
・全角スペース1個単位からの指定となり、px.em単位のスペース幅の調整ができない。

1-2.方法2:半角スペースでスペースを作成する方法

サンプルコード表示結果

HTMLサンプルコード

※解説
こんにちはの右隣は、10個分の半角スペースを空けているにもかかわらず、表示は、半角スペース1個分のスペースのみしか空いておりません。
半角スペースを何回入力しても、1回分のスペースしか空ける事ができません。
また、他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、判断する事ができないので、極力使用しない様にしましょう。

半角スペースでスペースを作成するメリット・デメリット

●メリット
・簡単にスペースを作成できる。

●デメリット
・半角スペースは、何回入力しても半角スペース1個分のスペースしか空ける事ができない。
・他の人がコードをみた時に、そのスペースが意図して入れられたものなのか、間違えてスペースを入れてしまったのかを、判断できない。

1-3.方法2:特殊文字でスペースを作る方法

特殊文字4点

サンプルコード表示結果

HTMLサンプルコード

※解説
特殊文字を記入し、特殊文字に指定されたスペースを空ける事ができます。

特殊文字でスペースを作る、メリット・デメリット

●メリット
・どのようなスペースを、何個空けたいのか視覚的にわかりやすい。

●デメリット
・スペースを多く空けたい場合、コード量が多くなり見づらくなる。
・特殊文字を覚えておく、もしくは調べなければならない。

もし頻繁に特殊文字を使われる場合は、こちらをブックマークしておくと良いかもしれませんね!
  https://pasomaki.com/html-space-special-char/   

1-4.方法3 cssでスペースを作成する方法

●一番おすすめの方法です!
理由は、スペースの幅をpx.em単位で細かく指定できるので、web制作の現場でもっとも使われている為です。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
スペースを入れたいテキストを<span>タグで囲い、spanにクラスを付与し、margin-right: 10pxを指定します。
おはようの、右隣に10pxスペースを作制する事ができました。

○CSSでスペースを作る、メリット、デメリット

●メリット
・pxやem単位でスペースを指定できる為、web制作の現場でもっとも使われている。

●デメリット
・HTMLだけで完結しない。
・HTMLの該当箇所にspan,classを記述し、かつCSSファイルを編集する為作業が多い。

1-5.方法4 preタグでスペースを作成する方法

サンプルコード表示結果

HTMLサンプルコード

※解説
<pre>〜</pre>で囲むとHTMLで記述した、半角スペース、全角スペース、改行をそのままブラウザに反映させる事ができます。

○preタグでスペースを作る、メリット・デメリット

●メリット
・HTMLで記述した通りのブラウザ表示になるのでわかりやすい。

●デメリット
・preタグで囲う必要がある。
・レスポンシブで表示が崩れる事がある。

1-6.方法5 改行でスペースを作成する方法

改行する事で半角スペースを作成します。
サンプルコード表示結果

HTMLサンプルコード

※解説
改行する事で、「こんにちは」の右隣に半角スペースを作り出す事ができています。

○改行でスペースを作る、メリット、デメリット

●メリット
・改行する事でスペースを作成するメリットはないが、改行すると「半角スペースが生まれてしまう」という事を知っておくと、意図しない半角スペースがある場合の原因に気づく事ができる。

●デメリット
・わざわざ改行をしないといけないので、コードがわかりずらくなる。

2.文字の間隔指定する方法

今回の「HTMLでスペースを空ける方法」とは少し意味合いが違いますが、良く使用されるので、紹介させて頂きます、興味のある方はご覧ください。


文字幅の間隔を指定できるCSSプロパティ「letter-spasing」です。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
文字幅の行間が広くなったのがわかると思います。
「letter-spasing」は、一部の文字のみでなく、文字の行間を全体的に広げたい場合に使用するcssのプロパティです。
よく使われるcssプロパティですので、ぜひ使用してみてください。

まとめ

最後にポイントをまとめます。
HTMLでスペースを空ける方法を6点、さらに文字の間隔を指定する方法を1点紹介しました。

① 方法1:全角でスペースを作成する
② 方法2:半角でスペース作成する
③ 方法3:特殊文字でスペースを作成する
④ 方法4:cssでスペースを作成する ※1番おすすめ
⑤ 方法5:preタグでスペースを作成する
⑥ 方法6:改行をしスペースを作成する
⑦ letter-spasingで文字の間隔指定する

いかがだったでしょうか?
今回はHTMLスペース(空白)について解説しました。簡単に作成する事ができます。
サンプルコードもありますので活用してみてくださいね!

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。