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

CSSでリストをスタイリングする方法｜list-style系プロパティの使い方を徹底解説

HTMLのリストには、番号が付く「順序付きリスト（ol）」と、記号が付く「順序なしリスト（ul）」の2種類があります。CSSを使用すると、これらのリスト項目に表示されるマーカー（記号や番号）の種類を自由に変更したり、任意の画像をマーカーとして設定したりすることができます。さらに、マーカーの表示位置も細かく制御可能です。

それでは、具体的なコード例とともに各プロパティの使い方を見ていきましょう。

list-style-type ― マーカーの種類を指定する

list-style-type プロパティは、リスト項目のマーカーの種類を設定するために使用します。円（disc）、四角（square）、ローマ数字、英字など、さまざまなスタイルを指定できます。

コード例

以下は、順序なしリスト（ul）に対して大文字ローマ数字のマーカーを適用した例です。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: upper-roman;
}
</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でリストをスタイリングする方法｜list-style系プロパティの使い方を徹底解説

list-style-image ― 画像をマーカーとして使う

list-style-image プロパティを使用すると、通常の記号や番号の代わりに、指定した画像をリスト項目のマーカーとして表示できます。オリジナリティのあるデザインにしたい場合に便利です。

コード例

以下は、順序なしリスト（ul）と順序付きリスト（ol）の両方に、同じ画像をマーカーとして設定した例です。

<!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でリストをスタイリングする方法｜list-style系プロパティの使い方を徹底解説

list-style-position ― マーカーの表示位置を指定する

list-style-position プロパティは、リスト項目のマーカーを表示する位置を設定します。「outside」を指定するとマーカーはテキストブロックの外側に、「inside」を指定するとテキストブロックの内側（本文の流れの中）に表示されます。

コード例

以下は、outside と inside のそれぞれを適用して、表示位置の違いを比較した例です。

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-position: outside;
}
ul.demo2 {
   list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html>

出力結果

CSSでリストをスタイリングする方法｜list-style系プロパティの使い方を徹底解説


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

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

  2. CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

    ::first-letter疑似要素とは？ CSSでは、::first-letter（ファーストレター）疑似要素を使うことで、要素の最初の一文字だけを自由に装飾できます。雑誌や書籍の冒頭でよく目にする「ドロップキャップ」と呼ばれる演出効果も、追加のHTMLマークアップや画像を用意することなく、CSSだけで手軽に実現可能です。 なお、::first-letterの適用対象となる「最初の文字」は、句読点などの記号、ダイグラフ（合字）、contentプロパティによって生成されるコンテンツなどが存在する場合には変化することがあるため、注意が必要です。 それでは、CSSの::first-letter疑似