【CSS Modules】text-indentプロパティの使い方

text-indentプロパティは、HTML要素内のブロックレベルコンテンツ、特に段落の最初の行のインデント（字下げ）の量を保持するプロパティです。このプロパティを使用することで、テキストブロックの冒頭行を視覚的に調整し、文書の読みやすさやデザインの一貫性を向上させることができます。

設定できる値には、主に長さを示す単位とパーセンテージがあります。例えば、「10px」や「2em」といった具体的な長さを指定すると、その長さだけテキストが右に字下げされます。また、負の値を設定することも可能で、例えば「-20px」のように指定すると、最初の行が左に突き出す「ぶら下げインデント」のような効果を得られます。パーセンテージの値、例えば「5%」を指定した場合は、親要素のブロックの幅に対する割合でインデントが適用されます。

このプロパティは、新聞や雑誌の組版のように段落の開始を明確に示したり、特定のデザインスタイルを適用したりする際に活用されます。テキストコンテンツの視覚的な配置を細かく制御し、文書の構造をより効果的に読者に伝えるための重要なツールの一つです。より高度な表現としてhangingやeach-lineといったキーワードも存在しますが、基本的な使用法としては長さやパーセンテージによる指定が一般的です。

Copy
1p {
2  text-indent: 2em;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません