こんにちは！侍エンジニアブログ編集部のシホです！
HTMLで文章中にスペース（空白文字）を入れるとき、思うようにいかないことはありませんか？ スペースを入れる方法はいくつかあって、それぞれ空白文字の幅が違ったりして特性があります。
今回はよく使われているスペースのタグやコード（特殊記号）を紹介するので、ぜひ参考にしてみてください！
スペース(空白文字)を入れる方法
HTMLを記述するとき、このような失敗はありませんか？
See the Pen スペースが思うようにならない by Shiho Sakai (@shiho-sakai) on CodePen.
HTMLのコードではスペースを多めにいれているのに、いざプレビューすると意図しない結果に・・・。このように、HTMLはテキストを入力するときと同じように記述しても、スペース入力はうまくいきません。なので、タグやコード（特殊記号）を使ってスペースをいれていきます。
全角・半角スペースを使う
全角スペース
全角スペースを使って3つスペースをいれてみましょう。
See the Pen ervKLR by Shiho Sakai (@shiho-sakai) on CodePen.
全角スペース3つ分のスペースが反映されました。つまり、全角スペース1つは全角スペース１つ分として反映されます。
半角スペース
では、半角スペースを使って3つスペースを入れてみましょう。
See the Pen 半角スペース3つ by Shiho Sakai (@shiho-sakai) on CodePen.
半角スペース3ついれたのに半角スペース1つ分しか反映されていません。つまり、半角スペースはいくつ記述しても、半角スペース1つ分しか反映されません。
メリットとデメリット
全角スペースは、記述した分そのまま反映されるのがメリットですが、実際にいくつスペースをあけたかわからなくなってしまうのがデメリットです。
また、半角スペースは、全角スペースより小さいスペースを扱うことができるのがメリットですが、多めのスペースを入れるのに向いていません。半角スペースを複数使いたい場合は、次に説明する、コード（特殊記号）使いましょう。
コード(特殊記号)を使う
半角のスペースを複数入れたい時は、 を使用します。
nbspは「non-breaking space」の略です。
See the Pen を使う by Shiho Sakai (@shiho-sakai) on CodePen.
また、 は半角スペース分のスペースをあけることができますが、この他にも以下のような特殊記号をつかってスペースをあけることができます。
- 「
」は通常の半角スペースと同じサイズの空白文字。 - 「
 」はそれより少し広めの空白文字。 - 「
 」はさらに広めの空白文字。 - 「
 」は、最初の「 」よりも狭い(細い)空白文字です。
See the Pen スペース比較 by Shiho Sakai (@shiho-sakai) on CodePen.
タグを使う
<pre>タグ
<pre> 〜 </pre>で囲むと、半角スペースや改行をそのまま表示することができます。preとは「preformatted text」の略で、日本語では「フォーマット（整形）済みのテキスト」という意味になります。
つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。<pre> ～ </pre>で囲まれたはコードは、半角スペース・改行などがそのまま表示されるため、 <pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示する場合に使用されることが多いです。
See the Pen
改行でスペースをあける方法
これまで、文章中にスペース（空白文字）を入れる方法を説明してきましたが、改行タグや段落タグを使って文章中に行単位でスペースをあける方法もあります。例えばこんな感じです。これは段落タグを使って改行しています。
See the Pen OZWjgo by Shiho Sakai (@shiho-sakai) on CodePen.
詳しくはこちらに解説してあるので、ぜひ読んでみてください。↓
ウェブサイト制作スキルで自由に働けるようになるには
今回はHTMLでスペースのつけ方を解説いたしましたが、ウェブサイト制作をしていく上で間隔の調整などであれば本来CSSを扱う必要があります。
それ以外にも「ウェブサイト制作を個人で請け負い、場所や時間に縛られずに働けるようになりたい」と思っているなら、JavaScript、WordPressなどのプログラミングスキルも必要です。
HTMLだけではお客様の要望に応えられる幅は狭くなりますし、案件数的にも多くはないので継続的に仕事を受けることが難しくなります。クラウドワークスでも複数のスキル習得は以下のようにすすめております。
HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト（1ページあたり単価）・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript（AJAX）を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用：CrowdWorks
こういった複数の技術を短期間で効率よく身につけるにはプログラミングスクールでの学習がおすすめです。
侍エンジニアではウェブサイト制作希望の場合、特化してオリジナルカリキュラムを作成し、マンツーマンで学習をするため、途中で仕事を獲得してきて受講期間中に仕事を納品するなど、臨機応変に対応が可能です。
実際の仕事を通じてスキルを学べるスクールは稀で、最短で実力をあげたい方はぜひ一度無料カウンセリングへお越しください。オンラインでも受講可能で、以下のボタンよりお申し込みいただけます。
まとめ
いかがでしたでしょうか。スペースの入れかたはいろいろあるので、理解して覚えておくと便利です。ぜひ実際に記述してみて、スペース表示を試してみてください！
