※や・などの付いた文章全体をインデント（字下げ）する方法

字下げして、整った文章を成形する

段落が何文字分か下げることを「インデント」といいます。
文章の先頭に「・」や「①」など、記号があるとき、その段落は全て先頭を1文字分インデントして先頭をそろえたいですよね。

この様に文章の読みやすさが各段に変わる事が見てわかります。
なので先頭に記号を置いた時、文章全体を一文字分インデントして文章を作成しましょう・・・とは言ってもHTML上では難しいですよね。
改行する度に次の行の先頭へ地道に全角でスペースを付ける！・・・という方法もありますが、検索ロボットをメインに考えた時、文章の間に意味のない空白が入ることになるので不自然です。
またレスポンシブWEBデザインで作成したページの場合、画面幅によって文章の折り返し位置が変わるので、スペースを入れてインデントするのは現実的ではありません・・・

CSSを使ってインデントする

改行位置が決まっている場合は地道にスペースを入れればなんとか再現できますが、改行位置が決まっていない場合、インデントする方法がわからなくなってしまいます。
そんな時はCSSを使って解決しましょう！！

どうでしょう？全体的に一文字分、インデントされて先頭が揃っています。
試しに見ている画面幅を変えてみてください。画面幅が変わっても、しっかりインデントが付いています。

CSSの解説

CSSではどのように書かれているのか気になりますよね？それでは実際にCSSを見てみましょう。

・・・・・たった2行で出来るんです！どうです？お手軽でしょう！
改行後の文頭が揃わないと困っていた事がウソのように解決できますよ！！

それでは続いて、具体的には何をしているのかを見ていきましょう。

CSSに書いた「text-indent」は、先頭の一行を字下げする時に使います。それをマイナス（-）にすることによって左へ動かし、次に「padding-left」で全体を右へ移動させています。
そして使われている記号「em」は一文字分という単位です。
これで記号の付いている先頭の一行だけを左へ一文字分動かし、全体を右へ動かすことで文章全体が一文字分インデントされて見えるデザインが作成できます！！
たった2行で出来るので、とてもお手軽です！！ぜひ使ってみてください。

ちなみに記号が全角文字ではなく半角文字の場合、「1em」という単位の部分が「0.5em」や「0.7em」といったように小数点の付いた数字に変化します。
「半角だから0.5emでいいだろう」と考えてはいけません。半角文字を使っていても、0.5emでは先頭が揃わないこともよくあります。実際に自分の目で見て、揃っていると思う数値を入力してください。

複数の段落を書く場合、都度「p要素」で段落付けを行う

先ほど説明した方法で使っている「text-indent」は、先頭の一行だけしか制御できません。
ひとつのp要素に改行で複数の段落を書きたいと思っても、先頭の1行しか左へ動かないので、思ったようなレイアウトにはならないので注意してください。
段落事にp要素を使ってマークアップするように心がけましょう。