当サイトではアフィリエイトプログラムを利用して商品を紹介しています。

htmlの改行とは違う空白のタグについて調べました

スポンサーリンク
実際に役立ったWEB知識
出典:Unsplash
スポンサーリンク

HTMLで改行を行うには、主に「brタグ」を使用します。brタグは、テキストの行を改行するだけのタグであり、改行以外の効果はありません。
一方で、HTMLには、改行とは異なる効果を持つ「空白」を挿入するためのタグがいくつかあります。

[KAZUの簡単なプロフィール]

性別:男性
年齢:40代
家族:既婚(子2人)
肩書:アドセンス40回以上審査落ちから合格を成し遂げた者。
仕事:会社員(ECサイト運営管理)
趣味:オンラインゲーム(FORTNITE、Apex Legends)
勉強中:chatGPTなどAIの活用方法について日々奮闘中
スポンサーリンク

HTMLで空白を挿入するためのタグ

・ (ノンブレークスペース):改行をしない空白を挿入する
・ (エンメトリスペース):改行をしない、emスペースの空白を挿入する
・ (シンスペース):改行をしない、thinスペースの空白を挿入する
・ (エンスペース):改行をしない、enスペースの空白を挿入する

スポンサーリンク

記述例

 (ノンブレークスペース)

 は、改行をしない空白を挿入するタグです。日本語では半角スペース1つ分の空白になります。
例えば、以下のように記述すると、改行をせずに2つの単語を並べることができます。

<p>これは 空白です。</p>
※タグはあえて全角にしています。実際に使用する時は半角にして使用してください。

 (エンメトリスペース)

 は、改行をしない、emスペースの空白を挿入するタグです。emスペースは、通常の半角スペースよりも少し広い空白です。
例えば、以下のように記述すると、改行をせずに少し広めの空白を挿入することができます。

<p>これは 空白です。</p>
※タグはあえて全角にしています。実際に使用する時は半角にして使用してください。

 (シンスペース)

 は、改行をしない、thinスペースの空白を挿入するタグです。thinスペースは、emスペースよりもさらに広い空白です。
例えば、以下のように記述すると、改行をせずにさらに広めの空白を挿入することができます。

<p>これは 空白です。</p>
※タグはあえて全角にしています。実際に使用する時は半角にして使用してください。

 (エンスペース)

 は、改行をしない、enスペースの空白を挿入するタグです。enスペースは、通常の半角スペースよりも少し狭い空白です。
例えば、以下のように記述すると、改行をせずに少し狭めの空白を挿入することができます。

<p>これは 空白です。</p>
※タグはあえて全角にしています。実際に使用する時は半角にして使用してください。

スポンサーリンク

まとめ

HTMLで空白を挿入するには、「brタグ」や「スペースキー」ではなく、 などのタグを使用すると良いです。brタグは改行のみの効果があるため、空白の幅を調整したい場合は、これらのタグを使用すると便利です。

タイトルとURLをコピーしました