> CSS > text-indentとmarginで二行目以降の字下げをする方法
text-indentとmarginで二行目以降の字下げをする方法

text-indentとmarginで二行目以降の字下げをする方法

text-indentは字下げをするプロパティですが、一行目は字下げをせず、2行目以降で字下げをする時は、marginと併用するとよいです。
text-indentmarginの設定値としては、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;}

この記事が気に入ったらシェアしてください

関連記事

コピペで使えるCSSだけでつくる矢印・三角形

コピペで使えるCSSだけでつくる矢印・三角形

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)