"CSS Tips Factory" : Presented by Nishishi via WordPress.

字下げ(インデント)する [テキスト]

あまりウェブ上では一般的ではないのだけど、書籍や雑誌などの文章では「字下げ」(インデント)がよく使われてます。
ウェブ上でも、段落の先頭を字下げする(インデントを加える)ことは可能です。
例えば、以下のように記述すると、段落の先頭に1文字分の空白ができ、字下げ効果ができます。

p {
   text-indent: 1em;
}

このスタイルを実際に使ってみると以下のような感じで表示されます。

この段落の先頭には、1文字分の字下げが行われている(インデントされている)ハズです。全角の空白文字を使ってしまうと、後々インデントをやめたくなったときに修正が大変です。text-indentプロパティを使っていれば、スタイルシートを修正するだけでインデントをなくしたり、もしくはインデント量を変更したりできます。

日本語文だと、字下げは「1文字分」が基本です。
英文の場合は、もっと6~8文字分とか空けたりするらしいですね。
そういう場合は、6emとか8emとか、もっと大きな値を指定すれば良いでしょう。

p {
   text-indent: 6em;
}

ウェブ上の文章では字下げしないのが一般的だと思うので、あんまりこの装飾は必要ではないと思いますけどね。

まあ、印刷専用スタイルシートにこの装飾を加えておくとか、そういうのはアリかも知れません。

@media print {
   p {
      text-indent: 1em;
   }
}

とか書くと、印刷時にだけ有効なスタイルになります。
(※印刷専用のCSSファイルを用意する方が、ソースの視認性は向上すると思います。)

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。