1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【HTML入門】スペース(空白)を表示させる3つの方法

HTML スペース
Pocket

HTML上で空白や改行を入力したのに、思った通りにブラウザで表示されなかったことはありませんか。
例えば、

「プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。」という文章を以上のようにHTML上に入力しても、下記のように表示されます。

プロスタは プログラミング初心者が 自分に合った勉強法を見つけられるサイト です。

ブログ等とは異なり、HTML上に半角スペースや改行をいくら入力しても、ブラウザ上では空白が一つ分に詰められて表示されます。今回は、HTML上でスペースを詰めずに連続したスペースを空ける方法をご紹介します。

特殊文字を用いた方法

連続でスペースを表示させる最も一般的なやり方が特殊文字を用いた方法です。半角スペースを連続で表示するには、「&nbsp;」という特殊文字を使います。特殊文字とは、HTMLに記述してもブラウザで直接表示することが出来ない文字や記号のことです。例えば、HTML上でpタグと表示したい時は、<p>と記述するとタグと解釈されてしまい上手く表示できないので、<を表す「&lt;」と>を表す「&gt;」を使って、「&lt;p&gt; 」と記述する必要があります。

HTML上の表示

ブラウザ上の表示

プロスタは        プログラミング初心者が自分に合った勉強法を見つけられるサイトです。

&nbsp;の他にも空白を表す特殊文字があります。
・&nbsp; 通常の半角スペースと同じサイズの空白です。
・&ensp; 半角スペースより少し広めの空白です。
・&emsp; 半角スペースよりさらに広めの空白です。全角スペースとほぼ同じ幅です。
・&thinsp; &nbsp;より狭い空白です。

preタグを使う方法

preタグを使えば、HTMLに記述された半角スペースや改行などをブラウザにそのまま表示することができます。

HMTL上の表示

ブラウザ上の表示

プロスタは   プログラミング初心者が自分に合った勉強法を見つけられる    サイトです。

全角スペース

半角スペースではなく、全角スペースを使って連続してスペースを空ける方法があります。日本語入力に切り替えた後、スペースキーを入力すれば、入力回数分だけそのまま空白が表示されます。

HTML上の表示

ブラウザ上の表示

プロスタは   プログラミング初心者が    自分に合った勉強法を見つけられるサイトです。

いかがでしたか。今回は、①特殊文字②preタグ③全角スペースを使って連続でスペースを表示させる方法をご紹介しました。ぜひ、実際に記述してみてスペースを表示できるか確かめてみてください。

【オススメ記事】
【HTML入門】余白の取り方(paddingとmargin)について
➡︎【HTML】ホームページの画像が表示されない原因とその対処法
➡︎ HTMLとCSSの文法チェックツール5選
➡︎ プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」
➡︎ 無料で使える!HTMLの学習サイトBEST7
➡︎ 無料で使える! 初心者にオススメのフリーテキストエディタ8選

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る