CSSでインデント幅を調整する方法

文字の位置（インデント幅）を調整する方法

文字の1行目の位置（インデント幅）を調整するには、プロパティにtext-indentを指定します。

.indent {
text-indent:指定する値;
}

text-indentを使うことにより、1行目の文字位置を調整することができます。

例えば、下の文書のインデント幅を調整すると…。

[インデント調整前]

むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。

[インデント調整後]

このような感じになります。

1行目の位置が変わりましたね！
例えば、ホームページに小説や論文などを掲載する場合に使用すると、読みやすい文書にすることができます。
ちなみに上のサンプルは、25pxで指定しています。

HTMLとCSSの記述方法

インデント幅を調整するには、text-indentに値を指定します。

[CSSの記述例]

.indent {
text-indent:25px;
}

指定する単位は、px以外の単位を使用してもOKです。（em、exなど）
なお、マイナスの値をつけることも可能です。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>インデント幅の調整</title>

</head>

<body>

<p class="indent">むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。</p>

</body>
</html>

[表示サンプル]

長い文書など書く場合、適切にインデントを調整すると読みやすくなります。必要に応じて使ってみましょう。