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

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

空白文字を挿入せずに、各段落の最初を字下げするCSSの書き方 [テキスト]

日本語の長い文章の場合、各段落の先頭には1文字分の空白を挿入する「字下げ」の規則があります。英文の場合だと8文字分くらいの空白(タブ)を入れるようですが、日本語の場合は1文字分ですね。

その「字下げ」を、実際に空白文字を打つことで実現するのは、あまりスマートではありません。
なぜなら、後から段落の構成を修正する際に、先頭の空白を取り除くのが面倒だったり忘れてしまったりしてしまう可能性がありますし、余計な空白文字の分だけデータサイズも増えてしまいますし。何より、「やっぱり先頭の字下げは取りやめたい」とか、「今まで字下げはしていなかったけど、字下げすることにしたい」という場合に、全段落の先頭に空白文字を挿入したり削除したりするのは非常に手間が掛かってしまいますから。

というわけで、各段落の先頭を字下げするなら、CSS(スタイルシート)を使って実現するのが非常に手軽です。

すべてのp要素の先頭に字下げ(1文字分の空白)を挿入するスタイルシート

例えば、以下のようにCSSソースを記述するだけで、すべてのp要素(=段落)の先頭に1文字分の空白を挿入できます。

p {
   text-indent: 1em;
}

上記のようにtext-indentプロパティを使えば、指定要素(上記の場合はp要素)の先頭に指定量の空白が挿入できます。
上記で指定している「1em」は「1文字分」の意味です。(正確には、「1文字の高さ」と同じ分量の空白)
使える単位は「em」に限らないので、以下のようにピクセル数で指定することもできます。

p {
   text-indent: 25px;
}

上記の場合なら、各段落の先頭に25ピクセルの空白が挿入されます。
このようにtext-indentプロパティを使って字下げを実現しておけば、後から「やっぱり字下げは取り消したい」という場合でも、CSSソースからtext-indentプロパティの値を「0」に書き換えるだけで済みます。
とても手軽です。

各段落の先頭に1.5文字分の空白を挿入した例

各段落の先頭に、1.5文字分の字下げ(空白を挿入)した場合の表示例を掲載しておきます。
HTMLとCSSソースは以下の通りです。

■CSSソース:

p {
   text-indent: 1.5em;
}

■HTMLソース:

<p>これは、スタイルシートを使った「字下げ」の表示例……</p>
<p>このように、スタイルシートの「text-indent」(テキ……</p>
<p>字下げをスタイルシートで記述していれば、字下げの……</p>
<p>もちろん、既存の「字下げしていない長文」に対して……</p>

■表示例:

これは、スタイルシートを使った「字下げ」の表示例です。各段落の先頭に、1.5文字分の空白が挿入されていることが見えるはずです。

このように、スタイルシートの「text-indent」(テキスト・インデント)プロパティを使うだけで、簡単にページ内の全段落に「字下げ」が適用できます。

字下げをスタイルシートで記述していれば、字下げの分量を変更したい場合や、字下げそのものを取りやめたい場合でも、CSSの値を書き換えるだけで済むので手軽です。

もちろん、既存の「字下げしていない長文」に対して、後から「字下げしたい」という場合でも、スタイルシートを使えば楽々です。

上記のHTMLソースには4つの段落(=4つのp要素)があります。それぞれ、先頭に1.5文字分ほど字下げ(=空白が挿入)されています。
もし、これらの「字下げ」を取り除きたい場合でも、CSSソースを1カ所修正するだけで済みます。
また、テキストを範囲選択した場合、段落の先頭にある「字下げ」分の空白は選択内容には含まれません。この点も便利かもしれません。

※ここでは「1.5文字分」といった中途半端な値でも指定可能だということを示すために、値に「1.5em」を指定しましたが、日本語文での使用なら実際には「1文字分」にしておく方が良いでしょう。

というわけで、長文などに対して各段落に字下げを加えたい場合には、直接空白文字を挿入するのではなく、CSSでtext-indentプロパティを使ってみて下さい。


()

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

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

著者紹介


にしし(西村文宏)

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

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

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

著書一覧と詳細

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

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

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