自分メモ

ulタグできれいに番号付き箇条書きをする方法

番号付き箇条書きをする時に、最初は<ol>タグを使っていたのですが、それだと番号だけ左端のラインの外に揃わずに飛び出してしまうので、その問題を解消するためにググってみたところ<ul>タグを使って番号付き箇条書きをする方法を発見したので覚書のために記載しておきます（オリジナル情報のウェブサイトはページ下に記載してあります）。

かっこのない番号付き箇条書きの場合

1.　HTMLファイルに番号をつけた状態で箇条書きをする

sample.html

<ul class="number">
  <li>
    1. じゅげむじゅげむ　ごこうのすりきれ　かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ　くうねるところにすむところ　やぶらこうじのぶらこうじ　ぱいぽぱいぽぱいぽのしゅーりんがん　しゅーりんがんのぐーりんだい　ぐーりんだいのぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ
   </li>
   <li>
     2. じゅげむじゅげむ　ごこうのすりきれ　かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ　くうねるところにすむところ　やぶらこうじのぶらこうじ　ぱいぽぱいぽぱいぽのしゅーりんがん　しゅーりんがんのぐーりんだい　ぐーりんだいのぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ
   </li>
</ul>

2.　CSSファイルにスタイルを追加する

sample.css

ul.number li {
	list-style:none;
	text-indent: -1.2em;
	padding-left: 1.2em;
	}

かっこのある番号付き箇条書きの場合

1.　HTMLファイルに番号をつけた状態で箇条書きをする

sample.html

<ul class="paren">
  <li>
    （1）じゅげむじゅげむ　ごこうのすりきれ　かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ　くうねるところにすむところ　やぶらこうじのぶらこうじ　ぱいぽぱいぽぱいぽのしゅーりんがん　しゅーりんがんのぐーりんだい　ぐーりんだいのぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ
   </li>
   <li>
    （2）じゅげむじゅげむ　ごこうのすりきれ　かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ　くうねるところにすむところ　やぶらこうじのぶらこうじ　ぱいぽぱいぽぱいぽのしゅーりんがん　しゅーりんがんのぐーりんだい　ぐーりんだいのぽんぽこぴーのぽんぽこなのちょうきゅうめいのちょうすけ
   </li>
</ul>

2.　CSSファイルにスタイルを追加する

sample.css

ul.paren li {
	list-style:none;
	text-indent: -2.5em;
	padding-left: 2.5em;
	}

まとめ

これだと数字だけ左端のラインから飛び出すことなく箇条書きができます。また箇条書きのなかにさらに箇条書きが入っているような場合も簡単にできます。

ポイント

かっこなしと、かっこありはCSSのtext-indentとpadding-leftの値が若干違います。もし字下げがうまく合わない時はこの数字を調節してみてください。

参照ウェブサイト

ありがとうございました。