記事内にはプロモーションが含まれています

【HTML】段落を1文字下げる方法まとめ！CSSのtext-indentやぶら下げインデントも解説

【HTML】段落を1文字下げる方法まとめ！CSSのtext-indentやぶら下げインデントも解説 HTML

日本語の文章、特に小説や公的な文書では、段落の始まりを1文字空ける（字下げする）のが一般的です。

Webサイトの作成においても、「文章を読みやすくするために1文字下げたい」「注意書きの2行目を綺麗に揃えたい」といった場面は頻繁に訪れます。

HTMLでこれらを実現しようとしたとき、スペースキーを連打したり、全角スペースを入れたりしている方もいるかもしれませんが、それらのやり方はHTMLの構造上あまり推奨される方法ではありません。

この記事では、HTMLの段落を正しく字下げするためのCSSプロパティ text-indent の使い方から、2行目以降を揃える「ぶら下げインデント」のテクニックまで、現在のWeb制作で標準的な実装方法を徹底解説します。

【本記事の信頼性】
プロフィール
執筆者：マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

HTMLで段落の最初を1文字下げる（字下げ）基本の方法

HTMLで作成した文章（<p>タグなど）の書き出しを1文字下げたい場合、最も推奨されるのはCSSの text-indent プロパティを使用する方法です。

HTML側に余計な空白文字を入れることなく、デザインとしてきれいに字下げを管理できます。

CSSのtext-indentプロパティを使う【推奨】

text-indent は、ブロックコンテナ内のテキストの「最初の行」のインデント幅を指定するプロパティです。

ここで「1文字分」を指定するために便利な単位が em（エム） です。
1em は現在のフォントサイズ1文字分を表します。

以下のサンプルコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style>
        /* すべての段落の1行目を1文字分下げる */
        p.indent-text {
            text-indent: 1em;
            line-height: 1.8;
            background-color: #f9f9f9;
            padding: 15px;
        }
    </style>
</head>
<body>

    <p class="indent-text">
        ここから文章が始まります。text-indentプロパティを指定しているため、
        段落の最初の文字だけが自動的に1文字分下がって表示されます。<br>
        改行した後のこの行は、新しい段落ではないため字下げされません。
    </p>

    <p class="indent-text">
        新しいpタグで囲まれた段落です。こちらも同様に、
        最初の1文字目がインデントされています。
    </p>

</body>
</html>

コードの解説

  • text-indent： 1em; これが字下げを実現する核となる記述です。1em と指定することで、フォントサイズに関わらず常に「1文字分」のスペースが空きます。もし2文字空けたい場合は 2em とします。
  • <p class="indent-text"> HTML側では特別な記述は不要です。クラスを割り当てるだけで、自動的にスタイルが適用されます。
  • 改行（<br>）との違い text-indent が適用されるのは、あくまで「ブロック要素の開始行」です。<br> で改行しただけの行は「同じ段落の続き」とみなされるため、字下げは行われません。

2行目以降を揃える「ぶら下げインデント」の作り方

「※」などの記号で始まる注意書きにおいて、文章が長くなり2行目に突入した際、2行目の頭が記号の下に来てしまうと読みづらく感じることがあります。

2行目以降を記号の分だけ下げて、文字の開始位置を揃える表現を 「ぶら下げインデント」 と呼びます。

padding-leftとtext-indentを組み合わせる

ぶら下げインデントを実現するには、以下の2つのプロパティを組み合わせるテクニックが定石です。

  1. padding-left： 左側に余白を作り、全体を右に押しやる。
  2. text-indent： 負の値（マイナス）を指定して、1行目だけを左に引き戻す。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style>
        .hanging-indent {
            /* 1文字分（1em）の左余白を作る */
            padding-left: 1em;
            
            /* 1行目だけを1文字分（-1em）左に戻す */
            text-indent: -1em;
            
            line-height: 1.6;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <div class="hanging-indent">
        ※これはぶら下げインデントの例です。文章が長くなって2行目に折り返されたとき、
        この文章のように2行目の開始位置が「※」の後ろにきれいに揃います。
    </div>

    <div class="hanging-indent">
        注：記号の幅が1文字ぴったりでない場合は、padding-leftとtext-indentの値を
        微調整する必要があります（例：1.5emなど）。
    </div>

</body>
</html>

コードの解説

  • padding-left： 1em; 要素全体の左側に、1文字分のスペースを確保します。これにより、すべての行が1文字分右にずれます。
  • text-indent： -1em; 1行目の開始位置だけを 1em 分左（マイナス方向）に移動させます。 結果として、1行目は元の位置から始まり、2行目以降は padding-left の影響で1文字下がった位置から始まることになります。これで「※」のような記号だけが飛び出した見た目を作ることができます。

CSSを使わずにスペースで字下げしてもいいのか？

CSSを使わず、HTMLファイルに直接「全角スペース」を入力して字下げを行うことは可能ですが、Web制作の現場ではあまり推奨されません。

その理由と、どうしてもCSSが使えない場合の対処法について解説します。

全角スペースや を使うデメリット

HTMLの中に 　（全角スペース）や &nbsp;（ノーブレークスペース）を記述すれば、見た目上は空白を作ることができます。

<!-- 非推奨な例 -->
<p>　これは全角スペースで字下げしています。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;これは特殊文字で字下げしています。</p>

しかし、この方法には以下のようなデメリットがあります。

構造とデザインの混同
HTMLは「文書構造」、CSSは「見た目（デザイン）」を担当すべきです。
字下げはデザインの範疇であるため、HTMLに空白文字を含めるのは好ましくありません。

メンテナンス性が悪い
すべての段落に手動でスペースを入れると、後で「やっぱり字下げをやめたい」となった時に、すべてのHTMLファイルを修正する必要があります。
CSSなら1行書き換えるだけで完了します。

予期せぬ表示崩れ
ブラウザやフォントの設定によっては、全角スペースの幅が意図した通りにならない場合があります。

どうしてもCSSが使えない場合

メールマガジン（HTMLメール）や、一部のブログサービスなど、CSSの使用が制限されている環境に限り、全角スペースでの字下げが許容される場合があります。

その場合でも、連続した半角スペースはブラウザで「1つのスペース」として処理されてしまうため、必ず全角スペースか、特殊文字コードの &emsp;（全角スペース相当）を使用するようにしましょう。

HTML/CSSのスキルを活かして年収を上げる方法

以上、HTML/CSSで段落を1文字下げる方法について解説してきました。

なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

HTML/CSSのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。

スポンサーリンク