ロンドンからBuongiorno(こんにちは)! 

今日は、HTML上で思い通りに「スペース」や「インデント」を入れる方法をご紹介しよう思います。

Word文書などだと、Tabキー、Returnキー、もしくはスペースバーを何回か押せば、思い通りにスペースを文書に反映させることが出来るし、CSSでも、スペースもインデントもHTMLよりもこちらの要望に忠実に「再現」というか「反映」してくれます。

ところがHTMLだと何個スペースを入れようが、単語と単語の間の、しかも半角1文字分のスペースとしてしか認識されないんですね。

例えばこんなHTMLコードを書くと

<html>
<head>
<title>スペースを思い通りに入れたい!</title>
</head>
<body>
ロンドンは   今日も   またまた 曇ってます!!
</body>
</html>

ブラウザー上では下☟☟のように思ったものと全然違うものが出てきます。

ロンドンは 今日も またまた 曇ってます!!

さてどうやってHTMLで思い通りに「空間のカスタマイズ」をするのか? 

それではよろしくお付き合いくださいませ。

1.特殊文字を使う方法

&nbsp;もしくは &#160;を使う。

これは一体何なのかというと、HTMLコード上ではこれらは思いっきりコードとして見えてるんですが、ブラウザー上ではただのスペース(空間)として出てきます。

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;                

とHTMLで打ち込んでも、ブラウザー上では

 

 

し~~~~ん!!!!

これが欲しかったんです。これで思い通りにスペースを入れることが出来る。

※おまけ

&nbsp;は半角1スペース分を入れたい時に使うんですけど、じゃあ違う幅のスペースを入れるタグは?

  • &ensp; — 半角2スペース分
  • &emsp; — 大体半角4スペース分

2.preタグを使う

 <pre>タグ内の文章は、スペースもインデントも改行も全てそのままブラウザー上で反映されます。

先ほどのコードで見てみましょう。

<html>
<head>
<title>スペースを思い通りに入れたい!</title>
</head>
<body>
<pre>ロンドンは   今日も   またまた 曇ってます!!</pre>
</body>
</html>

ロンドンは    今日も    またまた  曇ってます!! 

と今度は、HTMLコード通りに表示されるようになります。

3.日本語入力にして全角でスペースを入れる

以上!

全角でスペースを入力するだけで、入力した回数分ちゃんとブラウザー上でも反映してくれます。

はっきり言ってこれが一番手っ取り早くて簡単ですね。

ああ、日本語が使えてよかった!!!

※ でも1番目と2番目で紹介したやり方は絶対に知っておいた方がいいですけどね。ていうか知っていないとダメです。

4.インデントを入れる方法

こちらでご紹介するタグはCSSなんですが、HTMLコード内でスタイリングが出来る方法です。

この方法を用いれば、段落始めに好きなだけインデントを入れることが出来ます。

<html>
<head>
<title>インデントを入れる</title>
</head>
<body>
<p style="padding-left: 20px;">左に20pxのインデントを入れてみたい時はこうする。</p>
<p>これは何もインデントが入っていないバージョンです。</p>
</body>
</html>

ブラウザー上では

  左に20pxのインデントを入れてみたい時はこうする。

これは何もインデントが入っていないバージョンです。

という風に表示されます。

まとめ

HTMLを勉強しだして初期にけつまづく人が意外に多い、この「スペース問題」。

もちろんカテリーナもその1人でした(笑)ので、どなたかのお役に立てればうれしいです。

今でも解決方法が分かった時は「わたしはこんな簡単なことで5時間も悩んでいたのか!」というような事でしょっちゅうつまづいてますので、そういうのを覚え書きとしてどんどん追加していきたいと思います。

※追記 何かHTMLコードがめちゃくちゃ小さくて見にくいので、今使っているページビルダーと互換性があるシンタックス・ハイライターを早速探そうと思います。 次回のコード記事ではもっと見やすくしたいので、よろしくお願いします。

それではここまで読んでいただいてどうもありがとうございました!