ぶら下げインデント

文章の先頭にマーカー（記号、数字など）を付けたとき、画面端で折り返された次の行がマーカーの下に回り込まないようにする、3つの方法です。

※ 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
文章がマーカー（※）の下に回り込む 文章がマーカー（※）の下に回り込まない

  • 「カラム分離式」：折り返しや可変幅に強く、安定してズレない表示が最大のメリット。 注釈や段落先頭に記号を付けたリスト風の見た目に向く。
  • 「absolute 方式」：記号の位置を完全固定できるが微調整が必要。デザイン上、記号位置を厳密に揃えたい場合に向く。
  • 「absolute方式・リスト版」：複数種類の記号を切り替えやすく、デザイン向け。矢印リストや注意書きリストなどに最適。

カラム分離式

この「カラム分離式」は、注釈や参考文献など、段落先頭の記号を本文の始まり位置に揃えたい場合や、可変幅コンテナ・レスポンシブデザインに対応したい場合に向いています。 リスト風の見た目にすることも可能です。 （本物の HTML リストとして扱いたい場合は「absolute方式・リスト版」をお使いください。）

デモ

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS

CSS 

.hanging-indent {
  display: grid;                    /* 記号と本文を2カラムに分離 */
  grid-template-columns: auto 1fr;  /* 左：記号　右：本文 */
  column-gap: 0.5em;                /* 記号と本文の間隔 */
}
.hanging-indent::before {
  content: "※";                    /* 行頭の記号 */
}
.hanging-indent > span {
  display: block;                   /* 折返しを右カラム内に限定 */
  padding-left: 0;                  /* 余計なインデントを防ぐ */
}

HTML

HTML 

<p class="hanging-indent">
	文章文章文章文章文章文章文章文章文章文章文章文章文章
</p>

解説

仕組み

  • display: grid で親要素を2カラムに分ける
    左カラム：記号（※など）
    右カラム：本文
  • 記号は疑似要素 ::before で挿入
  • 本文はブロック要素にして右カラム内で折り返す
  • 折り返しの際も右カラムの左端に揃うため、2行目以降も常に整列する

特徴

  • 折り返しや可変幅に強い
  • 記号と本文の位置関係が自然に揃う
  • HTMLを汚さず疑似要素で記号を追加可能
  • absolute や text-indent を使わないので安定性が高い

短所

  • 記号の位置を画面端などに完全固定したい場合には向かない
  • grid を使うので、古いブラウザ（IEなど）では対応できない場合がある

absolute 方式

この「absolute 方式」は、記号の位置を画面の左端などに絶対固定したい場合、デザイン上、本文と記号の距離を厳密に揃えたい場合に向いています。 記号位置を完全固定できますが微調整が必要です。

デモ

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS

CSS 

.hang {
  position: relative;
  padding-left: 1.4em; /* 本文の開始位置。調整OK */
  line-height: 1.7;
}
.hang::before {
  content: "●";      
  position: absolute;
  left: 0;            /* 左端に固定 */
  top: 0.1em;         /* 見た目の上下調整（環境により微調整可） */
  font-size: 1em;     /* 記号の大きさ揃え */
}

HTML

HTML 

<p class="hang">
 文章文章文章文章文章文章文章文章文章文章文章文章文章文章
</p>

解説

仕組み

  • 親要素 .hang を position: relative にして、疑似要素 ::before を絶対位置 absolute で固定。
  • 左端 (left: 0) に記号を置き、上下の微調整は top で。

特徴

  • 記号の位置が「完全に固定」される。
  • 複数行の折り返しは本文の padding-left に従う。
  • 親要素の高さに注意しないと、行の高さやフォントサイズ変更でズレることがある。

短所

  • 記号の高さや行間が変わると微調整が必要。親要素のサイズに依存する。

absolute 方式・リスト版

この「absolute 方式・リスト版」は、矢印リスト、注意書きリストなど、複数の記号を切り替えたい場合に向いています。 記号の位置を完全に揃えた、美しいリストを作ることができます。

デモ

  • 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

CSS

CSS 

.custom-list {
  list-style: none; /* デフォルトの箇条書きマークを消す */
  padding-left: 20px; /* 左の余白 */
  margin: 0; /* 外側の余白をリセット */
}
@media screen and (max-width: 767px) {
  .custom-list {
    padding-left: 5px; /* 小さい画面では左余白を減らす */
  }
}
.custom-list li {
  position: relative; /* 擬似要素の位置を基準にする */
  padding-left: 30px; /* 擬似要素分のスペースを確保 */
  margin-bottom: 5px; /* アイテム間の余白 */
}
.custom-list li::before {
  display: inline-block;
  position: absolute; /* アイテム内の絶対位置指定 */
  left: 0;
  top: 0.1em;
  width: 30px; /* 擬似要素の幅 */
  text-align: left; /* テキストの左寄せ */
}
.list-arrow::before {
  content: "⇒";　/* ⇒ の矢印マーク */
  padding-right: 5px; /* マークとテキストの間隔 */
}
.list-asterisk::before {
  content: "※";　/* ※ の矢印マーク */　
  padding-right: 5px; /* マークとテキストの間隔 */
}

HTML

HTML 

<ul class="custom-list">
  <li class="list-arrow">
		文章文章文章文章文章文章文章文章文章文章文章文章文章文章
	</li>
  <li class="list-asterisk">
		テキストテキストテキストテキストテキストテキストテキストテキストテキスト
	</li>
</ul>

解説

仕組み

  • li に position: relative をつけて基準点にし、 li::before を position: absolute で左端に固定する方式。
  • 本文は padding-left で右にずらして開始位置を揃える。
  • ::before に記号（⇒ / ※ など）を入れ、記号ごとにクラスを変えることで 複数種類のカスタムリスト記号を柔軟に切り替えられる。
  • レスポンシブ時は ul.custom-list の padding-left を変更すると、 記号は固定のまま本文だけが自然に調整される。

特徴

  • 記号の位置は絶対配置なので 完全に固定 され、デザインが崩れにくい。
  • リスト全体の構造が整い、複数行になっても本⽂は padding-left に揃う。
  • 記号の種類を CSS クラスで簡単に切り替えられるため、デザイン用途に強い。

短所

  • 記号幅と padding のバランス調整が必要
  • 行間・フォントサイズによって top の微調整が必要になることがある
★ このページは、ChatGPTの協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。 複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、 ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。
上に戻る