Webサイトの記事などで、文章の段落の先頭を1文字下げる「字下げ（インデント）」は、文章を読みやすくするために欠かせないテクニックです。
この記事では、HTMLで字下げを行うおすすめの方法を紹介していきます。
基本的な1行目の字下げだけでなく、2行目以降を字下げする「ぶら下げインデント」の方法も、サンプルコード付きで解説しますので、是非参考にしてください。
 |
|
字下げ（インデント）とは
字下げ（インデント）とは、文章の特定の行の開始位置を、他の行よりも右側にずらす手法のことです。
小説や論文などで、段落の始まりが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の文章内に直接、全角スペースを入力して字下げをする方法です。
<p> ここに文章を書きます。この方法は簡単に見えますが、非推奨です。</p>
見た目は字下げされますが、この方法はいくつかの問題があります。
まず、後から字下げの幅を調整したくなった場合、すべてのスペースを一つひとつ手作業で修正しなければなりません。
また、閲覧する人の環境によっては表示が崩れる原因にもなります。
検索エンジンにとっても意味のない空白として扱われるため、SEOの観点からも好ましくありません。
特殊文字を使う
（半角スペース）や  （全角スペース）といった、スペースを表す特殊文字（文字実体参照）を使う方法もあります。
<p> ここに文章を書きます。この方法も全角スペースと同様に非推奨です。</p>
この方法も、全角スペースと同様の理由で推奨されません。
ソースコードが読みにくくなる上に、メンテナンス性も著しく低下します。
字下げのような見た目の調整は、CSSに任せるのが現代のWeb制作の鉄則です。
1行目を字下げするサンプルコード
ここでは、最も一般的な「段落の1行目を1文字分下げる」方法を、text-indent を使って実装するサンプルコードを紹介します。
【HTMLソース】
<p class="indent-first-line">ここに文章が入ります。この段落の1行目だけが字下げされます。2行目以降は通常の位置から表示されるため、非常に読みやすくなります。</p>
【CSSソース】
.indent-first-line {
text-indent: 1em;
}
【実行結果】
ここに文章が入ります。この段落の1行目だけが字下げされます。
2行目以降は通常の位置から表示されるため、非常に読みやすくなります。
HTMLの <p> タグに indent-first-line というクラス名を付けました。
そして、CSSでそのクラスに対して text-indent: 1em; を指定しています。
1em は「1文字分の高さ」を意味する単位なので、これにより、段落の1行目だけがきれいに1文字分字下げされます。
2行目以降を字下げ（ぶら下げインデント）するサンプルコード
箇条書きなどで、1行目は通常通り表示し、2行目以降を字下げしたい場合があります。
これを「ぶら下げインデント」と呼びます。
padding-left と text-indent を組み合わせることで実現可能です。
【HTMLソース】
<p class="hanging-indent">1. ここに項目名が入ります。この文章は2行目以降が字下げされるため、項目の始まりが際立って見やすくなります。</p>
【CSSソース】
.hanging-indent {
padding-left: 2em;
text-indent: -2em;
}
【実行結果】
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の字下げをはじめとしたスキルを効率的に学ぶには
HTMLの字下げをはじめ、HTML/CSSやWordPressに関するスキルを高めたい場合は、「WPHack講座」がおすすめです。
WPHack講座のメリットは、主に以下の通りです。
格安料金でHTMLを中心としたスキルを高めたい場合には最適なので、「月数千円の出費で効率的にスキルを身に付けられる」という点にメリットを感じる方は、「WPHack講座」の利用を検討してみてもいいかもしれません。
実務未経験エンジニアでも希望の転職先を見つけやすい！！
週1～3日からできる副業案件多数！！
フリーランス案件の単価の高さは圧倒的！！
