【HTML入門】文章中にスペース(空白文字)を入れる3つの方法とは?

こんにちは!侍エンジニア塾ブログ編集部のシホです!

HTMLで文章中にスペース(空白文字)を入れるとき、思うようにいかないことはありませんか? スペースを入れる方法はいくつかあって、それぞれ空白文字の幅が違ったりして特性があります。

今回はよく使われているスペースのタグやコード(特殊記号)を紹介するので、ぜひ参考にしてみてください!

スペース(空白文字)を入れる方法

HTMLを記述するとき、このような失敗はありませんか?

See the Pen スペースが思うようにならない by Shiho Sakai (@shiho-sakai) on CodePen.0

HTMLのコードではスペースを多めにいれているのに、いざプレビューすると意図しない結果に・・・。このように、HTMLはテキストを入力するときと同じように記述しても、スペース入力はうまくいきません。なので、タグやコード(特殊記号)を使ってスペースをいれていきます。

全角・半角スペースを使う

全角スペース

全角スペースを使って3つスペースをいれてみましょう。

See the Pen ervKLR by Shiho Sakai (@shiho-sakai) on CodePen.0

全角スペース3つ分のスペースが反映されました。つまり、全角スペース1つは全角スペース1つ分として反映されます。

半角スペース

では、半角スペースを使って3つスペースを入れてみましょう。

See the Pen 半角スペース3つ by Shiho Sakai (@shiho-sakai) on CodePen.0

半角スペース3ついれたのに半角スペース1つ分しか反映されていません。つまり、半角スペースはいくつ記述しても、半角スペース1つ分しか反映されません。

メリットとデメリット

全角スペースは、記述した分そのまま反映されるのがメリットですが、実際にいくつスペースをあけたかわからなくなってしまうのがデメリットです。

また、半角スペースは、全角スペースより小さいスペースを扱うことができるのがメリットですが、多めのスペースを入れるのに向いていません。半角スペースを複数使いたい場合は、次に説明する、コード(特殊記号)使いましょう。

コード(特殊記号)を使う

 

半角のスペースを複数入れたい時は、 を使用します。
nbspは「non-breaking space」の略です。

See the Pen  を使う by Shiho Sakai (@shiho-sakai) on CodePen.0

また、 は半角スペース分のスペースをあけることができますが、この他にも以下のような特殊記号をつかってスペースをあけることができます。

  •  」は通常の半角スペースと同じサイズの空白文字。
  •  」はそれより少し広めの空白文字。
  •  」はさらに広めの空白文字。
  •  」は、最初の「 」よりも狭い(細い)空白文字です。

See the Pen スペース比較 by Shiho Sakai (@shiho-sakai) on CodePen.0

タグを使う

<pre>タグ

<pre> 〜 </pre>で囲むと、半角スペースや改行をそのまま表示することができます。preとは「preformatted text」の略で、日本語では「フォーマット(整形)済みのテキスト」という意味になります。

つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。<pre> ~ </pre>で囲まれたはコードは、半角スペース・改行などがそのまま表示されるため、 <pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示する場合に使用されることが多いです。

See the Pen by Shiho Sakai (@shiho-sakai) on CodePen.0


 

改行でスペースをあける方法

これまで、文章中にスペース(空白文字)を入れる方法を説明してきましたが、改行タグや段落タグを使って文章中に行単位でスペースをあける方法もあります。例えばこんな感じです。これは段落タグを使って改行しています。

See the Pen OZWjgo by Shiho Sakai (@shiho-sakai) on CodePen.0

詳しくはこちらに解説してあるので、ぜひ読んでみてください。↓

HTMLで改行するには?改行タグ<br>の正しい使い方と注意点
更新日 : 2020年6月19日

ウェブサイト制作スキルで自由に働けるようになるには

今回はHTMLでスペースのつけ方を解説いたしましたが、ウェブサイト制作をしていく上で間隔の調整などであれば本来CSSを扱う必要があります。

それ以外にも「ウェブサイト制作を個人で請け負い、場所や時間に縛られずに働けるようになりたい」と思っているなら、JavaScript、WordPressなどのプログラミングスキルも必要です。

HTMLだけではお客様の要望に応えられる幅は狭くなりますし、案件数的にも多くはないので継続的に仕事を受けることが難しくなります。クラウドワークスでも複数のスキル習得は以下のようにすすめております。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

こういった複数の技術を短期間で効率よく身につけるにはプログラミングスクールでの学習がおすすめです。

侍エンジニア塾ではウェブサイト制作希望の場合、特化してオリジナルカリキュラムを作成し、マンツーマンで学習をするため、途中で仕事を獲得してきて受講期間中に仕事を納品するなど、臨機応変に対応が可能です。

実際の仕事を通じてスキルを学べるスクールは稀で、最短で実力をあげたい方はぜひ一度無料体験レッスンへお越しください。オンラインでも受講可能で、以下のボタンよりお申し込みいただけます。

無料体験レッスンへ申し込む

まとめ

いかがでしたでしょうか。スペースの入れかたはいろいろあるので、理解して覚えておくと便利です。ぜひ実際に記述してみて、スペース表示を試してみてください!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★