【HTML】ＵＬタグでリストの黒丸の表示方法と黒丸を消す方法

HTMLの<UL>タグは、順序のないリスト（Unordered List）を作成するために使用されます。

タグの開始タグと終了タグの間に、リストアイテムを表す<LI>タグを配置します。

黒丸の表示方法

<UL>タグでは、 黒丸（disc）、白丸（circle）、黒い四角（square）を指定することができます。

黒丸（disc）の例

１．以下のように<UL>タグ内に「style=”list-style: disc;”」を追加します。

　　styleを省略した場合は、黒丸が表示されます。

<h4>表示例</h4>
<ul style="list-style: disc;">
<li>孫悟空</li>
<li>亀仙人</li>
<li>クリリン</li>
</ul>

２．HTMLを表示すると以下のようになります。

白丸（circle）の例

１．以下のように<UL>タグ内に「style=”list-style: circle;”」を追加します。

<h4>表示例</h4>
<ul style="list-style: circle;">
<li>孫悟空</li>
<li>亀仙人</li>
<li>クリリン</li>
</ul>

２．HTMLを表示すると以下のようになります。

黒い四角（square）の例

１．以下のように<UL>タグ内に「style=”list-style: square;”」を追加します。

<h4>表示例</h4>
<ul style="list-style: square;">
<li>孫悟空</li>
<li>亀仙人</li>
<li>クリリン</li>
</ul>

２．HTMLを表示すると以下のようになります。

黒丸を消す方法

<UL>タグに記載する方法

１．以下のように<UL>タグ内に「style=”list-style: none;”」を追加します。

<h4>表示例１</h4>
<ul style="list-style: none;">
<li>孫悟空</li>
<li>亀仙人</li>
<li>クリリン</li>
</ul>

２．HTMLを表示すると以下のようになります。

３．左側のパディングを消したい場合は、「padding-left: 0;」を追加します。

<h4>表示例２</h4>
<ul style="list-style: none; padding-left: 0;">
<li>孫悟空</li>
<li>亀仙人</li>
<li>クリリン</li>
</ul>

４．HTMLを表示すると以下のようになります。

CSSに記載する方法

１．以下のようにCSSにも記載できます。

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