<h1>CSSによるインデントの実装</h1>

<p class="paragraph">
  これは、text-indentプロパティを使用して1行目を字下げした例です。この段落の最初の行が1em分インデントされています。
</p>
<h2>サンプルコード1: 1行目の字下げ</h2>

<p class="paragraph">
  これは、text-indentプロパティを使用して1行目を字下げした例です。この段落の最初の行が1em分インデントされています。
</p>


<h2>サンプルコード2: 2行目以降の字下げ</h2>

<p class="hanging-indent">
  この段落では、padding-leftとtext-indentを組み合わせて2行目以降を字下げしています。この手法により、箇条書きやリスト項目のように見せることができます。
</p>


<h2>サンプルコード3: レスポンシブインデント</h2>

<p class="responsive-indent">
  この段落は、画面サイズに応じてインデントが変わります。通常時は2emのインデントが設定され、画面幅が600px以下になると1emに縮小されます。
</p>


<h2>サンプルコード4: ネガティブマージンによるインデント</h2>

<p class="outdented-element">
  この段落は、ネガティブマージンを使用して左側にはみ出させています。この技法は、特定の要素を本文よりも左側に配置したい場合に使用されます。
</p>