概要

text-indentは、CSSでテキストの最初の行にインデント（字下げ）を設定するためのプロパティです。このプロパティを使うことで、段落の最初の行だけを指定したサイズ分だけ内側にずらすことができます。文章の開始部分にインデントを設けることで、視覚的なアクセントを加え、読みやすさを向上させることができます。

基本的な使い方

text-indentプロパティは、テキストの最初の行に適用されるインデントの幅を指定します。この幅は、px、em、%などの単位で設定できます。

構文

.element {
  text-indent: 値;
}
  • 値
    インデントの幅を指定します。例えば、20px、2em、10%などで指定できます。

例

以下の例では、段落の最初の行に20pxのインデントを設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Indent Example</title>
<style>
  .indented {
    text-indent: 20px;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>
</head>
<body>
<p class="indented">
  これはtext-indentプロパティを使用した例です。最初の行だけが20pxインデントされています。このインデントは、文章の開始部分を強調するために役立ちます。
</p>
</body>
</html>

このコードでは、.indentedクラスが適用された段落に20pxのインデントが設定され、最初の行だけが内側にずれています。これにより、テキストの開始位置が視覚的に際立ちます。

text-indentの利点

  • 視覚的なアクセント: 段落の最初の行をずらすことで、文章の始まりを強調し、視覚的に整ったレイアウトを作成できます。
  • 読みやすさの向上: インデントを使用することで、文章の流れが視覚的に分かりやすくなり、読者の集中を促進します。
  • デザインの柔軟性: インデントのサイズや方向を調整することで、多様なデザインに対応可能です。

応用例

マイナス値を使った特殊なインデント

text-indentにはマイナス値も使用できます。これにより、最初の行を外側に引き出して、より個性的なデザイン効果を演出することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Negative Text Indent Example</title>
<style>
  .negative-indent {
    text-indent: -10px;
    border-left: 3px solid #007bff;
    padding-left: 10px;
  }
</style>
</head>
<body>
<p class="negative-indent">
  これはマイナスのtext-indentを使用した例です。最初の行が外側にずれており、特殊なデザイン効果を作り出しています。
</p>
</body>
</html>

この例では、text-indent: -10px;が設定されているため、最初の行が外側に10pxずれています。この効果を使用すると、引用文や特定の強調箇所など、視覚的に目立たせたいテキストに適用することができます。

パーセンテージを使ったレスポンシブなインデント

text-indentはパーセンテージで設定することもでき、コンテナの幅に応じてインデントが動的に変化します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Percentage Text Indent Example</title>
<style>
  .responsive-indent {
    text-indent: 5%;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>
</head>
<body>
<p class="responsive-indent">
  これはパーセンテージを使ったtext-indentの例です。コンテナの幅に応じてインデントの幅が変化するため、レスポンシブなデザインに適しています。
</p>
</body>
</html>

この例では、インデントがコンテナの幅の5%に設定されており、画面サイズに応じてインデントの幅が調整されます。これにより、デバイスに応じた一貫性のある見た目を維持することが可能です。

まとめ

text-indentは、テキストの最初の行にインデントを設定するためのシンプルで強力なプロパティです。文章の視覚的な区切りを明確にすることで、デザインの見栄えを向上させるだけでなく、読みやすさを大幅に改善します。さまざまな単位でインデントを設定できるため、レスポンシブデザインや独自のスタイルを容易に実現できます。

参照:

text-indent - MDN Web Docs