【CSS】2行目以降を1文字下げる［text-indent］の使い方。

箇条書きや注意書きの文章を書く場合に、文章の先頭に「・」や「※」などの記号を記述することがよくあると思います。
しかし、2行目以降がその記号の下に回り込んでしまうことが気になっている方も多いのではないでしょうか。

手作業で地道に改行を入れたり、記号を画像で背景設定したり、あるいは強制的にリスト化してマークをつけたりと、あの手この手で誤摩化しているケースはよくあります。

でも「やっぱりテキストで綺麗に表示させたい！」というときに、以下の方法が最適です。

まずはサンプルをご覧ください。

※text-indentプロパティの便利な使い方。：サンプルページ

どうでしょう？
見事なまでに文章の先頭が綺麗に揃っていますね。
設定の仕方は以下の通りです。

HTML

HTMLでの記述。

	<p class="indent-1">※text-indentプロパティの便利な使い方。<br>
	文章の段落などの2行目以降を1文字下げて空白を挿入する方法です。<br>
	この文章では［text-indent］による装飾を施しています。<br>
	サンプルです。</p>

CSSでの記述。

	p.indent-1 {
		padding-left:1em;
		text-indent:-1em;
	}

CSSでの設定はわずか2行です！

emは1文字分の大きさを表す単位です。
padding-leftで、まずは左側に1文字分の余白を作り、続くtext-indentで「-1em」として、最初の行だけその余白分のスペースに文字を移動させることで実現しています。

なかなか賢いテクニックでしょう？

以下、HTML+CSSの学習にオススメです