自分でするSEO対策・検索エンジン最適化対策！

スタイルシートの技

段落の最初にインデントを1文字分付ける

良く見かけるのは全角スペース（半角スペース[ ]）で段落の最初を空けている… というものですが、 毎回全角スペースや「 」で空けるといった作業よりも、 これをスタイルシートですべて指定して、段落があれば最初に一定スペースを空けた手法が便利なので紹介します。 小説系のサイトや文書メインのサイト様に対しては非常に効果的です。

まず「p」要素については良く見かけると思います。 これは「paragraph」の意味です。「<p>...</p>」で括るとその部分は １行分空ける事ができます！とか書いてある本やサイト様をみかけるのですが、 それはある意味レイアウト的には間違いではないのですが、 真の意味では正しくはありません。よく本などでも段落の最初には1文字分空白が空いていて、 その部分が段落になる… という事を「形式段落」というような言葉で小学生の時に習ったはずです。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>インターネット</title>
   <style type="text/css">
      p
      {
         text-indent: 1em;
      }
   </style>
</head>
<body>
   <h1>インターネット</h1>
   <p>インターネットにホームページを
   公開するだけでは誰も見てくれない。
   それは、ある意味当然と言えば当然なのだが、
   特に初心者に多く見受けられるのが「せっかく
   ホームページを作ったのに見てくれる人が少ないんですよ。
   やはり、もっとキレイなページを作らないとだめでしょうか？」
   と言う質問をする人だ。</p>
</body>
</html>
インターネットにホームページを公開するだけでは誰も見てくれない。 それは、ある意味当然と言えば当然なのだが、特に初心者に多く見受けられるのが「せっかくホームページを作ったのに見てくれる人が少ないんですよ。やはり、もっとキレイなページを作らないとだめでしょうか？」と言う質問をする人だ。

こうすればp要素で割り当てた部分の最初に余白を空ける事ができます。ちょうど1文字分の余白があくと思ってください。 「em」は「m」1文字の横幅と言いましたが、実際にどのくらい余白が最初に空けられているかを見てみましょう。

0.5em
インターネットにホームページを公開するだけでは誰も見てくれない。 それは、ある意味当然と言えば当然なのだが、特に初心者に多く見受けられるのが「せっかくホームページを作ったのに見てくれる人が少ないんですよ。やはり、もっとキレイなページを作らないとだめでしょうか？」と言う質問をする人だ。
2.0em
インターネットにホームページを公開するだけでは誰も見てくれない。 それは、ある意味当然と言えば当然なのだが、特に初心者に多く見受けられるのが「せっかくホームページを作ったのに見てくれる人が少ないんですよ。やはり、もっとキレイなページを作らないとだめでしょうか？」と言う質問をする人だ。

このようになります。「Internet Explorer」では日本語がちょうど、半文字分、1文字分、1文字半分、2文字分程度で 綺麗に段落の最初だけに空白が付いていますね。別に「p」に限らずに「blockquote」でも、「div」内でも同様に利用できます。 「blockquote」でインデント変わりにするのはよくありません。「blockquote」はあくまでも「引用文」の意味で、 たまたま表示上インデントされているようになっているだけです。文書構造と見栄えを混同しないようにしましょう。