先生と生徒の会話形式で理解しよう

生徒

「Webサイトの文章って、最初の行だけ少し右にずれていることがありますよね？あれはどうやってるんですか？」

先生

「いいところに気が付きましたね。それはCSSのtext-indentというプロパティを使ってインデントを設定しているんです。」

生徒

「インデントって何ですか？難しそう…。」

先生

「大丈夫です。インデントとは、段落の最初の行だけ少しスペースをあけることです。本や雑誌でもよく見かけますよ。それでは一緒に使い方を学んでいきましょう！」

1. CSSでインデントを設定するtext-indentとは？

text-indent（テキスト・インデント）は、段落や文章の最初の行だけを右にずらすCSSのプロパティです。

文章を読みやすくしたり、見た目を整えたりするときにとても便利です。

このtext-indentを使うと、「ここから新しい段落ですよ」と読者に伝えやすくなります。

パソコンが初めての方でも、HTMLとCSSに少し触れるだけで簡単に使える機能です。

2. 基本的なtext-indentの使い方

では実際にCSSでインデントを設定してみましょう。

text-indentにはpx（ピクセル）やem（文字の大きさに合わせた単位）などを使って、インデントの幅を指定します。

下記は10ピクセルだけ段落の最初を右にずらす例です。


<style>
p.indent-example {
    text-indent: 10px;
}
</style>

<p class="indent-example">
この文章は最初の行だけ右に少しだけずれています。このようにtext-indentを使うことで段落のはじまりを目立たせることができます。
</p>

ブラウザ表示

このように、見た目が少し整うだけで、文章がとても読みやすくなります。

3. 単位を変えて柔軟にインデント調整

インデントの指定はpx（ピクセル）の他に、emという単位を使うこともできます。

emとは？：現在の文字サイズを1としたときの相対的な大きさです。たとえば、1emなら文字1個分、2emなら文字2個分のスペースになります。


<style>
p.indent-em {
    text-indent: 2em;
}
</style>

<p class="indent-em">
この段落は文字2個分のスペースが最初の行に追加されています。文字の大きさに合わせて調整できるので、デザインに柔軟性が出ます。
</p>

ブラウザ表示

文章のサイズに合わせてインデントをつけたいときは、emを使うと便利です。

4. インデントを使うときの注意点

インデントは便利ですが、以下のような点に注意して使いましょう。

インデントをつけすぎない：10px〜2emくらいが読みやすいバランスです。
スマホでは省略する場合も：スマートフォンのように画面が小さいときは、インデントをなしにしたほうが読みやすいこともあります。
中央揃えや右寄せと一緒に使うと崩れる：text-alignとtext-indentを同時に使うとレイアウトがずれることがあるので注意が必要です。

5. CSSで文章をきれいに見せる実践例

実際に、段落ごとにtext-indentを使ってインデントを設定すると、文章のまとまりがとてもよく見えるようになります。

以下は文章が2つ並んだ例です。


<style>
p.indent-sample {
    text-indent: 1.5em;
    line-height: 1.6;
}
</style>

<p class="indent-sample">
CSSを使うことで文章の見た目を整えることができます。特にtext-indentを使えば、読み始めがスムーズになり、読者にやさしいデザインが可能です。
</p>

<p class="indent-sample">
このように、段落の最初の行だけをずらすことで、自然と次の文として認識しやすくなります。特に長文ではインデントが効果を発揮します。
</p>

ブラウザ表示

このように複数の段落があるときに、text-indentを使って揃えると見た目の統一感が出ます。

6. 検索されやすいキーワードと使いどころ

以下のような検索キーワードでtext-indentはよく検索されています。

CSS インデント設定方法
CSS text-indent 使い方
CSS 段落最初右にずらす
CSS 字下げ文章調整
CSS インデントスマホ対応

インデントの設定は、文章中心のブログサイトや、読みやすさを重視する企業サイト、教育用の資料ページなどで特に使われています。

7. 初心者でも今すぐ使えるインデント調整テクニック

パソコンに慣れていない方でも、以下のコードをコピー＆ペーストするだけで簡単に使えます。

CSSの指定とHTMLを一緒に貼り付けて、あとは好きな文章に入れ替えるだけです。


<style>
.indent-ready {
    text-indent: 1em;
}
</style>

<p class="indent-ready">
これは初心者でも簡単に試せるインデントのサンプルです。文章の最初の行だけが右にずれて表示されます。
</p>

ブラウザ表示

文字数やデザインに合わせて、数字や単位を変えることで細かな調整もできます。

まとめ

CSSでインデント（字下げ）を設定する方法は、文章を読みやすく整えるためのとても大切なテクニックです。今回の記事では、text-indentを使って段落の最初の行だけを右にずらす基本操作から、px・emといった単位の違い、読みやすいデザインに仕上げるための注意点まで幅広く学びました。インデントは文章の構造を視覚的にわかりやすくする働きを持ち、紙の本や雑誌と同じようにWebページでも自然で心地よい読みやすさを生み出します。とくに長文では、インデントを適切に使うことで段落の区切りが明確になり、読者はよりスムーズに内容へ集中できるようになります。

また、インデントは単なる「見た目の調整」にとどまらず、文章を扱うサイトや教育系、ブログ系など、読みやすさを重視する場面では欠かせない存在です。さらに、スマートフォンのような小さな画面ではインデントが逆に読みにくさにつながる場合もあるため、レスポンシブデザインを考慮した調整も重要になります。これにより、パソコン・スマホどちらの閲覧環境でも快適に読めるページ作りが可能になります。

text-indent は他のCSSと組み合わせることで、文章のバランスをより美しく整えることもできます。たとえば line-height を使った行間調整、背景色との組み合わせによる読みやすさの向上、枠線や余白を加えた段落デザインなど、多彩な応用ができます。文章が多いコンテンツでは、こうした小さな工夫がユーザーの読みやすさやサイトの印象を大きく左右します。

ここでは、記事で学んだ内容をふまえてインデントと文章デザインを組み合わせたサンプルを掲載します。実際にコピペして調整してみることで、文章デザインの理解がさらに深まります。

インデントと段落デザインの総合サンプル


<style>
.indent-block {
    text-indent: 2em;
    line-height: 1.8;
    background-color: #f7f7f7;
    padding: 12px;
    border-left: 4px solid #999;
    margin-bottom: 15px;
}
.indent-highlight {
    text-indent: 1.5em;
    background-color: rgba(255, 245, 200, 0.8);
    padding: 10px;
    line-height: 1.7;
}
</style>

<p class="indent-block">
CSSを使うことで文章の見た目は大きく変わります。text-indentを設定するだけで、段落の最初の行に自然な始まりが生まれ、文章全体の印象が整います。読み手の負担を減らすためにも、適切なインデント調整はとても重要です。
</p>

<p class="indent-highlight">
インデントはデザインとしての役割も持っています。背景色や余白と組み合わせることで、文章のまとまりがより強調され、視線を導きやすくなります。初心者でも簡単に応用できる便利なプロパティです。
</p>

ブラウザ表示

このように、インデントを中心に文章の見せ方を整えることで、読者にとって読みやすく魅力的なコンテンツを作り上げることができます。特に文章主体のWebページでは、細かな気配りがそのまま品質向上につながります。読み手が自然に読み進められるような文章構造を意識し、インデントの調整を積極的に活用してみてください。

先生と生徒の振り返り会話

生徒

「text-indentって段落の最初の行だけを動かせるのが便利ですね！紙の本みたいに読みやすくなるっていうのがよくわかりました。」

先生

「その通りです。Webでも紙の文章でも読みやすさの基本は同じなんですよ。適切なインデントがあると、文章が整理されて見えるんです。」

生徒

「emとpxの違いも面白かったです。フォントサイズに合わせて変わる方が自然なときもありますね。」

先生

「そうですね。文章の種類やデザインによって使い分けると表現の幅が広がります。特にスマホ表示ではインデントの量を調整することも大切です。」

生徒

「段落に背景をつけたり枠線をつけたりすると、さらに読みやすくなるのもわかりました。これからブログでも使ってみたいです！」

先生