htmlでインデントするCSSの作成

htmlでインデントで文字下げする場合はCSSの「text-indent」を使用します。
インデントの値を大きくすると文字下げも大きくなり1文字分や2文字分などの指定が可能です。また、インデントの値をマイナスにすることで、2行目以降を文字下げすることもできます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

2種類の文書をサンプルとしています。前半は「1文字送り」すると見やすくなる文書で、後半は「マイナス（2行目以降を文字送り）」した方が見やすくなる文書です。

<br>タグで改行した場合はインデント対象とはなりません。

<div class="str" id="makeImg">
  <p>インデントを指定するには、CSSの「text-indent」を使用します。一般的に&lt;p&gt;タグなどに指定して利用します。</p>
  <p>注意！<br>&lt;br&gt;タグは強制的に改行を行う機能であり、文書のまとまりを表すタグでないので、インデントの対象とはなりません。</p>
</div>

<style type="text/css">
 /*--- サンプル表示の枠 ---------------------------- */
.str {
  max-width       : 400px;
  background      : #fff;
  border          : 1px solid #999;
  padding         : 0;
  margin          : 0 auto;
  font-weight     : normal;
  text-align      :left;
  word-break      : break-all;
  word-wrap       : break-word;
  font-size       : 12pt;
  letter-spacing  : .1em;         /* 文字間隔         */
  line-height     : 1.3;          /* 行間隔（1行高さ）*/
}
 
 /* --- インデントの指定 ---------------------------- */
.str p {
  text-indent     : 1em;         /* インデントの指定 */
}
</style>