list-style-type
list-style-type は CSS のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。
マーカーの色は、適用先の要素における色の計算値と同じになります。
わずかな要素 (<li> と <summary>) だけが既定で display: list-item の値を持っています。しかし、 list-style-type プロパティは display の値が list-item に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は <ol> または <ul>) に設定することですべてのリスト項目に適用することができます。
CSS list-style-type Property
❮ Previous Complete CSS Reference Next ❯
Example
Set some different list styles:
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
More "Try it Yourself" examples below.
CSS | list-style-type Property
The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’.
Syntax:
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman| lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none| inherit;Property values:
-
disc:This is the default value. The marker is a filled circle.
Syntax: list-style-type: disc;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: disc;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: disc;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
circle:The marker is a hollow circle.
Syntax: list-style-type: circle;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: circle;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: circle;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
square:The marker is a square.
Syntax: list-style-type: square;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: square;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: square;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
decimal:The marker is a decimal numbers, beginning with 1.
Syntax: list-style-type: decimal;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: decimal;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: decimal;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
lower-roman:The marker is a lowercase roman numerals (i, ii, iii, iv, v, etc.).
Syntax:
list-style-type: lower-roman;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: lower-roman;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
upper-roman:The marker is a uppercase roman numerals (I, II, III, IV, V, etc.).
Syntax:
list-style-type: upper-roman;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: upper-roman;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
lower-greek:The marker is a lowercase classical Greek alpha, beta, gamma, … (?, ?, ?, …).
Syntax:
list-style-type: lower-greek;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-greek;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: lower-greek;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
lower-latin:The marker is a lowercase ascii letters (a, b, c, … z).
Syntax:
list-style-type: lower-latin;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-latin;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: lower-latin;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
upper-latin:The marker is a uppercase ascii letters (A, B, C, … Z).
Syntax:
list-style-type: upper-latin;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: upper-latin;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
-
none:No marker is shown in this mode.
Syntax: list-style-type: none;Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: none;
}
</style>
</head>
<body>
<h2 style = "text-align: center; color: green">
list-style-type: none;
</h2>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Output:
Note: lower-alpha and upper-alpha are same as lower-latin and upper-latin respectively.
Supported Browsers: The browser supported by list-style-type property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 7.0
- Apple Safari 1.0
Article Tags :
CSS
HTML
Web Technologies
CSS-Properties
Practice Tags :
HTML
Read Full Article
CSS: list-style-type property
This CSS tutorial explains how to use the CSS property called list-style-type with syntax and examples.
この記事の目次
- マーカーを消す
- ulのマーカー種類
- ●黒丸
- ◯白丸
- ■四角
- olのマーカー種類
- 1、2、3…
- 01、02、03…
- ⅰ、ⅱ、ⅲ…
- Ⅰ、Ⅱ、Ⅲ…
- 一、二、三…
- a、b、c…
- A、B、C…
- あ、い、う…
- ア、イ、ウ…
- い、ろ、は…
- イ、ロ、ハ…
- α、β、γ…
- マーカーのフォントや色を変える
- マーカーのフォントや色を変える
今回はul/ol/liで作った箇条書きのマーカー種類をlist-style-typeにより変える方法をまとめます。