CSSのインデントに関する基本知識
CSS（Cascading Style Sheets）は、Webページのデザインやスタイルを制御するフロントエンドのプログラミング言語です。ここでは、CSSを使用してテキストをインデント（字下げ）する方法について解説します。CSSの初心者向けに、分かりやすくインデントの概要や具体的な方法をまとめているので、それぞれ見ていきましょう。
CSSのインデント（字下げ）とは？
CSSで処理できるインデント（字下げ）とは、テキストや要素を同じ高さに並べ、Web上で美しく表示するためのスタイリング方法。現代のWebデザインでは要素の表示位置を揃えてデザインの統一性を高める手法がよく用いられます。要素のインデントは欠かせない技術と言えるでしょう。
また、テキストのインデントもよく使用する手法です。例えば「※」の後に続く文章は、改行したときに「※」に合わせて一字下げたほうが美しく表示されます。こうした処理をHTMLでその都度設定するのは手間がかかりすぎてしまうため、CSSで一括指定することが一般的です。
CSSでインデントを記述する方法
CSSでインデント処理をする際は「margin」と「padding」というプロパティを用いるケースが多く、いずれも要素ごとの余白を設定する際に重宝するでしょう。また、テキストをインデント処理する際には「text-indent」というプロパティを使います。
Webサイトのデザインの大枠を決定する際に、どれくらいの余白を空けて各要素を配置するのか決めておくと、余白として残すpx数が逆算できるので、あらかじめ余白の幅を考えておくのが大切です。
2行目以降をインデントする方法
先述したとおり、テキストの2行目以降をインデントする場面にもよく直面します。テキストのインデントをCSSで処理する場合は「text-indent」プロパティを使って余白を設定しましょう。
インデントを行う際の注意点
インデントはWebページの視覚的な美しさを高めるために重要なテクニックですが、使いすぎるとくどくなってしまい、かえって逆効果になります。場合によっては当初のデザインを崩してしまう可能性もあるので、インデントの多用には注意しましょう。
また、ページ単体のインデントを統一するのはもちろんですが、Webサイト全体で同様のインデント処理を行った方が統一感が生まれ、より優れたデザインに仕上がります。
統一感のある美しいデザインを実現するには、実装を始めてからインデント処理を行うのではなく、事前にインデントに関して決めておくことが大切です。
CSSのインデント例（サンプルコード付き）
ここからは、実際にCSSでインデント処理を行う際に役立つサンプルコードと事例をご紹介します。ぜひコード記述に役立ててください。
marginを使ったインデント処理
marginは、要素の外部余白を設定するプロパティ。これにより、要素自体がページ上でどれだけスペースを取るかを制御できます。以下のように記述しましょう。
div {
margin: 20px;
}
このコードは<div>要素の周りに20pxの余白を設定し、<div>要素を他の要素から離します。
paddingを使ったインデント処理
paddingは、要素の内部余白を設定するプロパティ。これにより、テキストが要素の境界からどれだけ離れるかを制御できます。以下のように記述しましょう。
p {
padding: 10px;
}
このコードは段落要素（<p>）内のテキストの周りに10pxの余白を設定します。余白はテキストと要素の境界との間に挿入されるので、デザインを崩さないよう気を付けて利用しましょう。
text-indentを使ったインデント処理
text-indentは、テキストの最初の行をインデントするプロパティ。段落やリストアイテムなどで使用されます。以下のように記述しましょう。
ul {
text-indent: 20px;
}
このコードは順序なしリスト（<ul>）内のテキストの最初の行を20pxだけインデントします。全体との兼ね合いも考えつつ、適切に設定しましょう。
CSSのインデントを応用したデザイン法
CSSでインデント処理を行えば、簡単にWebサイトの要素やテキストの余白を設定できるため、Web制作やデザインの効率化が図れます。ここからは、学んだインデント処理の手法をよりデザインに生かすために押さえておきたいデザイン法を見ていきましょう。
text-indentの効果を把握する
テキストをインデントする際に使用する「text-indent」ですが、その値は、ピクセル（px）やパーセント（%）、emなどの単位で指定できます。一般的にはpxで指定することが多いですが、場合に応じて％やemでも指定できると使い道が広がるでしょう。
使いこなせれば段落ごとに異なるインデントを設定することも可能です。テキストの配置一つでもサイトの印象は大きく変わるため、余白を使いこなして美しいデザインを実現しましょう。
text-indentをマイナス指定する
実はtext-indentはマイナス数値にも指定できるのです。テキストの最初の行が左にインデントされ、テキスト全体が左にずれて表示されます。これにより一種の縮小効果が生じ、独自のデザイン効果を実現できるのですが、読みやすさに影響を与える可能性があるでしょう。慎重に使用する必要があります。
使用する際は、以下のようにマイナス指定のtext-indentスタイルを適用しましょう。
p {
text-indent: -20px;
}
各段落の最初の行が左に20pxだけインデントされます。デザインの要件やテキストのコンテキストに応じて、適切なマイナス値を設定することが重要です。
padding-leftの効果を把握する
padding-leftは要素の左側に空白を追加するプロパティ。Web制作で何度も目にするプロパティで、テキストやコンテンツの配置を調整する際に非常に役立ちます。要素に「padding-left」を設定してページの見た目や読みやすさを向上させましょう。
また、「padding」は他の方向（上、右、下）にも適用できるので、自由度の高いプロパティと言えます。CSSでデザインを忠実に実現するためにも、paddingを使いこなすのが肝心です。
text-indentとpadding-leftを組み合わせる
「text-indent」と「padding-left」を組み合わせる手法はWebデザインやテキストのレイアウトにおいて効果的な手法。これらのプロパティを組み合わせて段落やテキストのスタイルを洗練させ、読みやすさを向上させられます。
先述したように「text-indent」はテキストの最初の行を右にずらすプロパティ。段落が整然と配置され、視覚的に整列させる効果があります。一方、「padding-left」は要素の左側に余白を追加するプロパティ。これを段落要素に適用すれば、段落全体に左側の余白を設定することができます。
padding-leftで設定した余白はテキスト全体に影響を与え、テキストがページの左端から離れて配置されるためさらに読みやすくなります。特にWebページの本文部分でよく用いられる手法で、UIやUXを向上させる上では欠かせません。
CSSのインデント処理を覚えておこう
本記事で紹介したCSSのインデント処理を覚えておけば、今後のWebデザインで大きな武器になるでしょう。もちろん、プロパティを覚えているだけでは意味がないので、実現したいデザインとCSSのコードがすぐに一致するように何度か試してみることが大切です。
CSSでのインデント処理を活用して望み通りのデザインを実現し、Web制作のスキルをさらに高めましょう。
