HTML
CSS

「HTML」 <li>の黒い丸(・)と空白(インデント)をけす方法

index.html
<link href="css/main.css" rel="stylesheet" type="text/css">

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

HTMLは上のコードを使っていきます。

結論、こうやる

main.css
ul {
  padding: 0px;
}

li {
  list-style-position: inside;
  list-style-type: none;
}

2.7.gif

解説

list-style-position: inside;

main.css
li {
  list-style-position: inside;
}


list-style-positionは、リストマーカーの開始位置を指定するプロパティ。リストマーカーって黒丸の事ね。

初期値はoutside。それをinsideにすると、リストマーカーも一緒にインデントされる。

1.PNG
↓こうなる
2.PNG

list-style-type: none;

main.css
li {
  list-style-position: inside;
  list-style-type: none;
}

list-style-typeは、リストマーカーのデザインを変更するプロパティ。

初期値はdisc(黒丸)です。それをnoneにした。noneにすると、リストマーカーは表示されない。

4.PNG
↓こうなる
5.PNG

padding: 0px;

main.css
ul {
  padding: 0;
}

li {
  list-style-position: inside;
  list-style-type: none;
}

HTMLの<ul>は、初期でpaddin-left : 40pxと設定されている。
それをpadding: 0で消しただけです。

6.PNG
↓こうなる
7.PNG

以上。