HTMLの文書中に空白を作る方法とは？特殊文字を正しく活用しよう
「HTMLの文章で空白を作るのってどうやるんだっけ？」
「空白を作るのにスペースの使いすぎは良くないって聞いたことあるけど…」
HTMLの学習をしている際にそう思ったことはありませんか？
空白の正しい作り方を知ることで、HTMLでわかりやすい文章を書くことができます！
今回は、主に以下の4つの内容がわかる記事になっています。
- HTMLにおける空白文字とはなにか？
- HTMLで空白文字を作る方法
- 空白文字をCSSで作る方法
- HTMLの特殊文字を使って空白文字を作る方法
HTML文章中に空白を作る方法はいくつかありますが、その中でも今回は推奨されている「CSSでのスタイリング」と「特殊文字を使う方法」について解説していきます。
具体的な使い方や、特徴、注意点まで解説しますので、空白文字について詳しく知らない初心者でも満足できる内容になっていますよ！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLの空白文字とは？文章中に空白文字を入れる方法4つも紹介
HTMLの文章中に作り出した空白は「空白文字」と呼ばれています。
主に文字と文字の間や行の頭などに空白（余白）を作るための文字のことで、文章を見やすくするのに必要な技術です。
HTMLの空白文字は以下の4つの方法で作ることができます。
- CSSでスタイリングする
- 特殊文字を使う
- preタグを使う
- 全角スペースを使う
「あれ？半角スペースは？」
と思った人もいるかもしれませんが、半角スペースは空白として反映されません。
HTMLではコードを見やすくするための「字下げ」という技術があります。この際に半角スペースを使用するため、ブラウザに反映させてしまっては表示が崩れてしまうというのが理由です。
上記4つの方法の中で、最も推奨度が高いのは「CSSで余白を作る」ことですが、今回は「特殊文字を使う方法」も合わせて解説します。
「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
【最も推奨されている】空白文字をCSSで作る方法
空白文字を作る方法の中で、一番推奨されているのがCSSでスタイリングする方法です。
空白の広さを自由に設定できるので、幅の広い空白を作る時にも便利です。
また、次の項目で紹介する特殊文字やスペースはと異なり、CSSではエラーが発生しづらいというメリットもあります。
HTMLの文章中にCSSを適用するには、spnaタグを使って以下のようにスタイリングします。
<!-- HTML -->
<p>CSSを使って<span>空白文字</span>を作ります</p>
/* CSS */
span {
margin-left: 16px;
margin-right: 16px;
}今回は、1文字分の大きさと言われている16pxの空白を「空白文字」の左右に設定しました。
pxサイズを調節してもっと空白を広くしたり、左右どちらかだけ空白を設定するなど、自由にカスタマイズできます。
【推奨度は中】HTMLの特殊文字を使って文章中に空白を作る方法
HTMLでコードを書くとき、「>」や「&」といった記号を表示させたいと思ったことはありませんか？
実は、これらの記号はテキストとしてそのまま記述してもブラウザ上には表示されません。
これは、コードを書くときに使用する「>」や「&」などをテキストとして表示させてしまうと、ブラウザ表示が崩れてしまうために設定されている仕組みです。
特殊文字は、そのような通常はブラウザ上で表示できない記号をテキストとして表示することができる文字です。
特殊文字は、その名の通り特殊な文字を使って作られています。
「＆（アンド）」で始まり「;（ダブルクオーテーション）」で終わるという特徴があり、かなりの数の特殊文字が存在しています。
空白を作り出せる特殊文字は4つ
「特殊文字を使う時は、文字コードに注意しましょう」ということを聞いたことがあるかもしれません。
世界中の言葉や記号を集めてコードとして管理し、コンピューターで表現できるように数値化しているのが「文字コード」です。
文字コードには様々な種類があり、表現方法が異なるため注意が必要と言われています。
今回は、「パソコンの世界共通語」と言われている「UTF-8」という文字コードの特殊文字のみ紹介します。
「 」：改行しないための空白
半角スペース分の空白を作れる特殊文字と言えばこれ！と思われがちな「 」ですが、本来は「改行をしないスペース」という意味です。
nbspは「non-break-space（ノンブレークスペース）」の略語と理解しておけば間違いづらいでしょう。
以下のように、前後の改行をしたくない文字と文字の間に挿入して使用します。
<!-- HTML -->
<body>
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p>
</ul>
</body>
/* CSS */
p {
width: 500px;
}日本語ではあまり使い道がないので、英語の例文で紹介しています。
また、改行の有無がわかりやすいようにpタグの幅を設定しています。
上記では、一文の途中で改行されないように「when」と「MTV」の間に記述しています。
また、特殊文字を使用する時は「（テキスト） （テキスト）」というように両サイドの言葉と隙間を開けずに記述するように注意しましょう。
「  」：一番広い空白（全角スペースとほぼ同じ）
「 」のemはCSSの単位、spはspaceという意味を表している特殊文字です。
つまり、「em=1文字分の大きさ」の「sp=空白」ということになるので、16px（1em=16px）ほどの空白を作ることができるということになります。
全角スペースとほぼ同じ広さなので、全角スペース分の空白を作りたい時に便利です。
<p>特殊文字 全角スペースぐらいの空白</p>「  」：  の大体半分サイズの空白（半角スペースより少し広い）
「 」のenはCSSの単位であるemの半分の幅0.5emを表しています。
つまり、「 」の大体半分サイズの空白を作ることができます。
和文では半角スペースと同じなので、半角スペースを特殊文字で作りたい時に使用できます。
<p>特殊文字 半角スペースより少し広い空白</p>「 」：一番狭い空白（ よりも狭い）
「thin」は日本語で「細い」という意味。
「 」は特殊文字の中で、一番狭い空白を作ることができます。
<p>特殊文字 一番狭い空白</p>「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？
HTMLで特殊文字を使う時の注意点！空白のサイズ調整に複数使用するのは非推奨
特殊文字を使って空白を作る場合、あまり多用するのは推奨されていません。
特殊文字を複数使ってしまうと、文字化けの原因になる可能性があります。
また、以下のように複数使用してしまうと空白文字がいくつ含まれているのかわからないため、スマホ画面になった時に変な改行が発生してしまうこともあります。
<p>特殊文字を複数使って                   空白文字                   を作っています。</p>上記では、「空白文字」の両サイドに同じ広さの空白を作りたい場合を想定しています。
特殊文字は、あくまでHTMLの文章を読みやすくする目的などに使用するものです。
ただ空白を作るレイアウト目的だけに使ってしまうと、レスポンシブデザインで調整が大変になります
レイアウト用の空白はCSSでスタイリングして、文章の意味がわかるように空白を使う時に特殊文字を使いましょう。
まとめ：HTMLの特殊文字で空白を作って文章を読みやすく整えよう！
今回は、HTMLの文章中に空白を作る特殊文字について解説しました。
以下は、この記事のまとめです。
- 特殊文字は、文字と文字や行頭に空白を作るのに使う
- 空白を作る4つの特殊文字は、広さだけでなく意味も理解して使うことが大切
- 特殊文字の複数使用は非推奨！空白レイアウトにはCSSを使おう
HTMLで空白を作り出すことは、文章を見やすくするために必要な技術です。
様々な方法がある中で、どれが推奨・非推奨なのかを把握し、それぞれのメリット・デメリットも理解した上で適切に使うことが大切です。
面倒だからと言って全角スペースを使わず、推奨されているCSSでのスタイリングや特殊文字を使って、ブラウザにもユーザーにも親切な空白文字を使いこなしましょう！
