段落先頭1字下げなどのテキストインデント

text-indent_l

DTPではよく使われる「段落先頭1字下げ」など、テキストインデントのサンプルを紹介します。

HTML

<p class="sample1">段落先頭1字下げ。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p class="sample2">★段落先頭-1字下げ。いわゆるぶら下げインデント。頭に記号なんかを付けたい時に使う場合あり。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p class="sample3">段落先頭2字下げ。中国語圏ではこれがスタンダードのようです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p class="sample4">段落全体を3字下げ。まれにblockquoteの代わりに使うことがあるかも?ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>

CSS

.sample1 {
    text-indent: 1em;
}
.sample2 {
    text-indent: -1em;
    margin-left: 1em;
}
.sample3 {
    text-indent: 2em;
}
.sample4 {
    margin-left: 3em;
}

表示サンプル

サンプルhtml

テキストインデントのサンプル

基本的にはtext-indentプロパティでインデントの幅をem単位で調整しています。
簡単なので機会があれば使ってみてください。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする