【CSS】list-style - リストスタイル

CSSのlist-styleプロパティについて解説します。

検証環境

CSS

macOS

14.1

list-style

list-styleは“リストスタイル”のプロパティです。

リストスタイルの種類や画像、位置を一括設定します。

各項目の個別設定はlist-style-type、list-style-image、list-style-positionを使用します。

【CSS】list-style-type - リストスタイルの種類

【CSS】list-style-image - リストスタイルの画像

【CSS】list-style-position - リストスタイルの位置

基本構文

border-style: 種類|画像 位置;

サンプル

種類

sample.html

<style>
ul {
    ___ih_hl_start
    list-style: circle inside;
    ___ih_hl_end
}
li {
    border: 1px solid red;
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー

画像

sample.html

<style>
ul {
    ___ih_hl_start
    list-style: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/list-style/icon.png') outside;
    ___ih_hl_end
}
li {
    border: 1px solid red;
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー