【HTML & CSS】リスト要素の行頭アイコン「・」を消す方法

目次へ

リスト要素の行頭アイコン「・」を消す方法

この記事では、リストの行頭アイコン「・」を消す方法を順におって説明していきます。
この記事のやり方はul要素だけでなく、ol要素の場合でも有効です。

STEP.1

リストを用意する

まずはリストを作ります。

STEP.2

アイコン「・」を消す

「list-style:none;」を付与することによってアイコン「・」を消すことが出来ます。

STEP.3

スペースを詰める。

アイコン「・」を消した後にスペースも消したい場合は「padding-left:0px;」を付与します。

これでアイコン「・」を削除して、アイコンが在った分のスペースも削除することが出来ました。完成です。

ソースを以下に抜粋しておきます。

HTML

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

CSS

ul{
  list-style:none;
  padding-left:0px;
}

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！