にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

各段落の先頭を自動で字下げ(インデント)表示するCSS [テキスト]

段落の先頭に字下げ(インデント)を加えたい場合、HTMLソース中に空白文字を入れる方法では修正したくなった際に非常に面倒です。そこはCSS(スタイルシート)を使って自動で字下げ(インデント)が挿入されるように書けば楽です。text-indentプロパティを使って、段落の先頭に1文字分の空白を自動挿入させる方法を紹介。

各段落の先頭を自動で字下げ(インデント)表示するCSSの書き方

あまりウェブ上では一般的ではない気がしますが、書籍や雑誌などの文章では段落の先頭で「字下げ」(インデント)がよく使われてます。段落の先頭に1文字分の空白を挿入する掲載スタイルです。

字下げする目的で「全角の空白文字」をHTMLソース内に記述してしまうと、後から字下げを修正したい際(取り除きたい際など)に面倒です。スタイルシートには「字下げ」を実現するプロパティ「text-indent」がありますから、ウェブ上に掲載する文章で(段落の先頭などで)字下げしたい(=インデントを加えたい)場合は、スタイルシートを使う方が望ましいでしょう。

例えば、以下のようにCSSソースを記述すると、段落(p要素)の先頭に1文字分の空白ができ、字下げ効果が実現できます。

CSSソース

p {
   text-indent: 1em;
}

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

今読んでいるこの段落の先頭には、1文字分の字下げが行われている(=インデントされている)ハズです。一見すると全角の空白文字が挿入されているように見えますが、HTMLソース内に空白文字はありません。スタイルシートによって1文字分のスペースが挿入されています。

全角の空白文字をHTMLソース内に直接記述してしまうと、後々インデントをやめたくなったときに修正が大変です。このようにtext-indentプロパティを使っていれば、インデントをなくしたり、もしくはインデント量を変更したりしたい場合でも、スタイルシートを修正するだけで実現できます。

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

CSSソース

p {
   text-indent: 6em;
}

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

ちなみに、text-indentプロパティの値にはマイナスの値を指定することもできます。段落の先頭だけを直前の部分に食い込ませたいといった特殊なデザインを作る際には使えそうな気がします。(ちょっとすぐには例えが思いつきませんが。^^;)

印刷時にだけ自動で字下げされるようにするCSSの書き方

印刷専用スタイルシート(=印刷時のみに適用されるスタイルシート)にこの装飾を加えておくとか、そういう用途もあるかも知れません。

CSSソース

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

上記のように「@media print」と書いてから中括弧内にCSSソースを記述すると、その範囲のスタイルは印刷したときにだけ適用されるようになります(画面表示には適用されません)。つまり、上記のCSSソースでは、印刷時にだけp要素に対して字下げが行われます。

というわけで、「字下げ」をするにはtext-indentプロパティが使えますよ、という話でした。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---