アルファベットを振ったliの中にulを入れたい。

liの前に

a.
b.

とアルファベットを振りたいなあと思いました。文章が長くなり改行された際に「a.」の下に文字の回り込みが嫌だったので、文章自体はpadding-leftで左側に幅を取って、後付けのようにアルファベットを振りたいと思いました。

list-style-type: lower-alphaの記述方法を見つけたのですが、reset.cssにlist-style-type: noneがあるので今回はli::beforeで対処することに。

※list-style-typeにはアルファベット以外にも様々な種類があるのでこちらをご参考ください。

list-style-type−スタイルシートリファレンス

結果的にこうなりました。

.demo{
    position:relative;
 }
 
.demo>li::before{
	position: absolute;
	counter-increment: number 1;
	content: counter(number,lower-alpha)'.';
}

今回参考にさせていただいたのは以下サイトです。aの後に「.」を入れたかったので、contentに「'.'」を含めました。省略しましたが、margin-rightなどで幅は調整します。

counterを使って自動ナンバリングを付けるcounterを使って自動ナンバリングを付ける

そして本題の、liの中にulを入れたい。

a.
　　a.
  　b.
b.

こういうことです。が、最初失敗してしまったので備忘録で今回残します。

まずはNGのHTML

<ul class="demo">
    <li>a</li>
	<ul class="demo">
    	<li>a</li>
    	<li>b</li>
    </ul>
	<li>b</li>
</ul>

結果、

a.
　　a.
　　b.
c.

いや、cじゃなくてb...

HTMLにてliの挿入位置を間違えていたのが原因

正解はこちらです。

<ul class="demo">
    <li>a
    	<ul class="demo">
        	<li>a</li>
        	<li>b</li>
        </ul>
    </li>
	<li>b</li>
</ul>

aの</li>の中に、入れ子で閉じないとだめですね。よくよく考えてみたら初歩的なことでした。

いつになったら初歩的問題につまづかなくなるのか…経験を積み上げるのみですね。