Webサイトの記事などで、文章の段落の先頭を1文字下げる「字下げ（インデント）」は、文章を読みやすくするために欠かせないテクニックです。
この記事では、HTMLで字下げを行うおすすめの方法を紹介していきます。
基本的な1行目の字下げだけでなく、2行目以降を字下げする「ぶら下げインデント」の方法も、サンプルコード付きで解説しますので、是非参考にしてください。
【本記事の信頼性】
- 執筆者は元エンジニア
- 大手プログラミングスクールのWebディレクター兼ライターを経験
- 自らも地元密着型のプログラミングスクールを運営
プログラミングスクール
| ■Webエンジニアの育成に特化 ■自社開発企業への転職成功率がダントツ ■ハイスキルを求める人に最適 |
|
| ■サポートは半永久的 ■単価80万円以上の講師陣 ■AWSやJavaに強い |
|
| ■受講料完全無料 ■最短1か月で卒業 ■教室への通学も可能 |
字下げ（インデント）とは
字下げ（インデント）とは、文章の特定の行の開始位置を、他の行よりも右側にずらす手法のことです。
小説や論文などで、段落の始まりが1文字分下がっているのを見たことがあるでしょう。
あれがまさに字下げです。
Webページにおいても、この字下げを適切に使うことで、文章の区切りが明確になり、ユーザーにとって格段に読みやすいコンテンツを提供できます。
適切な字下げは、見た目の美しさだけでなく、ユーザビリティの向上にも繋がる重要な要素なのです。
HTMLで字下げするおすすめの方法
HTMLで字下げを行う場合、CSSを使用するのが一般的であり、最も推奨される方法です。
HTMLは文書の構造を定義し、CSSが見た目の装飾を担当するという役割分担が、Web制作の基本となります。
ここでは、CSSを使った代表的な3つの字下げ方法を紹介しましょう。
「text-indent」を使う
text-indentは、段落（ブロックレベル要素）の1行目の字下げを指定するためのCSSプロパティです。
文章の冒頭を字下げしたい場合に最適で、まさに日本語の文章作成における字下げのイメージに最も近い方法でしょう。
値には、文字数（em）やピクセル（px）などを指定できます。
例えば 1em と指定すると、現在のフォントサイズの1文字分だけ字下げできます。
「padding-left」を使う
padding-leftは、要素の内側の左側に余白（パディング）を設けるプロパティです。
この方法を使うと、段落のすべての行が、指定した分だけまとめて右にずれます。
つまり、ブロック全体を字下げしたい場合に有効な手段です。
1行目だけでなく、2行目以降もすべて均等に字下げされる点が text-indent とは異なります。
「margin-left」を使う
margin-leftは、要素の外側の左側に余白（マージン）を設けるプロパティです。
padding-left と同様に、段落のすべての行がまとめて右にずれます。
padding-left との違いは、余白が作られる場所です。
padding は要素の内側、margin は要素の外側に余白を作ります。
そのため、要素に背景色や枠線を付けている場合、padding だと背景や枠線の内側に、margin だと外側に余白ができるという見た目の違いが現れます。
一応字下げはできるものの非推奨の方法
昔ながらの方法で、一見すると字下げができているように見えるものの、現在では推奨されていない方法も存在します。
これらの方法は、コードの管理がしづらくなったり、SEO（検索エンジン最適化）に悪影響を及ぼしたりする可能性があるため、使用は避けるべきでしょう。
全角スペースを使う
HTMLの文章内に直接、全角スペースを入力して字下げをする方法です。
<pre><code>
<p> ここに文章を書きます。この方法は簡単に見えますが、非推奨です。</p>
</code></pre>
見た目は字下げされますが、この方法はいくつかの問題があります。
まず、後から字下げの幅を調整したくなった場合、すべてのスペースを一つひとつ手作業で修正しなければなりません。
また、閲覧する人の環境によっては表示が崩れる原因にもなります。
検索エンジンにとっても意味のない空白として扱われるため、SEOの観点からも好ましくありません。
特殊文字を使う
（半角スペース）や  （全角スペース）といった、スペースを表す特殊文字（文字実体参照）を使う方法もあります。
<pre><code>
<p> ここに文章を書きます。この方法も全角スペースと同様に非推奨です。</p>
</code></pre>
この方法も、全角スペースと同様の理由で推奨されません。
ソースコードが読みにくくなる上に、メンテナンス性も著しく低下します。
字下げのような見た目の調整は、CSSに任せるのが現代のWeb制作の鉄則です。
1行目を字下げするサンプルコード
ここでは、最も一般的な「段落の1行目を1文字分下げる」方法を、text-indent を使って実装するサンプルコードを紹介します。
【HTMLソース】
<pre><code>
<p class="indent-first-line">ここに文章が入ります。この段落の1行目だけが字下げされます。2行目以降は通常の位置から表示されるため、非常に読みやすくなります。</p>
</code></pre>
【CSSソース】
<pre><code>
.indent-first-line {
text-indent: 1em;
}
</code></pre>
【実行結果】
ここに文章が入ります。この段落の1行目だけが字下げされます。
2行目以降は通常の位置から表示されるため、非常に読みやすくなります。
HTMLの <p> タグに indent-first-line というクラス名を付けました。
そして、CSSでそのクラスに対して text-indent: 1em; を指定しています。
1em は「1文字分の高さ」を意味する単位なので、これにより、段落の1行目だけがきれいに1文字分字下げされます。
2行目以降を字下げ（ぶら下げインデント）するサンプルコード
箇条書きなどで、1行目は通常通り表示し、2行目以降を字下げしたい場合があります。
これを「ぶら下げインデント」と呼びます。
padding-left と text-indent を組み合わせることで実現可能です。
【HTMLソース】
<pre><code>
<p class="hanging-indent">1. ここに項目名が入ります。この文章は2行目以降が字下げされるため、項目の始まりが際立って見やすくなります。</p>
</code></pre>
【CSSソース】
<pre><code>
.hanging-indent {
padding-left: 2em;
text-indent: -2em;
}
</code></pre>
【実行結果】
1. ここに項目名が入ります。この文章は2行目以降が字下げ
されるため、項目の始まりが際立って見やすくなります。
まず padding-left: 2em; で、段落全体を2文字分右にずらします。
しかし、このままでは1行目もずれてしまいます。
そこで text-indent: -2em; を使って、1行目だけをマイナス方向、つまり左に2文字分戻してあげます。
結果として、1行目は元の位置に表示され、2行目以降は padding-left で指定した分だけ字下げされた状態になります。
このテクニックは、注釈や箇条書きのデザインで非常に役立つでしょう。
HTMLの字下げに関するよくある質問
ここでは、HTMLの字下げに関して初心者の方が抱きやすい疑問にお答えします。
タグ以外でも字下げできる？
はい、できます。
今回紹介したCSSによる字下げ方法は、<p>（段落）タグだけでなく、<div>（ブロック）や <li>（リスト項目）など、多くのブロックレベル要素に適用可能です。
字下げしたい要素にクラス名を付けて、CSSでスタイルを指定するという基本的な流れは同じです。
引用タグ（blockquote）でも字下げされるから使用してもOK？
<blockquote> は「引用」を表すためのHTMLタグです。
ブラウザのデフォルトスタイルで字下げされて表示されることが多いため、見た目上の字下げ目的で使われることがありますが、これは間違いです。
<blockquote> は、あくまで「ここが他のサイトや書籍からの引用部分である」と、その文章に意味を与えるためのタグになります。
単にデザインとして字下げをしたい場合は、CSSの text-indent や padding-left を使用してください。
どの字下げ方法が最もSEOに効果的？
CSSを使った方法（text-indent, padding, margin）が最もSEOに効果的です。
Googleなどの検索エンジンは、HTMLの構造を理解してページの内容を評価します。
HTMLで文書構造を正しく示し、CSSで見た目を整えるという役割分担は、検索エンジンがコンテンツを解釈しやすくなる手助けとなります。
一方で、全角スペースや特殊文字による字下げは、意味のない文字データと見なされたり、不自然な空白として評価されたりする可能性があり、SEOの観点からは避けるべきでしょう。
まとめ
HTMLで字下げを行う際は、全角スペースや特殊文字に頼るのではなく、CSSの text-indent や padding-left を使うのがベストプラクティスです。
HTMLで構造を、CSSで見た目を定義するという基本を守ることで、メンテナンス性が高く、SEOにも強い、読みやすいWebサイトを作ることができます。
ぜひ、今回の記事を参考にして、正しい字下げをマスターしてください。
なお、HTML/CSSやWordPressのスキルを高めたい場合は、「WPHack講座」というスクールが格安ですのでおすすめです。
独学コースもあるので、スクール形式ではなく独学で進めたい人にも向いています。
Follow me!
