インデントを使って美しく整えるCSSテクニック

CSSでのインデントの基本

通常、インデントは段落の最初の行を右にずらすことで視覚的な区切りを作るために使われます。CSSでは、text-indentプロパティを使用してインデントを設定できます。例えば、以下のように書きます。

CSS

p {
  text-indent: 2em;
}

このコードは、段落の最初の行を2em分インデントします。

text-indentに加えて、padding-leftプロパティを使用すると、さらに柔軟なインデントが可能になります。以下の例を見てみましょう。

CSS

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

この設定では、段落全体が1em右に移動しますが、最初の行は逆に1em左に移動します。結果として、段落の最初の行だけが左にインデントされたように見えます。これにより、段落全体の視覚的なバランスを保ちつつ、最初の行だけを強調することができます。

padding-leftとtext-indentを組み合わせることで、より洗練されたインデントスタイルを作成することができます。ぜひこのテクニックを使って、あなたのウェブデザインを一層魅力的にしてみてください。