htmlで空白を入れたい場合はどうしたらよいのでしょうか？
今回はhtmlに空白を入れる方法を説明します。
HTMLでの一般的な空白の入れ方
一般的には、そのままスペースキーで空白を入れる方法があります。
ですが、半角空白の場合、2つ以上スペースキーを打っても1つの空白としてhtmlに出力されてしまいます。
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title>htmlに空白を入れる方法</title> </head> <body> <p> 例えば こんなに半角空白や改行を入れても、1つしか空白 は表示されません。 </p> </body> </html> |
表示結果
全角空白を使えば連続で空白をいれることができます。
1 2 3 | <p> 例えば 全角空白を5つ打てば、5つ全角空白が表示されます。 </p> |
表示結果
HTMLで空白をいれるための特殊文字
しかし、「全角では広すぎる、半角空白で入れたい！」という方もいるでしょう。
htmlでは特殊な文字を使用したい場合に、特殊文字と呼ばれる文字を使用できます。
空白を入れる特殊文字は以下の4つがあります。
-
-  
- $emsp;
- $thinsp;
まず、 は半角空白と同じサイズの空白を入れることができます。単純に半角空白を入れたい場合はこの特殊文字をhtml内に記述しましょう。この特殊文字の場合、いくつ記述しても、記述した分だけ半角空白を入れることができます。
次に、 は よりも少し広めの空白を入れることができます。
次に、 は の2倍の広さの空白を入れることができます。
最後に、 は よりも狭い空白を入れることができます。
特殊文字を使用した例が以下です。
1 2 3 4 5 6 7 | <p> この後に空白が入ります| |←ここに空白がはいりました。(そこでは改行しないスペース)<br> この後に空白が入ります| |←ここに空白がはいりました。(n と同じ幅のスペース)<br> この後に空白が入ります| |←ここに空白がはいりました。(m と同じ幅のスペース)<br> この後に空白が入ります| |←ここに空白がはいりました。(細い空白)<br> 連続で空白を入れられます| |←ここに空白がはいりました。(複数スペース)<br> </p> |
表示結果
この後に空白が入ります| |←ここに空白がはいりました。(そこでは改行しないスペース)
この後に空白が入ります| |←ここに空白がはいりました。(n と同じ幅のスペース)
この後に空白が入ります| |←ここに空白がはいりました。(m と同じ幅のスペース)
この後に空白が入ります| |←ここに空白がはいりました。(細い空白)
連続で空白を入れられます| |←ここに空白がはいりました。(複数スペース)
<pre>を使用した方法
htmlのpreタグで囲まれた文章は、記述されたまま出力されます。
ソースコードなどを表示したときに使いましょう。
1 2 3 4 5 | <pre> preを使用すれば、 このような 文章でも そのまま出力されます。 </pre> |
表示結果
preを使用すれば、
このような 文章でも
そのまま出力されます。
最後に
いかがでしたでしょうか？
今回はhtml 空白の特殊文字などを紹介しました。興味がある人はその他の特殊文字を調べてみるのもいいのではないでしょうか。
コメントを残す