[HTML/CSS]<li>タグで出てくる点を消したり、自動インデント下げを無効化する方法
liタグの点と自動インデント下げをなくす方法
結論から言うと以下で対応できます
htmlの属性として埋め込む場合
<li style="list-style: none; margin-left: -20px;">hogehoge</li>
cssで設定する場合
li.no-li-indent { list-style: none; margin-left: -20px; }
実例を踏まえて説明すると...
例えば普通に四段くらい掘り下げる以下のようなコードを書くと、
<ul> <li>一段目A</li> <li>一段目B</li> <ul> <li>二段目A</li> <ul> <li>確認項目(三段目A)</li> <ul> <li>確認項目①(四段目A)</li> <li>確認項目②(四段目B)</li> <li>確認項目③(四段目C)</li> </ul> </ul> </ul> <li>一段目C</li> </ul>
↓
- 一段目A
- 一段目B
- 二段目A
- 確認項目(三段目A)
- 確認項目①(四段目A)
- 確認項目②(四段目B)
- 確認項目③(四段目C)
- 一段目C
こうなってちょっと見にくいですね。
ここで三段目Aを4段目を同じ位置にしてしまいます。
<ul> <li>一段目A</li> <li>一段目B</li> <ul> <li>二段目A</li> <ul> <li>確認項目(三段目A)</li> <li>確認項目①(四段目A)</li> <li>確認項目②(四段目B)</li> <li>確認項目③(四段目C)</li> </ul> </ul> <li>一段目C</li> </ul>
↓
- 一段目A
- 一段目B
- 二段目A
- 確認項目(三段目A)
- 確認項目①(三段目B)
- 確認項目②(三段目C)
- 確認項目③(三段目D)
- 一段目C
ここで確認項目(三段目A)の点を外します。
<ul> <li>一段目A</li> <li>一段目B</li> <ul> <li>二段目A</li> <ul> <li style="list-style: none;">確認項目(三段目A)</li> <li>確認項目①(四段目A)</li> <li>確認項目②(四段目B)</li> <li>確認項目③(四段目C)</li> </ul> </ul> <li>一段目C</li> </ul>
↓
- 一段目A
- 一段目B
- 二段目A
- 確認項目(三段目A)
- 確認項目①(四段目A)
- 確認項目②(四段目B)
- 確認項目③(四段目C)
- 一段目C
違和感ありまくりなので、確認項目(三段目A)の自動インデントを無効、というか左へずらします。
<ul> <li>一段目A</li> <li>一段目B</li> <ul> <li>二段目A</li> <ul> <li style="list-style: none; margin-left: -20px;">確認項目(三段目A)</li> <li>確認項目①(四段目A)</li> <li>確認項目②(四段目B)</li> <li>確認項目③(四段目C)</li> </ul> </ul> <li>一段目C</li> </ul>
↓
- 一段目A
- 一段目B
- 二段目A
- 確認項目(三段目A)
- 確認項目①(四段目A)
- 確認項目②(四段目B)
- 確認項目③(四段目C)
- 一段目C
下線なんかも加えるともっと見やすくなりますね。
- 一段目A
- 一段目B
- 二段目A
- 確認項目(三段目A)
- 確認項目①(四段目A)
- 確認項目②(四段目B)
- 確認項目③(四段目C)
- 一段目C
CSSで書く場合には
li.no-li-indent { list-style: none; margin-left: -20px; text-decoration: underline; }
<li style="list-style: none; margin-left: -20px; text-decoration: underline;">確認項目(三段目A)</li> ↓ <li class="no-li-indent">確認項目(三段目A)</li>
とすればOKです。こちらの方が簡単だし使い回しが出来るのでbetterですね。