かんたんCSS, リストのマーカー（点）を消す方法（ul, ol, liタグ）

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

デフォルトのマーカーを使うことはあまりないので、CSSの初期化処理でul, ol, liタグに直接、1回だけ記述すればいい。

リストのデフォルトは、黒い点や連番が左端についています。リストはメニューなど使う場面が多く、マーカーが邪魔になることもあるでしょう。また、独自のマーカーを付けることもあります。

今回の作業はCSSでよく使う手法です。これを使わないサイトがないくらい。

マーカーの設定はlist-style

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

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

<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で何もしないデフォルトの状態を見てみましょう。

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

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

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

<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>

を指定して、リストのマーカーの設定を無効化しました。

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

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

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

マーカーがあったところの空白を消したいですね？

まずは、初期状態のCSSを見てみます。

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

いつも使っているmargin, paddingとはちがいますね？ 『inline-start？』『block-start？』ってかんじです。

これをいつもの書き方で表すと、

ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 40px;
}
ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 40px;
}

空白の正体はpadding-leftです。これを0にすれば空白が消えます。

.delete-blank {
    padding-left: 0;
}

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

<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の結果を見てみましょう。

空白が消えました。

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

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

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

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

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

<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の結果を見てみましょう。

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

まとめ

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

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

この作業は、オリジナルのリストマーカーを作成するときの初期化として使います。

まずはデフォルトの設定を消して、独自のマーカーの追加になります。その方法はまた別の機会に。

かんたんCSS margin,padding: 余白の設定とボーダーとの関係

tadtadya.com