【CSS】注釈（※、*1）を記載するときのインデント合わせ（頭合わせ）

<ul class="notes">
  <li>
    <div class="notes_head">*1</div>
    <div class="notes_body">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</div>
  </li>
  <li>
    <div class="notes_head">*2</div>
    <div class="notes_body">明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</div>
  </li>
  <li>
    <div class="notes_head">*3</div>
    <div class="notes_body">部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</div>
  </li>
  <li>
    <div class="notes_head">※</div>
    <div class="notes_body">引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</div>
  </li>
</ul>

/* ---------- 01 ul と table の仕組みで揃える ---------- */
ul.notes {
  display: table;
  width: 100%;
  margin: 0;
  padding-left: 0;
}
ul.notes li {
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
}
ul.notes li .notes_head {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 0.5em;
}
ul.notes li .notes_body {
  display: table-cell;
  vertical-align: top;
}

<p class="ind_a">*1 赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</p>
<p class="ind_a">*2 明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</p>
<p class="ind_a">*3 部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</p>
<p class="ind_b">※ 引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</p>

/* ---------- 02 text-indent と padding-left で揃える ---------- */
p.ind_a {
  font-size: 12px;
  line-height: 1.6;
  text-indent: -1.4em;
  padding-left: 1.4em;
  margin: 0;
}
p.ind_b {
  font-size: 12px;
  line-height: 1.6;
  text-indent: -1.3em;
  padding-left: 1.3em;
  margin: 0;
}

<ul class="notes_grid">
  <li>
    <div class="notes_grid_head">*1</div>
    <div class="notes_grid_body">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</div>
  </li>
  <li>
    <div class="notes_grid_head">*2</div>
    <div class="notes_grid_body">明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</div>
  </li>
  <li>
    <div class="notes_grid_head">*3</div>
    <div class="notes_grid_body">部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</div>
  </li>
  <li>
    <div class="notes_grid_head">※</div>
    <div class="notes_grid_body">引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</div>
  </li>
</ul>

/* ---------- 04 いま：Grid と subgrid で揃える ---------- */
ul.notes_grid {
  display: grid;
  grid-template-columns: auto 1fr; /* 左は記号のいちばん長いものに合わせる */
  gap: 0 0.5em;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
ul.notes_grid li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid; /* どの行も、ul の 2 列にそろう */
  font-size: 12px;
  line-height: 1.6;
}

<ul class="notes_kome">
  <li>赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</li>
  <li>明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</li>
  <li>部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</li>
  <li>引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</li>
</ul>

/* ---------- 05 いま：※ だけなら list-style ---------- */
ul.notes_kome {
  margin: 0;
  padding-left: 1em; /* ※ の幅のぶん */
  list-style: "※";
}
ul.notes_kome li {
  font-size: 12px;
  line-height: 1.6;
}

<ol class="notes_num">
  <li>赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</li>
  <li>明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</li>
  <li>部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</li>
  <li>引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</li>
</ol>

/* ---------- 06 いま：*1、*2 は ol と @counter-style ---------- */
@counter-style notes-asterisk {
  system: extends decimal; /* 1, 2, 3 … と数える */
  prefix: "*";
  suffix: " ";
}
ol.notes_num {
  margin: 0;
  padding-left: 2em; /* *1 の幅のぶん。*10 からは 2.5em くらい */
  list-style: notes-asterisk;
}
ol.notes_num li {
  font-size: 12px;
  line-height: 1.6;
}