リストマーカーの表示位置を変更する方法
list-style-positionプロパティを使うことでリストマーカーをどの位置に表示するかを指定することができます。
指定方法は2つです
- outside リストマーカーをボックスの外側に表示
- inside リストマーカーをボックスの内側に表示
今回作成したコードと見本画像です。わかりやすいようにliタグに背景色をつけています。一目でリストマーカを含むか判断できると思います
indexx.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<ol class="decimal">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ul class="circle">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="square">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>
style.css
.decimal{
list-style-type: decimal;
}
.square{
list-style-type: square;
}
.circle{
list-style-type: circle;
}
ul{
list-style-position: inside;
}
ol{
list-style-position: outside;
}
li{
background-color: aquamarine;
}
リストマーカーに画像を使う方法 list-style-imageプロパティ
list-style-imageプロパティを使うことでリストマーカーを好きな画像に変更することができます。
今回は表示が見切れてしまうためmargin-leftを使って余白を作りました
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<ul class="circle">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="square">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>
style.css
ul{
margin-left: 10px;
list-style-image: url("style.png");
}
自作の画像
リストマーカーをまとめて指定する list-styleプロパティ
list-styleプロパティを使うことでまとめて指定することができます。
リストマーカーに画像とマーカーの表示プロパティの両方を記述した場合画像を優先して表示します。
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<ul class="circle">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="square">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>
style.css
ul{
margin-left: 10px;
list-style: url("style.png") square inside;
}
li{
background-color: aqua;
}
実際の画像