CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでリストを整形する方法：順序なしリスト・順序付きリストのスタイル設定

順序なしリスト（ul）と順序付きリスト（ol）を整形するには、list-style-type、list-style-image、list-style-position の各プロパティを使用します。これらを組み合わせることで、マーカーの種類を変えたり、画像を表示したり、位置を調整したりと、リストの見た目を自由にカスタマイズできます。

順序なしリストの整形例

まずは、順序なしリスト（ul）を整形する例を見てみましょう。list-style-type: square; を指定することで、デフォルトの黒丸（disc）ではなく、四角形のマーカーが表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: square;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>

出力結果

CSSでリストを整形する方法：順序なしリスト・順序付きリストのスタイル設定

順序付きリストの整形例

次に、順序付きリスト（ol）を整形する例です。list-style-type: upper-roman; を指定すると、項目番号が大文字のローマ数字（Ⅰ、Ⅱ、Ⅲ…）で表示されます。ほかにも decimal（算用数字）や lower-alpha（小文字アルファベット）など、さまざまな値が用意されています。

<!DOCTYPE html>
<html>
<head>
<style>
ol {
   list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ol>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ol>
</body>
</html>

出力結果

CSSでリストを整形する方法：順序なしリスト・順序付きリストのスタイル設定

画像をマーカーとして設定する例

続いて、list-style-image プロパティを使用し、順序なしリストと順序付きリストの両方に画像をマーカーとして設定する例を見てみましょう。URLで画像を指定するだけで、独自のアイコンを使ったリストが簡単に作成できます。

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>

出力結果

CSSでリストを整形する方法：順序なしリスト・順序付きリストのスタイル設定

このように、CSSのリスト関連プロパティを使いこなすことで、標準的なリストをサイトのデザインに合わせて柔軟にカスタマイズできます。

  1. CSSの::markerセレクターでリストの箇条書きマーカーの色を変更する方法

    ::markerセレクターとはCSSの::marker擬似要素は、リスト項目（<li>）に表示される箇条書きマーカーや番号に対して個別にスタイルを適用できるセレクターです。通常、マーカーの色はテキストの色に連動しますが、::markerを使えばマーカーだけの色やフォントサイズを自由に変更できます。構文CSS ::markerセレクターの基本構文は以下の通りです。Selector::marker { attribute: /*値*/; }例1：基本的な使い方以下の例では、ul要素のリストスタイルを「circle」に設定し、li::markerに対して緑色を指定しています。&l

  2. CSSでリストの箇条書きマーカーをスタイリング＆アニメーション化する方法

    CSSの list-style プロパティを使用すると、順序なしリスト（<ul>）や順序付きリスト（<ol>）の箇条書きマーカー（ブレット）を自由にカスタマイズできます。デフォルトのマーカーを非表示にしたうえで、box-shadow や :hover 疑似クラス、CSSカウンターなどを組み合わせることで、マウスオーバー時に動きのある魅力的なリストを作成できます。list-styleプロパティの基本構文CSSの list-style プロパティは、次のように記述します。li { list-style: /*値*/; }none を指定するとデフォルトのマーカーが消