HTML文章中に空白を入れる方法と注意点

kuu

htmlで空白を入れたい場合はどうしたらよいのでしょうか?

今回はhtmlに空白を入れる方法を説明します。

HTMLでの一般的な空白の入れ方

space

一般的には、そのままスペースキーで空白を入れる方法があります。

ですが、半角空白の場合、2つ以上スペースキーを打っても1つの空白としてhtmlに出力されてしまいます。

表示結果

 例えば こんなに半角空白や改行を入れても、1つしか空白 は表示されません。

 

全角空白を使えば連続で空白をいれることができます。

表示結果

  例えば     全角空白を5つ打てば、5つ全角空白が表示されます。

HTMLで空白をいれるための特殊文字

しかし、「全角では広すぎる、半角空白で入れたい!」という方もいるでしょう。

htmlでは特殊な文字を使用したい場合に、特殊文字と呼ばれる文字を使用できます。

空白を入れる特殊文字は以下の4つがあります。

  •  
  •  
  • $emsp;
  • $thinsp;

まず、 は半角空白と同じサイズの空白を入れることができます。単純に半角空白を入れたい場合はこの特殊文字をhtml内に記述しましょう。この特殊文字の場合、いくつ記述しても、記述した分だけ半角空白を入れることができます。

次に、 は よりも少し広めの空白を入れることができます。

次に、 は の2倍の広さの空白を入れることができます。

最後に、 は よりも狭い空白を入れることができます。

特殊文字を使用した例が以下です。

表示結果

この後に空白が入ります| |←ここに空白がはいりました。(そこでは改行しないスペース)
この後に空白が入ります| |←ここに空白がはいりました。(n と同じ幅のスペース)
この後に空白が入ります| |←ここに空白がはいりました。(m と同じ幅のスペース)
この後に空白が入ります| |←ここに空白がはいりました。(細い空白)
連続で空白を入れられます|     |←ここに空白がはいりました。(複数スペース)

一般的に文字間隔を調整するために空白文字を使用するのは好ましくないとされています。頻繁に利用する必要が出た場合は、CSS(letter-spacingなど)を利用していきましょう。

<pre>を使用した方法

htmlのpreタグで囲まれた文章は、記述されたまま出力されます。

ソースコードなどを表示したときに使いましょう。

指定した位置で空白や改行を入れられますが、あくまでhtmlコードを表示したいときなどでのみ利用しましょう。

表示結果

preを使用すれば、
    このような  文章でも
そのまま出力されます。

 最後に

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

今回はhtml 空白の特殊文字などを紹介しました。興味がある人はその他の特殊文字を調べてみるのもいいのではないでしょうか。

 

CTA

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

CHUYA MIURA

普段は物販系のシステムの開発サポートや、中小規模のネット物販事業を行っている方や企業様向けに業務効率化支援サポートなどしています。システム開発経験 楽天 ヤフオク Amazon ヤフーショッピング BUYMA メルカリ などの作業効率かツールやシステムを開発してきました。個人でも物販をやってみて、物販ビジネスのどの部分が作業的に大変なのかを経験をいかして、現在はディレクションやコンサルティングサービスをしています。 物販関係のシステムを作成したい方にはご好評いただいております。物販システムを開発したい方に向けて、各プラットフォームのツール開発経験のあるプログラマーさんの紹介や、システム仕様書のサポートなどもしていますので、ご興味のあるかたはお気軽にご相談ください。物販経験 ネット物販のシステムを希望されるクライアントさんの気持ちを理解するため、2013年に個人でも物販をはじめました。 ヤフオク Amazon 楽天 などに出品して、月商100-300万になりました。1日に150件近くの出荷も経験し、それらの経験を元に現在サイトを運営しています。このサイトでブログをかいてくれている しんくんに昨年初めに中国仕入れを教えたところ、副業としては十分な結果がでたことを受け、初心者向けに情報を公開しています。ご興味あるかたはこちらへ連絡ください。(ご連絡の際は、ご用件も一緒にご連絡ください。)メール:sales☆fieroj.com(☆をアットマークに変えてください) Chatwork: Chuya-Miura