スタッフブログStaffblog

こんにちは。ちゃむこです。

今日は「最近知ったcss〜text-indent〜」について共有しようと思います。

このtext-indentはその名の通り、インデント（字下げ）をしてくれるcssです！

私はこの存在を知らず空白で文章を整えていたところ、代表さんが教えてくれました！

cssはインデントもできるのですね…すごいです…！

text-indentの使い方は簡単です。

text-indent: 1em;で一文字分字下げしてくれます。

また、 text-indent: -1em; と「-」をつければ2行目から字下げしてくれます。

ただし！2行目からの字下げは padding-left: 1em; も必要です！

padding-leftをつけることによって、全体を一文字分移動させ、そこから一文字分マイナスすることで2行目から字下げできるようです！

2行目からの字下げはpadding-leftを忘れないようにしないとですね！

よければ参考にしてみてください。