【必読】HTMLでインデントを設定する方法や使うべき理由を徹底解説

（最終更新月：2023年6月）

✔以下のような疑問を持つ方々に向けた記事となります

「HTMLでインデントはどう設定するのだろうか？」
「HTMLでのインデントの設定方法を具体的に知りたい」
「HTMLでインデントを設定する具体的な例を見てみたい」

✔本記事で提供する内容：

HTMLでのインデントの基本的な設定方法
インデントの設定方法とその応用
HTMLでインデントを設定する実例

この記事では、HTMLでのインデントの基本的な設定方法から、さまざまなオプションを活用した応用まで、具体的な事例を交えて詳しく解説します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

HTMLインデントの基本

このセクションでは、HTMLのインデントについて掘り下げていきます。

正しいインデントの使用法を理解することで、読みやすく整理されたコードを書くための基礎を学びましょう。

インデントとは何か
インデントが必要なケース

インデントとは何か

インデントは、プログラミングや文章作成において、行の開始部分でスペースを空けることを指します。

この目的は、コードや文章の構造を視覚的に明確にすることで、読みやすさや理解しやすさを向上させることです。

例えば、HTMLでは、ネストされたタグ（例えば、タグ内のタグなど）にインデントを使用して、その関係性を視覚的に示すことが一般的です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      margin-left: 20px;
    }
    .inner-container {
      margin-left: 20px;
    }
    .text {
      margin-left: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Main Heading</h1>
    <div class="inner-container">
      <h2>Sub Heading</h2>
      <p class="text">This is some text inside a paragraph.</p>
    </div>
  </div>
</body>
</html>

インデントが必要なケース

HTMLでは、以下のようなケースでインデントが有効です。

複数の要素がネストされている場合
同じ階層に複数の要素がある場合

インデントにより視覚的な階層が明確になるため、コードが読みやすくなります。

コードの修正やデバッグを行う際にも、インデントによって構造が明確であると作業が容易になるのもメリットです。

インデントの実現方法

このセクションでは、HTMLにおけるインデントの具体的な実現方法について説明します。

異なる方法の特徴を理解し、適切な状況で適切な方法を選択することが重要です。

text-indentの利用
marginやpaddingでのインデント
特殊文字によるインデント
全角スペースによるインデント（非推奨）

text-indentの利用

text-indentは、CSSのプロパティで、指定した量だけテキストの最初の行をインデントします。

text-indent: 2em;

テキストブロックの最初の行は2emだけ右にインデントされます。

この方法は主に段落の始まりをインデントするのに使用され、特にプロジェクトで一貫性を保つためのスタイルガイドラインがある場合に便利です。

marginやpaddingでのインデント

marginやpaddingも、HTML要素のインデントを作成する方法のひとつです。

margin-leftやpadding-leftを用いて左側にスペースを作り、視覚的なインデントを作成します。

ただし、これらは要素全体の位置を変えるため、テキストブロックの最初の行だけをインデントしたい場合には適していません。

<!DOCTYPE html>
<html>
<head>
  <style>
    .indented-text {
      margin-left: 20px;
      padding-left: 20px;
    }
  </style>
</head>
<body>
  <div class="indented-text">
    <p>This is an example of indented text.</p>
    <p>By using margin-left and padding-left properties, we can create visual indentation for HTML elements.</p>
    <p>These properties add space to the left side of the element, creating a visual offset.</p>
  </div>
</body>
</html>

特殊文字によるインデント

特殊文字を使用して手動でインデントを作成することも可能です。

HTMLでは、 を使ってスペースを表現します。

ただし、この方法はあまり推奨されません。

手動でスペースを追加すると、コードが乱雑になる可能性がありますし、一貫性や再利用性が低下する可能性もあります。

全角スペースによるインデント（非推奨）

全角スペースを使用してインデントを作成することも可能ですが、これはあまり推奨されません。

その理由はこちら。

予期しない挙動の可能性: HTMLでは、連続した空白文字は1つの空白にまとめられます。したがって、連続した全角スペースを使用すると、予期しないスペースの挙動が発生する可能性があります。
多言語対応の問題: 全角スペースは特定の言語や文字セットに依存しています。異なる言語のテキストを扱う場合、全角スペースが正しく表示されないことがあります。

インデントが目的なら、全角スペースによる方法は避けましょう。

事例で学ぶインデントの使い方

ここでは、いくつかの具体的な事例を通じて、インデントの使い方をより深く理解していきましょう。

実際の使用例を通じて、インデントの効果的な使用方法を学ぶことができます。

1行目の字下げ方法
2行目以降のぶら下げインデント
リストや数式のマーカー付き箇条書きの字下げ
単位「rem」の活用

1行目の字下げ方法

1行目の字下げは、段落の最初の行だけをインデントする一般的な手法です。

これは、文書が読みやすくなるという利点があります。

例えばCSSのtext-indentプロパティを使って、段落の最初の行をインデントします。

p {
    text-indent: 2em;
}

このCSSルールは、すべての<p>要素の最初の行に2emのインデントを適用するものです。

2行目以降のぶら下げインデント

ぶら下げインデントは、最初の行以外のすべての行をインデントする方法です。

これは引用や参考文献リストなどでよく使用されます。

CSSを用いてこれを実現する一つの方法は、text-indentとmargin-leftを組み合わせることです。

p {
    text-indent: -2em;
    margin-left: 2em;
}

このCSSルールは、すべての<p>要素の最初の行を左に2emずらし、それと同時に全体を右に2em移動させることで、ぶら下げインデントを作成します。

リストや数式のマーカー付き箇条書きの字下げ

HTMLでリストを作成するとき、項目のマーカー（箇条書きの点や番号など）とテキストの間には自動的にインデントが追加されます。

しかし、このデフォルトのインデントをカスタマイズしたい場合もあります。

その場合は、CSSのpadding-leftやtext-indentを使用して調整しましょう。

<!DOCTYPE html>
<html>
<head>
  <style>
    .custom-list {
      padding-left: 20px;
    }
    
    .custom-list li {
      text-indent: -15px;
    }
  </style>
</head>
<body>
  <ul class="custom-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

単位「rem」の活用

「em」や「px」の代わりに「rem」を使用すると、インデントの大きさをより一貫性のあるものにできます。

なぜなら「rem」は、ルート要素（HTMLの最上位要素）のフォントサイズに対する相対単位で、全ての要素で一貫した大きさを提供できるから。

<!DOCTYPE html>
<html>
<head>
  <style>
    .custom-list {
      padding-left: 2rem;
    }
  </style>
</head>
<body>
  <ul class="custom-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>