[CSS]文頭を字下げしたり2行目以降の行頭1文字分インデントさせるCSS の書き方

CSS

2014.02.11

CSSのtext-indentプロパティを使って文頭を常に1文字下げる方法と、2行目以降の行頭を1文字分インデントする方法をまとめました。

list-style-positionで同じような見せ方が可能なのですが、リストではなくp タグで囲まれた文章をインデントさせる際に便利な表現ではないかと思います。

文頭を1文字分インデント
2行目以降の文章を、行頭1文字分インデント

文頭を1文字分インデント

例えば、pタグで囲まれた文章の先頭1文字を字下げする場合、CSS はこのような書き方になります。

p	{
	text-indent : 1em
}

p {

text-indent : 1em

}

↓このように、強制的に文頭を1文字分字下げします。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

2行目以降の文章を、行頭1文字分インデント

先の例とは逆に、2行目以降の文章を行頭1文字分だけインデントするCSSの記述例です。

p	{
	text-indent : -1em
	padding-left : 1em
}

p {

text-indent : -1em

padding-left : 1em

}

↓このように、文頭に※などの印を付けた文章で、改行された2行目以降の行頭を1文字下げます。

※あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

★またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。