プログラミング未経験からでも月50万円達成

HTMLでスペース(空白)を作る・幅を変える方法【HTML初心者向け】

作成: 2016.12.05 更新: 2018.12.19

>> 世帯年収300万以下限定!
転職成功まで受講料発生なし。詳細はこちら

htmlの勉強を始めたばかりの方にとって「html上でスペース(空白)を表すのは少し難しい」と感じたことはありませんか?

スペースを表すやり方もたくさんあり、キーボードで打ってできることがhtml上では思った通りにできなかったりします。

そのような方のために、「html上でスペースを作る方法を一挙ご紹介」したいと思います。

これからご紹介する方法を試すだけで様々なスペースの作り方をマスターすることができます。

全角スペース、半角スペースを使ってスペース(空白)を表す

まずはじめにご紹介したいのは、全角スペース・半角スペースを使った「スペース(空白)」についてご説明します。

全角スペース、半角スペースとは?

パソコンに触れたことのある方なら誰もが知っている半角スペース。キーボードでも慣れ親しんでいる全角スペースと半角スペースは、全角モードでスペースキーを押すと大きめなスペース、半角モードでスペースキーを押すと小さなスペースが作れます。これは基本中の基本ですね。

全角スペース、半角スペースの違い

全角スペースと半角スペースの1番の違いは、スペースの大きさです。

これをWebの裏側の仕組みでもあるhtml上で確認した場合には、大きな違いがあります。

全角の場合、html上で全角スペースは打った分だけ反映されます。

半角の場合は、半角スペースを何度入力しても1回分しか反映されません。

htmlに慣れていない方がよく困惑するのはこの違いです。では下の例を使ってみていきましょう。

画像を参考にしてみます。

<p>html 半角スペース</p>

<p>html     5回分の半角スペース</p>

<p>html 全角スペース</p>

html上では以下のように表示されます。

html_5

このように5回分の半角スペースでは、打った5回分の半角スペースが反映されていません。これがhtml上での全角スペースと半角スペースの大きな違いです。

全角・半角でスペース(空白)を表すメリット、デメリット

スペースキーでスペース(空白)を表す方法にはメリット、デメリットがあります。

全角のメリットはhtml上で全角モードのときにスペースキーを押しただけスペース(空白)が反映されるので、より幅の広い空白を作りやすいことです。

全角のデメリットはメリットで述べたようにスペースキーで打った分だけ反映されますが、何度入力したのか分からずに自分自身がスペース(空白)の大きさを把握していないということが起こります。こういった事態は後々修正するときにスペース(空白)の大きさを測りなおさなければならないので面倒です。

半角のメリットは全角スペースより小さいスペース(空白)を扱うことができます。さらに1度しか反映されないのを利用してhtmlのコードを見やすく整理することができます。

半角のデメリットは半角スペース何個分でスペース(空白)を作りたいときにスペースキーを押すだけではどうすることもできません。ただこれに関しては次の方法で解決策を述べているので次の方法を参考にしてみてください。

コードを使って空白の幅を変える

上記で説明したデメリットを補える方法があります。

htmlでは、ある特定の4つのコードを利用することで、決まったことをしてくれます。

 

空白を使った4つのコードの特徴とは?

&nbsp;        このコードは半角スペースで作ったスペース(空白)と同じ分だけ空間を空けることができます。さらに&nbsp;を&nbsp;&nbsp;と2回使えば2回分の空白を空けることができます。

&nsp;        このコードは&nbsp;より少し大きいスペース(空白)を作ることができます。

&emsp;    このコードは&nsp;よりもさらに少し大きいスペース(空白)を作ることができます。

&thinsp;    このコードは&nbsp;より少し小さいスペース(空白)を作ることができます。

 

では例を使って空白の幅がどうなるのかを見ていきましょう。

<p>html&nbsp;特殊なコードで空白を表す</p>

<p>html&nbsp;特殊なコードで空白を表す</p>

<p>html&emsp;特殊なコードで空白を表す </p>

<p>html&thinsp;特殊なコードで空白を表す</p>

<p>html&nbsp;&nbsp;特殊なコードで空白を表す</p>

html上では以下のように表示されます。

html_6

&nbsp;&nbsp;を2回打つとちゃんと2回分のスペース(空白)ができていますね。

 

4つのコードの比較と使い分け!

先程紹介したように4つの記号に使える制限はありません

コードを繰り返せば繰り返した分だけのスペース(空白)を空けることができます。

さらにどのコードもスペース(空白)の大きさに違いがあるのでわずかな誤差を表したいときに便利です。

この記事のハッシュタグ

使える中級テクニック

これまではどれもスペースキーを1回押したり、決まったコードを打つだけという簡単なものでした。

ここでは使える中級テクニックについても説明していきます。

em、pxの幅を知ろう!

htmlででてくるemとpxとは?

em(エム)とpx(ピクセル)どちらも文字サイズの大きさになります。emとpxは空白を作るだけでなくホームページ作成において応用が利くので是非覚えておいてください。

基本的には1emは1文字分の大きさ1em=16pxとなっています。

だいたいイメージできれば大丈夫です。では次に実際にem、pxが使われているスペース(空白)のやり方を見ていきましょう。

 

タグを使って色々な幅を表現!

ではまた例を使って空白の幅がどうなるのかを見ていきましょう。

<p>html<span style=”margin-right: 2em;”></span>で空白を表す。 </p>

<p>html<span style=”margin-right: 32px;”></span>で空白を表す。 </p>

<p>html<span style=”margin-right: 5em;”></span>で空白を表す。 </p>

 

html上では以下のように表示されます。

html_10

上記のコードの中のmarginというのは、スペース(空白)を空けるという意味になります。今回は”margin-right: 2em;”とrightとしたので、htmlという文字の次に2em分の空白が開くようにしてます。

先程も述べたように1em=16pxなので、サイズの指定で2emと32pxが同じスペース(空白)になっているのがわかると思います。

このように空けたい文字数分emで指定してあげれば何文字でも1行で自由にスペース(空白)を作ることができます。

 

TECH::EXPERT 東京・名古屋・大阪・福岡

プログラミング未経験からWebエンジニアとして転職成功まで導くスクール TECH::EXPERT は、挫折しない環境を提供いたします。すべて駅から通いやすい便利な場所。いつでも質問できるメンター(講師)、一緒に頑張る同期がいるから頑張れる。そんな教室を是非見にきてください!

htmlをさらに知りたい方へ無料で学べるサイト20選!

もっとhtmlを深く勉強したい方向けに、おすすめの無料サイトを20選ご紹介します。

どのサイトもhtml入門者にとっても非常にわかりやすいサイトとなっているのでとてもおすすめです。

ドットインストール

html_7

ドットインストールでは動画を使ってhtmlやプログラミング言語について勉強することができます。

1回の動画時間はどれもほぼ3分なので空いた時間に、学習することが可能です。

動画の内容はほとんどが初心者向け、基礎的なことなのでhtmlを学び始めの方には最適です。

ほんっとにはじめてのHTML5

html_8

「ほんっとにはじめてのHTML5とCSS3」では、htmlが初めての方にわかりやすく構成されています。HTML5とは最新版のHTMLです。

 

プログラミング入門サイト~bituse~

html_9

「プログラミング入門サイト~bituse~」では、HTML入門について紹介されています。htmlで使うスタイルやタグの一覧も乗っているのでわからなくなった時の百科事典的な役割もしてくれます。

やさしいホームページ入門

この画像の比率がおかしいです。

html12

htmlを勉強していてわからない用語が出てきてなかなか先に進めないという方におすすめのサイトです。htmlでよく使う用語もしっかりと解説されています。

 

わかり易さを追求 超初心者用HTML講座

html14

 

このサイトではHTMLについてだけでなくレンタルサーバーやCSS、ちょっと応用的なjavascriptにまで丁寧に解説しているので、他のサイトと違ったようにするにはどうするのか気になった方は1読してみる価値ありです。

 

1時間で作るホームページ

html15

このサイトではホームページをウェブ上に公開するまでの過程を簡単にすべて説明しています。まだウェブ上にホームページを作っていない方はこのサイトを使えばゴールが見えてくるのでよりモチベーションアップにつながります。

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】

html16

このサイトではHTMLとCSSで本当に大事なことだけを説明しています。分量も他のサイトに比べ多くないので簡単に読めるのが魅力です。

 

Schoo

html17

とにかく内容がとても充実しています。HTMLや他のプログラミング言語にも広く精通していて、とても信頼できるサイトの1つです。

 

Progate

html18

スライド形式といったほかのサイトとは少し違った勉強ができるサイトがProgateです。内容も講義と演習に分かれており自分が学んだことをちゃんと理解できたかを確認することができます。

とほほのwww入門

html19

他のサイトではあまり説明していないHTML5とは具体的にどういったものかなどあまり気にされない疑問にも触れているサイトです。基本的なことも書いてあるので併せて読むとHTMLの理解がさらに深まります。

 

WEBページ作りのお勉強

html20

HTMLのサイトだけあってとてもカラフルで見やすくなっているサイトです。見やすいサイトで勉強したいという方にとてもおすすめです。

 

HTMLタグボード

html22

このサイトではHTMLの特にタグについて説明が詳しくのっています。タグというのは最初なかなか覚えられないんのでこのサイトをうまく利用して覚えればHTMLのコードをスラスラ書けるようになります。

HTMLクリックリファレンス

html30

HTMLのタグについて辞書順に並んでいるサイトでさらにHTMLとCSSの基本についても開設されています。

このサイトでは最新のHTML5とCSS3についても触れられており最新の情報が詰まっています。

Weblog Endoutakae

html32

HTMLとCSSについてざっと書いてあります。文字数自体は少ないですが、要点を抑えてあるのがポイントでHTMLなどの違いについても触れられており理解を深めやすいサイトになっています。

 

SKILLHUB

html31

無料の登録がありますが、簡単に登録もでき内容も充実しています。すぐに自分でもHTMLを使えるように説明してくれているサイトなのでWebページ制作の実践力が身に付きます。

 

30分間HTML入門

html33

30分かからず読めてしまうのがこのサイト30分間HTML入門。このサイトではHTMLを書けるようになるというよりはHTMLを始めるにあたっての当たり前のことについて掘り下げて書いてあるサイトです。頭の片隅に置いておくだけでもHTMLへの入門を助けてくれます。

 

Qiita

html34

このサイトではHTML、CSS、JavaScriptの基本的なことについて書かれています。特にJavaScriptに関してはホームページをより充実させたいという方には必須なので勉強をする前に読んでおくことをおすすめします。

TAG index

html35

HTMLの解説以外にもさまざまなテンプレートがおいてあるのがこのサイトです。テンプレートとはホームページのお手本のようなものでこのサイトではさまざまな種類のものがおいてあり、それを使ってホームページを作成することができます。

 

MdN DESIGN INTERACTIVE

html36

HTML5とXHTMLについての違いが語られているサイトで、HTML5になって新しくできるようになったこと可能性の広がりについて説明されています。HTMLの解説も初心者向けでHTML5との違いも具体的に述べられています。

HTML5入門

html37

HTML5に特に焦点をあてて説明しているのがこのサイト。HTML5で使えるようになった新しいタグについての説明が多いのでHTML自体を初めて勉強する方はその勉強が終わってから見ることをおすすめします。

さいごに

html上でスペース(空白)を表現する方法を解説していきました。

初心者の方も真似をすればちゃんとスペース(空白)ができたと思います。

最後に紹介した中級の方法は自分の作成したいホームページが複雑になればなるほど役に立ってきます。

分からなくなったら、ここで紹介したhtmlを無料で学べるいいサイトなど、自分のあったサイトを見つけてみてください。

TECH::CAMPについて

TECH::CAMPは、講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。

TECH::CAMPならプログラミングが、なんとなく分かるではなく、一人で出来るようになります。

また、質問し放題のため、分からないところを質問しすぐに解決することで、どんどん新たなスキルを身につけることができます。

この機会にプログラミングを学びませんか?

未経験からエンジニア・Webデザイナーを目指すならTECH::EXPERT

TECH::EXPERTは未経験からのエンジニア・Webデザイナー転職を実現するスクールです。

転職成功率は98.5%(2019年1月時点)。確実に使えるスキルを身につけるための教育と、徹底した就職サポートであなたの転職を叶えます。

無理な勧誘は一切ありません。まずは無料キャリア相談(カウンセリング)にぜひお越しください。

無料キャリア相談の日程を見る

この記事を書いた人

Avatar
ttake0829