《 09:59 公開/更新》
日本語の長い文章の場合、各段落の先頭には1文字分の空白を挿入する「字下げ」の規則があります。英文の場合だと8文字分くらいの空白(タブ)を入れるようですが、日本語の場合は1文字分ですね。
その「字下げ」を、実際に空白文字を打つことで実現するのは、あまりスマートではありません。
なぜなら、後から段落の構成を修正する際に、先頭の空白を取り除くのが面倒だったり忘れてしまったりしてしまう可能性がありますし、余計な空白文字の分だけデータサイズも増えてしまいますし。何より、「やっぱり先頭の字下げは取りやめたい」とか、「今まで字下げはしていなかったけど、字下げすることにしたい」という場合に、全段落の先頭に空白文字を挿入したり削除したりするのは非常に手間が掛かってしまいますから。
というわけで、各段落の先頭を字下げするなら、CSS(スタイルシート)を使って実現するのが非常に手軽です。
例えば、以下のように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文字分の字下げ(空白を挿入)した場合の表示例を掲載しておきます。
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プロパティを使ってみて下さい。
()
(前の記事) « 文字に陰を付けるCSSの書き方 (ぼかしたり複数の影を同時に指定したり)
前後のスタイルシート TIPS
< 旧 / 新 >
(次の記事) 大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定する方法 »
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)