HTMLでスペースを挿入する方法｜ ・ ・ ・ の違いと使い分け
HTMLでは、テキストに空白（スペース）を入れたい場面がよくあります。しかし、キーボードのスペースキーを何度押しても、HTMLは連続する半角スペースを自動的に1つにまとめて表示してしまうため、意図した通りの余白を作るのは簡単ではありません。複数のスペースやタブのような幅を持つ空白が必要なときに活躍するのが、HTMLエンティティ（文字実体参照）です。この記事では、さまざまなサイズのスペースを実現できるHTMLエンティティの種類と、それぞれの使い方を詳しく解説します。
HTMLで使える4種類のスペース
HTML要素内で主に使用されるスペースには、以下の4種類があります。
-   … 細いスペース（シンスペース）。通常の半角スペースより狭い幅です。
- … 改行されないスペース（ノーブレークスペース）。通常の半角スペースとほぼ同じ幅です。
-   … enサイズのスペース。フォントサイズの半分（約半角2文字分）の幅です。
-   … emサイズのスペース。フォントサイズと同じ幅（全角スペース相当）です。
次のコード例では、背景色を付けたspan要素を使って、4種類のスペースの幅の違いを視覚的に確認できます。
<!DOCTYPE html>
<!--
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
span {
background: pink;
}
<style>
body {
font-family: Arial
}
</style>
</head>
<body style="font-family:Arial;">
<h1>Differences in Sizes of Space Entities in HTML</h1>
<!-- At beginning of sentences -->
<p style="font-size:16px;text-decoration:underline;font-weight:bold;"> Beginning of Sentences</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<!-- in between words -->
<p style="font-size:16px;text-decoration:underline;font-weight:bold;"> In Between Words</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
</body>
</html>
通常のスペースとの違い： と emsp;の実践的な使い方
それぞれのスペースには、適した用途が異なります。次のコード例では、スペースキーで入力した通常の半角スペースと、HTMLエンティティを使った場合の表示の違いを比較しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
<body style="font-family:Arial;">
<div>
<strong>Using nbsp; example</strong>
<br/>
<br/>
<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Dr. John Doe</div>
<div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Dr. John Doe</div>
<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Reno, NV</div>
<div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Reno, NV</div>
</div>
<div>
<strong>Using emsp; example</strong>
<br/>
<br/>
<div style="border:1px solid red;margin:10px;">
<p>Here are some quotes.</p>
<p> <em> —To be or not to be, that is the question...</em></p>
<p> <em> —This above all: to thine own self be true...</em></p>
<p> <em> —What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
</div>
<div style="border: 1px solid red;margin:10px;">
<p>Here are some quotes.</p>
<p> <em> —To be or not to be, that is the question...</em></p>
<p> <em> —This above all: to thine own self be true...</em></p>
<p> <em> —What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
</div>
</div>
</body>
（ノーブレークスペース）を使うべきケース
「Dr. John Doe」のような敬称付きの名前や「Reno, NV」のような地名など、途中で改行されたくない語句や数値がある場合は、単語間を でつなぎましょう。こうすることで、画面幅が変わってもそれらの語句が同じ行にまとまって表示されます。
 （emスペース）を使うべきケース
引用文のように、独立した行や段落として強調したいテキストブロックの先頭には、 を使うと効果的です。コード例のように、引用の冒頭に全角相当の余白を入れることで、本文との区別がつきやすくなります。
各スペースのコード一覧
下の表は、各サイズのスペースで使用できるコード（エンティティ名・10進数・16進数）をまとめたものです。
表に記載されているどのコードも、対応するスペースとして機能します。エンティティ名（Entity Name）は主要なブラウザで広くサポートされていますが、万が一表示されない環境では、10進数（Dec）や16進数（Hex）のコードを使用すれば確実に表示できます。
-
HTMLリストの種類を解説！ul・ol・dlの違いと使い分け方
HTMLリストの3つの種類 HTMLには、用途に応じて使い分けられる3種類のリストがあります。 順序なしリスト <ul> 箇条書き形式のリストです。項目同士に特定の順序関係がなく、デフォルトでは黒丸（ビュレット）が先頭に表示されます。 順序付きリスト <ol> 番号付きのリストです。手順やランキングなど、項目に順序がある場合に使用します。 定義リスト <dl> 用語とその定義（説明文）をセットで表示するためのリストです。用語は<dt>タグ、説明は<dd>タグで記述します。 これらのリストは互いに入れ子（ネスト）にできるほか、CS
-
HTMLで要素の幅を設定する方法【width属性の使い方を解説】
HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動