text-indentとmarginで二行目以降の字下げをする方法
- 投稿日:2021/10/11 |最終更新:2021/10/16
- CSS
- text-indent, padding
text-indent
は字下げをするプロパティですが、一行目は字下げをせず、2行目以降で字下げをする時は、margin
と併用するとよいです。text-indent
とmargin
の設定値としては、「em
」という単位で指定します。
「em
」は、文字の高さを基準とした単位です。
たとえば「1em
」は1字分という設定になります。
2行目で1文字分字下げする
表示サンプル
※吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
CSS記述例
.indent_1{text-indent: -1em; margin-left:1em;}
2行目で2文字分字下げする
表示サンプル
例)吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
CSS記述例
.indent_2{text-indent: -2em; margin-left:2em;}
2行目で3文字分字下げする
表示サンプル
※1 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
CSS記述例
.indent_3{text-indent: -3em; margin-left:3em;}
2行目で4文字分字下げする
表示サンプル
例題1)吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
CSS記述例
.indent_4{text-indent: -4em; margin-left:4em;}
2行目で5文字分字下げする
表示サンプル
サンプル:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
CSS記述例
.indent_5{text-indent: -5em; margin-left:5em;}