かんたんCSS リストのマーカー(点)を消す方法

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

HTMLのul, ol, liタグで作ったリストのマーカーを消す方法は、とても簡単で、ソースコードのサンプルを使って説明するのですぐに終わります。

リストのデフォルトでは、黒い点や連番が左端についています。リストは、メニューなどで応用されて使われるので、マーカーが邪魔になります。また、独自のマーカーを作成することもあります。

このように、リストのマーカーを消す場面は多いです。マーカーの消し方がわからない人のために、わかりやすく簡単に説明します。

リストのマーカーの設定はlist-styleを使う

リストのマーカーの設定は、CSSのlist-styleプロパティを使っています。マーカーを消すには、このプロパティを無効にすればよいだけです。

サンプルコードをで見てみましょう。

ソースコードサンプルのボックスをタップすると(またはボックスにマウスを合わせると)、右上にコピーボタンが出てコードのコピーができます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

HTML
<ul>
<li>ul test 1</li>
<li>ul test 2</li>
<li>ul test 3</li>
</ul>
<ol>
<li>ol test 1</li>
<li>ol test 2</li>
<li>ol test 3</li>
</ol>

ulタグは丸や四角などマーカーは記号になります。olタグは連番がつきます。CSSで何もしないデフォルトの状態を見てみましょう。

  • ul test 1
  • ul test 2
  • ul test 3
  1. ol test 1
  2. ol test 2
  3. ol test 3

予想通りの結果がでました。次に、このマーカーを消します。次のCSSを追加します。

CSS
.delete-marker {
    list-style: none;
}

マーカーを消すクラスを作りました。これをHTMLのul, olタグに追加します。

HTML
<ul>
<li>ul test 1 default</li>
<li>ul test 2 default</li>
<li>ul test 3 default</li>
</ul>
<ul class="delete-marker">
<li>ul test 1</li>
<li>ul test 2</li>
<li>ul test 3</li>
</ul>
<ol>
<li>ol test 1 default</li>
<li>ol test 2 default</li>
<li>ol test 3 default</li>
</ol>
<ol class="delete-marker">
<li>ol test 1</li>
<li>ol test 2</li>
<li>ol test 3</li>
</ol>

ol, ulタグに"list-style:none;"を指定して、リストのマーカーの設定を無効化しました。HTMLの結果を見てみましょう。

  • ul test 1 default
  • ul test 2 default
  • ul test 3 default
  • ul test 1
  • ul test 2
  • ul test 3
  1. ol test 1 default
  2. ol test 2 default
  3. ol test 3 default
  1. ol test 1
  2. ol test 2
  3. ol test 3

マーカーが消えました。でも、もともとマーカーがあったところに空白ができてしまいました。

マーカーのあった場所の空白を消す

マーカーがあったところに空白ができているので、これを消したいですね?

じつはこれは、ul,olのpaddingやliのmargin, paddingで作られた空白です。リストのマーカーと文字列の間の間隔は、paddingやmarginを使うことになっています。

サンプルコードの空白は、本サイトの全体のCSS設定がそのまま反映されています。その設定は、ol, ulのpadding-leftを使っています。

空白を取り除きたければ、padding, marginのleftサイズを0にします。CSSに次のコードを追加します。

CSS
.delete-blank {
    padding-left: 0;
}
.delete-blank li {
    margin-left: 0;
}

空白を消すクラスを作りました。これをHTMLのul, olタグに追加します。

HTML
<ul>
<li>ul test 1 default</li>
<li>ul test 2 default</li>
<li>ul test 3 default</li>
</ul>
<ul class="delete-marker delete-blank">
<li>ul test 1</li>
<li>ul test 2</li>
<li>ul test 3</li>
</ul>
<ol>
<li>ol test 1 default</li>
<li>ol test 2 default</li>
<li>ol test 3 default</li>
</ol>
<ol class="delete-marker delete-blank">
<li>ol test 1</li>
<li>ol test 2</li>
<li>ol test 3</li>
</ol>

HTMLの結果を見てみましょう。

  • ul test 1 default
  • ul test 2 default
  • ul test 3 default
  • ul test 1
  • ul test 2
  • ul test 3
  1. ol test 1 default
  2. ol test 2 default
  3. ol test 3 default
  1. ol test 1
  2. ol test 2
  3. ol test 3

空白が消えました。

リストのマーカーを消すサンプルコード(最終版)

ここまでは、順を追ってサンプルコードを書いていったので、『マーカを消す』と『空白を消す』の設定をクラスを分けて別々に書いていきました。

じっさいは、この2つをまとめて書いたほうが良いです。CSSを書き直します。次のコードを追加します。

CSS
.delete-marker-fix {
    list-style: none;
    padding-left: 0;
}
.delete-marker-fix li {
    margin-left: 0;
}

空白を消すクラスを作りました。これをHTMLのul, olタグに追加します。

HTML
<ul>
<li>ul test 1 default</li>
<li>ul test 2 default</li>
<li>ul test 3 default</li>
</ul>
<ul class="delete-marker-fix">
<li>ul test 1</li>
<li>ul test 2</li>
<li>ul test 3</li>
</ul>
<ol>
<li>ol test 1 default</li>
<li>ol test 2 default</li>
<li>ol test 3 default</li>
</ol>
<ol class="delete-marker-fix">
<li>ol test 1</li>
<li>ol test 2</li>
<li>ol test 3</li>
</ol>

HTMLの結果を見てみましょう。

  • ul test 1 default
  • ul test 2 default
  • ul test 3 default
  • ul test 1
  • ul test 2
  • ul test 3
  1. ol test 1 default
  2. ol test 2 default
  3. ol test 3 default
  1. ol test 1
  2. ol test 2
  3. ol test 3

マーカーと空白の2つが消えました。

ul, olタグでlist-styleで無効化しましたが、liタグでも同じことができます。指定方法も同じで、『list-style:none;』です。

まとめ

リストのマーカーを消す方法は、

  • マーカーのスタイルを無効化(list-style:none;)
  • マーカーと文字の間隔を0にする(padding, marginを0)

だけで、CSSだけでできます。むずかしいことはありませんね?

この作業は、オリジナルのリストマーカーを作成するときの初期化処理として使います。まずはデフォルトの設定を消して、独自のマーカーの追加になります。その方法はまた別の機会にしたいと思います。

 

HTML&CSSでおすすめの本
post-cta-image

たくさんあるなかで、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容をモノにすれば、ほかの本は必要ありません。あとは自分の力で、書籍を使わずに、インターネット上にある情報だけで学んでいけるでしょう。


HTML&CSSの厳選本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!