読者です 読者をやめる 読者になる 読者になる

脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

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