こんにちは、コーヒーをこぼしてお気に入りのワンピが台無しになった莉奈です。
ついつい・・ゲームに夢中になって敵から攻められている時、思わず自分ものけぞって、コーヒーこぼしました・・・・。
こういうことがあるから何かしている時には飲み物、食べ物そばに置かないとか、飲むなら休憩のときとか決めていたのに。
まあ、それはさておき、今プログラミングの勉強をされている方！あれこれ決まり事があってなんだか難しいな・・なんて感じていませんか？私も初心者の頃はそうでした。
htmlを使えるようになっても、文字に横線ってどうやって入れるの？スペースは？と迷うことも多いですよね。
そこで今回は、htmlに空白を入れる方法を紹介します。
目次
htmlにスペースを入れる方法を紹介
文章を作っている時、そこに空白を入れたいって時がありますね。
1つスペースを空けるならhtml上に1つ分のスペースを入れればいいのですが、いくつかのスペースを空けたい時、例えば「私の名前は です」という表記にしたい場合です。
htmlのコードを書くときにはかなり多くのスペースを入れているのに、実際、プレビューで見てみると、あれ？1つ分しか空いていない？なんてこともあります。
htmlコードとテキスト入力では同じ記述にしてもスペースに関しては同じになりません。
そのため、タグとコード「特殊記号」を使う必要が出てきます。
1つ分のスペースを入れたい時には普通にスペースを入れればいいのですが、1つ分以上、複数分スペースを入れる場合、半角と全角では方法が違います。
その方法を覚えておけば、全角で1つ以上のスペースを空けたい時でも、半角で1つ以上のスペースを空けたい時でも楽に活用できますよ。
1. 半角スペースを入れるには を利用
文章を書いている時、全角分ではなく半角のスペースを入れたい時もあります。
半角のスペースを入れたい時には、「 」という特殊文字を入れる必要があるのです。
この特殊文字というのは、入力してもそのままサイト上に表示されない文字のことを言います。
特殊文字を利用することで、スペース以外にも様々なことができるので覚えておくと便利です。
半角スペースについては「 」の「nbsp」が特殊文字となります。
「&」「；」でこの特殊文字を囲むことで、コンピューターに半角スペースを空ける命令ができる、ということですね。
そもそもnbspとはどういう意味を持っているのかというと、non-breaking space・・自動改行しないスペースです。
日本語もそうですが、英語も文章を書いていると自動改行されてしまうことがあります。
そのため自動改行を調整するためにも用いられます。
ただ日本語の場合、文章の体裁が崩れてしまうことがあるため、スタイルシートを利用する方が多いです。
またnbspはテキストで書くときと同じ半角スペースと同じサイズのスペースができますが、そのほかにもいくつか、スペースの特殊記号を利用することで様々な空白を作ることができます。
・「 」と入れれば通常の半角スペースよりも広めのスペースを入れることができる。
・「 」と入れれば通常の半角スペースよりさらに広めのスペースを入れることができる。
・「&tsinsp;」と入れれば通常の半角スペースより狭いスペースを入れることができる。
これらを覚えておくといくつかのスペースをうまく利用できるようになるでしょう。
2. 全角スペースを使えば使用した分だけ空白が入る
全角スペースを入れたい場合、スペースを入れたい分だけテキスト表記と同じように入ります。
全角スペースを3つ入れたければ3つ、5つ入れたければ5つ全角スペースを使えばいいのです。
テキストと同じように表記されるので、イメージしたとおりに作り上げることができます。
3. preタグを使うと半角スペースも改行も認識される
もう1つ、スペースを入れる方法にpreタグを使う方法があります。
preタグというのは「preformatted text」の略語で、テキストで入力したとおりに表記してくれるタグと覚えておけばいいでしょう。
preタグでテキストを囲むことで、入力した文章通り、WEB上でも表記できるのです。
preタグは<pre>スペース開ける</pre>という形で使います。
このテキストという文字のスペース開けるという文字を<pre>スペース 開ける</pre>と入力すればWEB上でも同じように「スペース 開ける」と表示されます。
1つ分のスペースでも、複数分のスペースでもpreタグで囲むことで同じ表記となるので、このタグも覚えて活用すれば便利です。
ちなみにpreタグで囲むことでスペース以外、改行なども指示できます。
<pre>スペース 開ける ←スペース2
スペース 開ける</pre> ←スペース3 改行
このように入力すれば、WEB上、
スペース 開ける
スペース 開ける
と表記されます。
スペースも改行もpreタグを知っていれば楽にできますね。
htmlでスペースを入れる方法の注意点
1. 全角スペースを使うときには何個空けたか数えておく
htmlでスペースを入れる方法を覚えれば、文章の協調したい部分の前にスペースを入れるなど、様々な使い方ができますが、全角スペースを利用する場合には注意したい点があります。
全角スペースを入れる方法は普通に全角スペースで入力すればいいので、難しい事はありません。
半角スペースを利用する時のようにタグをコードやタグを入れる必要もないので簡単ですが、スペースをいくつ開けたか？覚えておくことが必要です。
同じようなスペースを作りたい時、全角スペースでいくつ開けたのかわからないと、スペースの幅が違ってきます。
スペース何個分の空白を開けたのか覚えておけば、同じようなスペースを作りたい時、同じ個数を入れればいいので文章をきれいに整えることができるでしょう。
2. コード、タグを書き間違えると反映されない
htmlはWEBサイトなどを作る時、とても便利で活用しやすいものとなります。
PHPなどのプログラミング言語を利用して作成し、htmlを利用すれば装飾を施したり、体裁を整えることができるのです。
ただコードやタグを間違えるとWEB上に繁栄されないので注意が必要となります。
WEBサイトを見ていてたまにコードやタグの一部が見えていることがありますよね。
またどうしてこんなところに改行やスペースが入っているの？と思うこともあります。
これらはコードやタグの書き間違いなどで起こることで、コードやタグを書き間違えなければ、通常、反映されないということはありません。
スペースを入れたいと思ってタグ、コードを利用したのに思った通りに反映されない場合、コードなどが間違っていないかよく見直すことが必要ですね。
1文字でも間違えたりすれば思った通りに表記されないのです。
3. htmlだけでは対応しきれないこともある
スペースや改行などhtmlでタグやコードを利用することで対応できますが、近頃のWEBサイトはhtmlの知識だけでは対応できないことも出てきています。
WEBサイトを制作するなど、業務として利用するようになると、CSSなどを利用する事が必要となるのです。
CSSというのはCascading Style Sheetsというもので、WEBのスタイルを決定づける技術のことです。
htmlなどで作られたWEBページにCSSで装飾を施します。
WEBページをどのようなスタイルにするのか、またプリンターで出力する際にどんなスタイルにするのかなどを指定できる技術です。
プログラム初心者の方はまずhtmlやPHPなどの技術を学び、それからCSSについても学んでいくことで、htmlだけで対応しきれない事に関しても対応できるようになります。
htmlをしっかり学び、基礎を身に着けてから、様々な対応ができる技術も身に着けていきましょうね。
まとめ
いかがでしたか？
今回はhtmlにスペースを入れる方法をいくつかご紹介しました。
WEBサイトの文章にうまくスペースが入らない！！と悩んでいる方のお力になれたでしょうか。
1つ問題を解決すると、また1つ何か壁が出てくるのがプログラミングかもしれませんが、それを1つずつ解決していくことで見についていくはずです。
コツコツ！地道に学んでいきましょうね。
