概要へ移動

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

黒丸
  • 牛丼
  • かつ丼
  • 親子丼
白丸
  • 牛丼
  • かつ丼
  • 親子丼
四角
  • 牛丼
  • かつ丼
  • 親子丼
非表示
  • 牛丼
  • かつ丼
  • 親子丼
数字
  1. 牛丼
  2. かつ丼
  3. 親子丼
２桁の数値
  1. 牛丼
  2. かつ丼
  3. 親子丼
アルファベット（小文字）
  1. 牛丼
  2. かつ丼
  3. 親子丼
アルファベット（大文字）
  1. 牛丼
  2. かつ丼
  3. 親子丼
ローマ数字（小文字）
  1. 牛丼
  2. かつ丼
  3. 親子丼
ローマ数字（大文字）
  1. 牛丼
  2. かつ丼
  3. 親子丼
ギリシャ文字
  1. 牛丼
  2. かつ丼
  3. 親子丼
アルメニア語
  1. 牛丼
  2. かつ丼
  3. 親子丼
ジョージア語
  1. 牛丼
  2. かつ丼
  3. 親子丼
非表示
  1. 牛丼
  2. かつ丼
  3. 親子丼
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
li {

    font-size: 1.5em; /* 文字の大きさ */

}
HTML : 適用するHTML
<ul class="parent">

    <li>牛丼</li>

    <li>かつ丼</li>

    <li>親子丼</li>

</ul>
実行結果
  • 牛丼
  • かつ丼
  • 親子丼
CSS : デフォルトCSS
li {

    font-size: 1.5em; /* 文字の大きさ */

}
HTML : 適用するHTML
<ol class="parent">

    <li>牛丼</li>

    <li>かつ丼</li>

    <li>親子丼</li>

</ol>
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

list-style-typeの概要

<li>要素のマーカーの種類を指定する。

親要素である<ol> or <ul>要素に設定する。

<ul>（番号なし）と<ol>（番号あり）により、設定値が異なる。

（表） <ul>要素に対する設定値
設定値表示される結果デフォルト
disc
  • disc
  • 黒丸
○
circle
  • circle
  • 白丸
square
  • square
  • 四角
none
  • none
  • 非表示
（表） <ol>要素に対する設定値
設定値表示される結果デフォルト
decimal
  • decimal
  • 数字
○
decimal-leading-zero
  • decimal-leading-zero
  • ２桁の数値（ゼロで埋められる）
lower-alpha
lower-latin
  • lower-alpha
  • lower-latin
  • アルファベット（小文字）
upper-alpha
upper-latin
  • upper-alpha
  • upper-latin
  • アルファベット（大文字）
lower-roman
  • lower-roman
  • ローマ数字（小文字）
upper-roman
  • upper-roman
  • ローマ数字（大文字）
lower-greek
  • lower-greek
  • ギリシャ文字
armenian
  • armenian
  • アルメニア語
georgian
  • georgian
  • ジョージア語
none
  • none
  • 非表示

<ul>要素に適用

CSS : disc
.parent  {

    list-style-type:    disc;

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼
CSS : circle
.parent  {

    list-style-type:    circle;

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼
CSS : square
.parent  {

    list-style-type:    square;

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼
CSS : none
.parent  {

    list-style-type:    none;

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

<ol>要素に適用

CSS : decimal
.parent  {

    list-style-type:    decimal;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : decimal-leading-zero
.parent  {

    list-style-type:    decimal-leading-zero;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : lower-alpha
.parent  {

    list-style-type:    lower-alpha;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : upper-alpha
.parent  {

    list-style-type:    upper-alpha;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : lower-roman
.parent  {

    list-style-type:    lower-roman;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : upper-roman
.parent  {

    list-style-type:    upper-roman;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : lower-greek
.parent  {

    list-style-type:    lower-greek;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : armenian
.parent  {

    list-style-type:    armenian;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : georgian
.parent  {

    list-style-type:    georgian;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼
CSS : none
.parent  {

    list-style-type:    none;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

Emmet : list

記述Visual Studio Code
listlist-style-type: disc;
listclist-style-type: circle;
listslist-style-type: square;
listdcllist-style-type: decimal;
listllist-style-type: lower-roman;
listulist-style-type: upper-roman;