ブログ集客 無料会員サイト

HTMLコードやタグで、スペース(空白)を入れる方法

文章を入力中にスペースを入れたいのに思い通りに空白ができないという経験がありませんか?

単純にスペースキーで簡単にできる場合もありますが、空白文字の幅が思ったのと違ったり、他のコードが邪魔をしてスペースキーでの空白を無視されてしまうこともあります。

そんな時にはタグやコードを入れることで解決します。

今回はスペースを入れるいくつかの方法をご紹介いたします。

1.単純にスペースキーを押して空白文字を入れる。

①スペースキーで空白文字を入れましょう。

②半角や全角を指定してスペースキーで空白を入れてみましょう。

半角の場合

半角スペースは何個も入れても本番環境には1つ分しか反映されません。

全角の場合

全角スペースは入力した分だけスペースを空ける事が可能です。

しかし全角スペースを大量に使用すると読みにくくなってしまいます。

複数人でコードを共有する場合などは全角スペースの使用は避けましょう。


2.HTMLコードを入力する

特殊文字を使用してスペースを空けてみましょう。

HTMLコードを入力する方法です。

特殊文字の書き方

&〇△◇;

〇△◇に任意のローマ字入れます。

ワードプレスでしたら、テキストモードで入力します。

空白文字のHTMLコード例

 半角スペースと同じ幅
  よりも少し広めの幅
  よりも広めの幅
  よりも狭い幅

3.タグを入力する

<pre> 〜 </pre>で囲みましょう

<pre> 〜 </pre>は整形済みのテキストを表しますので<pre> 〜 </pre>タグで囲むことでスペースキーで入力した複数打った半角スペースなどもそのまま表示することができます。

ワードプレスの場合はテキストモードで入力していきます。


4.CSSを入力する

少し手間がかかりますが空白の自由度が高いことや環境に左右されないなどメリットも多いのでこの方法はオススメです。

今回は文字と文字のスペースについてなのでmarginを使って10pxの空白文字を表示します。

marginを使って10pxの空白文字を入れてみましょう

「リレマケサイトへようこそ」のリレマケサイトの後に10pxの余白を空けます。

①<span>リレマケサイト</span>へようこそと<span>~</span>で囲みます。

<span>にclass名を付けます。

③CSSにもコードを入力します。

.mgr-10{
  margin-right : 10px;
}


④10pxの空白が出来ます。

まとめ

いかがでしたでしょうか?

今回の記事では、HTMLコードやタグで、スペース(空白)を入れる方法についてご紹介しました。

スペースが上手く空かずにもどかしい思いをしたことがある方はぜひ活用してみてください。