【初心者向け】CSSを使ってインデント（字下げ）する方法

インデント（字下げ）とは？

「インデント（字下げ）」とは 行頭を周りの文章よりも下げることです。 国語の授業で「段落の最初や改行後の文のはじめを1文字分下げる」と教わったことはないでしょうか？あれと同じです。 プログラミングで良く用いられる「ソースコードの可読性を上げるためのインデント」とは少し意味が違うので注意です。

ここではCSSでインデント（字下げ）を実装する方法をご紹介します。

インデントのメリット

インデント（字下げ）自体には、特にこれと言ったメリットはありません。インデントとは「文書作成時の基本的なルール」です。 しかし、このインデントをうまく利用することで特定のレイアウトを実現することができます。

インデントの記述方法

sample.html

<p class="indent">
  CodeCamp（コードキャンプ）は、現役エンジニアから、マンツーマン（個別指導型）で学べるオンライン・プログラミングスクールです。<br>
  インターネットとパソコンさえあれば、全国どこからでも、あなたに合わせたマンツーマンレッスンが受けられます。
</p>
<p class="indent">
  レッスンは土日祝を含む毎日7時から24時まで開講しています。授業料が気になる学生から、まとまった時間を捻出しにくい社会人まで、あらゆる人々に等しく学べる機会を提供しています。
</p>

sample.css

p.indent{
  text-indent: 1em;
}

表示結果

text-indent プロパティを使用するとこで、1行目の字下げを行うことができます。 値は数字+単位、または% （パーセント）で指定します。

サンプルにある em とは「1文字分の長さ」の事です。例えば、文字サイズが16pxと指定されていれば1emは16px相当になります。2emなら32pxです。 つまりこのサンプルは1行目の文頭を1文字分下げるということになります。

2行目以降をインデントする方法

text-indentプロパティを応用すると、箇条書きリストの整形をすることができます。 2行目以降のインデントのサンプルです。 注意事項を整形する時や、箇条書きリストで独自の記号を使いたい時などによく使われます。

list.html

<ul class="list">
  <li class="indent">※注意事項が表示されます。</li>
  <li class="indent">※注意事項が表示されます。「text-indent」プロパティの応用で「2行目以降をインデント」する方法を紹介しています。</li>
  <li class="indent">※注意事項が表示されます。<br>もちろん、&lt;br&gt;タグで改行しても大丈夫。簡単なCSSの指定で実現できます。</li>
</ul>

list.css

li.indent{
  padding-left: 1em;
  text-indent: -1em;
}

表示結果

まず、padding-leftプロパティで全体を右に寄せます。今回は1emと指定しているので、全体が1文字分右に寄ります。

次に、 text-indentプロパティでマイナスの値を指定します。 text-indentにマイナスを指定することで、1行目の文頭が下がる（右にずれる）のではなく 左に飛び出る形になります。

本来は「1行目の字下げ」を実現するための text-indent プロパティですが、このプロパティに マイナスの値 を指定することで箇条書リストなどの整形を行うことができます。

2行目以降のインデントのしくみ

インデントを行う際の注意点

サンプルでは1文字分のインデントを想定して1emと指定していますが、文字ではなく画像でインデントする時などem指定だと表示が崩れてしまうことがあります。 リストマーカーに応じて適宜単位を設定してください。

インデントのまとめ

• インデントとは「字下げ」のこと。 text-indentプロパティで実装できます。
• 普通に使う場面はあまりないけど、リストの整形によく使われます。
• 他にも、CSS画像置換で使われることもあります。
• 使い方次第でいろいろな可能性を秘めているプロパティです。