CSSで段落テキストをインデントする方法|text-indentとmargin-leftの使い方

HTML要素内のテキストをインデントしたいと思ったことはありませんか?CSSを使えば、段落の最初の行だけを簡単にインデントできます。

この記事では、具体的なやり方をわかりやすく解説します。

text-indentで段落の1行目をインデントする

例えば、次のようなHTMLの段落があるとします。

<p class="indent">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequuntur cum corporis illum natus quibusdam quasi ab at. Laboriosam aperiam aut laborum animi soluta eligendi iste doloribus error, ex eius magnam? Aperiam illum nam cupiditate omnis. Repudiandae doloribus voluptatibus, animi quas incidunt eveniet fugiat!
</p>

CSSのtext-indentプロパティを指定すれば、1行目だけを好きな長さ分インデントできます。

p.indent {
    text-indent: 30px;
}

ブラウザでの表示は以下のようになります。

text-indentは、他のCSSの長さを扱うプロパティと同様に、さまざまな単位を指定できます。px(ピクセル)やem、remはもちろん、パーセント(%)も使用可能です。

パーセントのような相対単位を使うと、Webページの幅に応じてインデント量が自動的に変化します。ページ幅が広いほど、インデントも大きくなります。

さらに、負の値を指定することもできます。これにより、1行目だけを左側に突き出す「ぶら下げインデント」のようなデザインも実現できます。

p.indent {
    text-indent: -30px;
}

負の値を指定した場合の表示イメージはこちらです。

段落全体を右にずらしたい場合はmargin-leftを使う

1行目ではなく、段落全体をまとめて右に移動させたい場合は、margin-leftプロパティを使用しましょう。

p.shifted {
    margin-left: 30px;
}

実際の表示は以下のとおりです。上の段落はそのまま、下の段落だけが右にずれています。

まとめ

• 段落の1行目だけをインデントする場合は、text-indentを使う
• 段落全体を右にずらす場合は、margin-leftを使う
• どちらのプロパティもpx・em・rem・%などの単位が利用可能