[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を４段目を同じ位置にしてしまいます。

<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ですね。