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

スタイルシートの匠技

段落全体のインデントを3文字分だけ下げる

先ほどの「段落の最初にインデントを1文字分付ける」の応用です。 応用と言っても同じようなものなのですが、今回の場合は段落全体に対してインデントを付ける方法です。 見出しに対して段落を記載する時にはある程度インデントしてある方が見やすくて良いです。

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

例文は先ほどと同じ「インターネット」を引用しました。 「text-indent」は領域内のテキストの字下げでしたね。 「padding-left: 3em;」を指定すると段落全体が3文字分インデントされている事が良く分かります。 「padding」については、「簡単なコンテンツボックスの作成と罫線の利用方法」にて詳しい解説を行いました。思い出せない人はもう一度ご覧下さい。

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

別に「blockquote」でインデントすればいいのでは？と思う方がいらっしゃるかも知れません。 「blockquote」でインデント変わりにするのはよくありません。「blockquote」はあくまでも「引用文」の意味で、 たまたま表示上インデントされているようになっているだけです。文書構造と見栄えを混同しないようにしましょう。