HOME内部対策 > HTMLで半角・全角スペース(空白文字[ 等])を活用するための豆知識

HTMLで半角・全角スペース(空白文字[ 等])を活用するための豆知識

2017/04/05内部対策[最終更新日]:2017/04/05
このエントリーをはてなブックマークに追加

HTMLで半角・全角スペース(空白文字[ など])を活用しながら、サイト構築する方法があります。

今回は、HTMLで空白行を挿入(改行スペース)、HTMLの全角スペースの問題、HTMLの半角スペースの連続、HTMLで空白(スペース)を空ける・開ける・入れるについて中心に解説したいと思います。

HTMLで半角・全角スペース(空白文字[ 等])を活用するための豆知識

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR

HTMLで空白行を挿入(改行スペース)

HTMLで空白行を挿入(改行スペース)するには、「BRタグ」か「CSSのmargin/padding」を使って表現することが可能です。

BRタグ

BRタグで改行することで、空白行が挿入されます。

HTMLマークアップ例:
<p>ホームページで上位化を目指すにはSEO対策が必要です。</p>
<br>
<p>SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。</p>

CSSのプロパティ「margin/padding」

CSSのプロパティ「margin」もしくは「padding」で上下に余白スペースを指定し、HTMLで空白行を表現することが可能です。

HTMLマークアップ例:
<p style=”margin-top:10px;”>ホームページで上位化を目指すにはSEO対策が必要です。</p>
<p style=”padding-top:10px;”>ホームページで上位化を目指すにはSEO対策が必要です。</p>

marginプロパティで上下の余白スペースを表現するには、「margin-top」「margin-bottom」を使います。
paddingプロパティで上下の余白スペースを表現するには、「padding-top」「padding-bottom」を使います。

「margin:10px 0 0;/*上の余白 左右余白 下の余白*/」のように指定することもできます。
テキストだけでなく、画像「imgタグ」にも余白スペースが指定てきます。

HTMLの全角スペースの問題

HTMLの全角スペースの問題として浮き上がるのが、HTMLで全角スペースを使用した際に、ブラウザによって表示のされ方が異なる問題です。
※参考:ウェブブラウザの半角/全角スペース問題。

例えば、widthで横幅指定したコンテンツに全角スペースを複数入れると、10個目や11個目のスペースで折り返されたりと、ブラウザごとに異なった表示が発生します。
また、末尾に全角スペースを入れた場合も、IEブラウザのみで異なる表示が発生するようです。

このような問題は、CSSの「margin/padding」プロパティを活用し、スペース(余白空白)を処理することで解消できるでしょう。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLの半角スペースの連続(複数)

HTMLの半角スペースの連続(複数)させるには、以下のよう文字実体参照「 」を利用します。

HTMLマークアップ例:
<p>ホームページで     上位化を目指すにはSEO対策が必要です。</p>

全角スぺースは、スペースキーを打ち込んだ分だけそのまま空白表示されますが、半角スペースの場合、打ち込んだ分だけ表示されないため文字実体参照「 」を利用して空白を表示します。

HTMLで空白(スペース)を空ける・開ける・入れる

HTMLで空白(スペース)を空けるには、以下のような方法があります。

全角スペースの場合

スペースキーで空白を空けることで、打ち込んだ分そのままブラウザに反映されて表示される。

HTMLマークアップ例:
<p>ホームページで     上位化を目指すにはSEO対策が必要です。</p>

半角スペースの場合

スペースキーで打ち込んでも無視されるので、文字実体参照「 」をマークアップして空白を表示する。

HTMLマークアップ例:
<p>ホームページで     上位化を目指すにはSEO対策が必要です。</p>

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLで半角・全角スペース(空白文字)の文字実体参照[特殊文字・記号・文字コード]

HTMLで半角・全角スペース(空白文字)の文字実体参照[特殊文字・記号・文字コード]には、以下のようなものがあります。
※参考:  は半角スペースではないというお話

  ⇒ 無視・改行されない空白(スペースキーの半角スペースと同じ広さ)
  ⇒ 「 」より少し広い空白スペース
  ⇒ 「 」より広い空白スペース
  ⇒ 「 」より狭い空白スペース

HTMLの特殊文字コード「 」で空白を表示する

HTMLの特殊文字コード「 」で空白を表示するには、以下のようになります。
先述した「HTMLの半角スペースの連続(複数)」でも解説してますので、ご参考ください。

HTMLマークアップ例:
<p>ホームページで 上位化を目指すには SEO対策が必要 です。</p>

HTMLの特殊文字コード「 」は、文字実体参照であり、一般的に半角スペースの表示に使われることが多いです。
スペースキーを使った半角スペースは、無視されたり、打ち込んだ分表示されないため、文字実体参照「 」で空白表示します。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLで空白行を挿入(改行スペース)して高さを調整する

HTMLで空白行を挿入(改行スペース)して高さを調整するには、「BRタグ」もしくは「CSSのmargin/padding」を活用します。
HTMLで空白行を挿入(改行スペース)」でも一部先述してますので、ご参考ください。

BRタグ

BRタグで改行することで、空白行が挿入され、改行の数に応じて高さを調整することができます。

HTMLマークアップ例:
<p>ホームページで上位化を目指すにはSEO対策が必要です。</p>
<br>
<br>
<br>
<p>SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。</p>

BRタグで行間・高さ調整」でも触れてますので、合わせてご参考ください。

CSSのプロパティ「margin/padding」

CSSのプロパティ「margin」もしくは「padding」で上下に余白スペースを指定し、空白行を表現することで、高さの調整が可能です。

HTMLマークアップ例:
<p style=”margin-top:10px;padding-bottom:10px;”>ホームページで上位化を目指すにはSEO対策が必要です。</p>

marginプロパティで上下に空白行を表現して高さ調整するには、「margin-top」「margin-bottom」を使います。
paddingプロパティで上下に空白行を表現して高さ調整するには、「padding-top」「padding-bottom」を使います。

「margin:10px 0 0;/*上の余白 左右余白 下の余白*/」のように指定することもできます。
テキストだけでなく、画像「imgタグ」でも上下に空白行を表現して高さ調整が指定できます。

HTMLで空白(スペース)の幅を調整する

HTMLで空白(スペース)の幅を調整するには、以下のような方法があります。

スペースキーを使う

全角文字に限定されますが、スペースキーを打ち込んで、HTMLで空白(スペース)幅を調整する。

HTMLマークアップ例:
<p>ホームページで      上位化を目指すにはSEO対策が必要です。</p>

スペースキーで全角スペース6回打ち込むとこのくらいの幅に調整できます。

文字実体参照を使う

文字実体参照の「 」「 」「 」「 」で半角スペースなどを表現し、HTMLで空白(スペース)の幅を調整する。

HTMLマークアップ例:
<p>ホームページで    上位化を目指すにはSEO対策が必要です。</p>

文字実体参照の「 」を4回マークアップすると、スペースキーで半角スペース4回打ち込んだ幅に調整できます。

先述しましたが、スペースキーで半角スペースを使うと、無視されたり、打ち込んだ分反映されないため、文字実体参照の「 」を活用します。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLで空白(スペース)を詰める・削除する

HTMLで空白(スペース)を詰める・削除するには、以下のような方法があります。

「margin/padding」を使う

CSSのプロパティのmargin/paddingで0値を指定し、空白(スペース)を詰める・削除する。

HTMLマークアップ例:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>SEOラボ</title>
</head>
<body>
<p>ホームページで上位化を目指すにはSEO対策が必要です。</p>
</body>
</html>
CSS記述例:
body {
margin: 0;
padding: 0;
}

bodyタグに、margin/paddingに0値をしてする方法はよく使われる手法です。
また、bodyタグ以外のHTMLタグでも、空白(スペース)を詰める・削除するときに「margin/paddingに0値指定」が有効なので、大いに活用しましょう。

まとめ

HTMLで半角・全角スペース(空白文字[ 等])を適切に使って、コンテンツを構築しましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly