- 公開日：2016-2-23 最終更新日：2018-6-29
- プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ
HTML上で空白や改行を入力したのに、思った通りにブラウザで表示されなかったことはありませんか。
例えば、
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <title>プロナビ</title> </head> <body> プロナビは プログラミング初心者が 自分に合った勉強法を見つけられるサイト です。 </body> </html> |
「プロナビはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。」という文章を以上のようにHTML上に入力しても、下記のように表示されます。
ブログ等とは異なり、HTML上に半角スペースや改行をいくら入力しても、ブラウザ上では空白が一つ分に詰められて表示されます。今回は、HTML上でスペースを詰めずに連続したスペースを空ける方法をご紹介します。
特殊文字を用いた方法
連続でスペースを表示させる最も一般的なやり方が特殊文字を用いた方法です。半角スペースを連続で表示するには、「 」という特殊文字を使います。特殊文字とは、HTMLに記述してもブラウザで直接表示することが出来ない文字や記号のことです。例えば、HTML上でpタグと表示したい時は、<p>と記述するとタグと解釈されてしまい上手く表示できないので、<を表す「<」と>を表す「>」を使って、「<p> 」と記述する必要があります。
HTML上の表示
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>プロナビ</title> </head> <body> プロナビは プログラミング初心者が自分に合った勉強法を見つけられるサイトです。 </body> </html> |
ブラウザ上の表示
の他にも空白を表す特殊文字があります。
・ 通常の半角スペースと同じサイズの空白です。
・ 半角スペースより少し広めの空白です。
・ 半角スペースよりさらに広めの空白です。全角スペースとほぼ同じ幅です。
・ より狭い空白です。
preタグを使う方法
preタグを使えば、HTMLに記述された半角スペースや改行などをブラウザにそのまま表示することができます。
HMTL上の表示
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <title>プロナビ</title> </head> <body> <pre> プロナビは プログラミング初心者が自分に合った勉強法を見つけられる サイトです。</pre> </body> </html> |
ブラウザ上の表示
全角スペース
半角スペースではなく、全角スペースを使って連続してスペースを空ける方法があります。日本語入力に切り替えた後、スペースキーを入力すれば、入力回数分だけそのまま空白が表示されます。
HTML上の表示
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>プロナビ</title> </head> <body> プロナビは プログラミング初心者が 自分に合った勉強法を見つけられるサイトです。 </body> </html> |
ブラウザ上の表示
いかがでしたか。今回は、①特殊文字②preタグ③全角スペースを使って連続でスペースを表示させる方法をご紹介しました。ぜひ、実際に記述してみてスペースを表示できるか確かめてみてください。
【オススメ記事】
➡【HTML入門】余白の取り方(paddingとmargin)について
➡︎【HTML】ホームページの画像が表示されない原因とその対処法
➡︎ HTMLとCSSの文法チェックツール5選
➡︎ プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」
➡︎ 無料で使える！HTMLの学習サイトBEST7
➡︎ 無料で使える！ 初心者にオススメのフリーテキストエディタ8選
プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか？オンラインのプログラミングスクール「TechAcademy」のメンターが対応。
この記事が気に入ったら
いいね！しよう
プロナビの最新情報をお届けします
あわせて読みたい
2016年3月2日 プログラミング入門講座①「HTMLとは〜概要と基本構造〜」
2016年3月3日 プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」
2016年2月24日 【HTML】ホームページの画像が表示されない原因とその対処法
2015年9月4日 HTMLの本・参考書の評判
2015年6月21日 無料で使える！HTMLの学習サイトBEST7
2016年2月16日 無料で使える！ 初心者にオススメのフリーテキストエディタ8選
