【CSS】テキストをインデントする方法

こんにちは朱夏です。

今回は、CSSでテキストのインデントをする方法を調べてみました。
ココを見に来た方なら解ってるとは思いますが、インデントとは「字下げ」の事です。
字下げをすると、テキストの行の書き始めが一段右にずれます。
以下の様な感じになります。

この行はインデントで字下げされています。

CSSは割と学習が進んでいたつもりだったのですが、インデントの方法についてはいままで知りませんでした。

今回の学習で使える様になりたいと思います。
それではいってみましょう。

CSSのインデントの書き方

インデントなこんな感じで書きます。

text-indentを使うと、インデントを使えます。
指定した値によって、字下げの幅などを指定する事が出来ます。
今回は、10px字下げしてみました。

値に指定できる内容は、字下げ幅の指定以外に以下の様なものがあります。

• each-line：指定要素内で改行後の内容も字下げをする
• hanging：字下げの適用行が反転する

字下げの幅だけ指定された状態では、要素内の最初の一行のみ字下げされた状態で表示されます。
<br>などで改行した後のテキストはインデントされていない状態で表示されます。

each-lineやhangingは、改行後のテキストにもインデントを適用させたい時等に使える便利な機能です。
しかし、まだ対応していないブラウザが多いみたいで、Chromeでは反映されませんでした。

実行サンプル

インデントを使った実行サンプルはこちらになります。

See the Pen
NWGQxRB by 朱夏 (@syunatsu1)
on CodePen.

サンプルでは、インデントを適用した要素の1行目である、「皆さんこんにちは。」だけ字下げされた状態になっていると思います。

因みに、画面横幅の文字数で折り返しが発生した場合、折り返されたテキストにはインデントが適用されていませんでした。

あとがき

というわけで、CSSのインデントについて調べてみました。
学習した感想としては、あまり使い勝手が良いものではないのかなーと感じました。

指定できる値についても、対応していないブラウザが多かったりするので、あまり有用なプロパティではないのかも知れません。

今回は以上です。
次回もよろしくお願いします。