【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

【CSS3】リストの行頭アイコン「・」を消す方法

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

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

STEP.1
リストを用意する
まずはリストを作ります。

See the Pen
行頭アイコンを消す1
by shiakisudev (@shiakisu)
on CodePen.

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

See the Pen
行頭アイコンを消す2
by shiakisudev (@shiakisu)
on CodePen.


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

See the Pen
行頭アイコンを消す3
by shiakisudev (@shiakisu)
on CodePen.


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

完成形ソース

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

HTML

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

CSS

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です