《2007/4/23 月曜日 21:14:26 公開》
字下げ(インデント)する [テキスト]
あまりウェブ上では一般的ではないのだけど、書籍や雑誌などの文章では「字下げ」(インデント)がよく使われてます。
ウェブ上でも、段落の先頭を字下げする(インデントを加える)ことは可能です。
例えば、以下のように記述すると、段落の先頭に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は以下の通りです。
※言及リンクがないトラックバックは拒否されますのでご注意下さい。
コメントはまだありません。