「CSS」 list-style-positionでリストの内側にマーカーを表示する
環境
Google Chrome 104.0.5112.102
構文
list-style-position: 値;
inside リスト領域の内側にリストマーカーを表示します。
list-style-position は CSS のプロパティで、リスト項目に対する ::marker の位置を指定します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
.cft {
list-style-position:inside;
}
</style>
</head>
<body>
<ul class="cft">
<li>東京</li>
<li>大阪</li>
<li>福岡</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cft {
list-style-position:inside;
}
</style>
</head>
<body>
<ul class="cft">
<li>東京</li>
<li>大阪</li>
<li>福岡</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cft {
list-style-position:inside;
}
</style>
</head>
<body>
<ul class="cft">
<li>東京</li>
<li>大阪</li>
<li>福岡</li>
</ul>
</body>
</html>