文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > インデント(文字下げ)

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

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

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

インデントを調整してみよう

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

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

インデント等の指定
インデント
文字間隔
行間隔

インデントを指定するには、CSSの「text-indent」を使用します。一般的に<p>タグなどに指定して利用します。

注意!
<br>タグは強制的に改行を行う機能であり、文書のまとまりを表すタグでないので、インデントの対象とはなりません。

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

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン