HTMLとCSSで箇条書きリストの●（丸）や■（四角）記号を消去する方法

HTMLとCSSで箇条書きリストの●（丸）や■（四角）記号を消す方法

list-style-type プロパティを使う

HTML

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

CSS

ul {
  list-style-type: none;
}

この方法は、すべてのリスト項目に対して記号を消去します。

list-style-image プロパティを使う

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

ul {
  list-style-image: none;
}

padding プロパティとmargin プロパティを使う

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

ul {
  padding-left: 0;
}

ul li {
  margin-left: 1em;
}

この方法は、リスト項目の余白を調整することで記号を隠します。

• シンプルな方法で記号を消去したい場合は、list-style-type プロパティを使う 方法がおすすめです。
• より細かいデザイン調整をしたい場合は、padding プロパティとmargin プロパティを使う 方法がおすすめです。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

/* 1. list-style-type プロパティを使う */
.list-type-none {
  list-style-type: none;
}

/* 2. list-style-image プロパティを使う */
.list-image-none {
  list-style-image: none;
}

/* 3. padding プロパティと margin プロパティを使う */
.list-padding-margin {
  padding-left: 0;
}

.list-padding-margin li {
  margin-left: 1em;
}

このコードをHTMLファイルに保存し、ブラウザで開くと、3つの箇条書きリストが表示されます。

• 最初のリストは、●（丸）記号が消去されています。
• 3番目のリストは、●（丸）記号が消去され、代わりにインデントが設定されています。

実行例

以下の画像は、上記コードを実行した例です。

HTMLとCSSを使って、箇条書きリストの●（丸）や■（四角）記号を消去するには、いくつかの方法があります。どの方法を使うかは、デザインや状況によって異なります。

箇条書き記号を消去するその他の方法

display プロパティを使う

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

ul {
  display: inline;
}

ul li {
  display: inline-block;
  margin-right: 1em;
}

before 疑似要素を使う

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

ul li {
  position: relative;
  padding-left: 1em;

  &::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 0.5em;
    height: 0.5em;
    background-color: black;
  }
}

この方法は、before 疑似要素を使って、リスト項目の前に黒い●（丸）記号を表示することで、デフォルトの記号を隠します。

::marker 疑似要素を使う

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

ul li::marker {
  display: none;
}

この方法は、::marker 疑似要素を使って、リスト項目のデフォルト記号を非表示にします。

• ブラウザの互換性を考慮する場合は、::marker 疑似要素を使う 方法がおすすめです。