LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

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

マーカーの設定は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>

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

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

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

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

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

user agent stylesheet
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にすれば空白が消えます。

CSS
.delete-blank {
    padding-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

空白が消えました。

user agent stylesheetは、ブラウザがHTMLを表示する時の最初のスタイルです。

ボタンは銀色のダサいスタイルになってますよね? あれもuser agent stylesheetで定義されたもの。

user agent stylesheetは、ブラウザだけが使うスタイルで、ふつうのCSSよりもプロパティが細分化されています。

というか、ブラウザは、ふだん書いているCSSをuse agent stylesheetのプロパティに変換していると言ったほうがいいかも。

(本当に変換しているかは分からない。イメージしやすいように言っただけ。)

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

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

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

CSS
.delete-marker-fix {
    list-style: none;
    padding-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-leftを0)

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

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

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

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

コメントを残す

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