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

CSSでリストを整形する方法：順序なしリスト・順序付きリストのスタイリング完全ガイド

CSSでは、list-style-type、list-style-image、list-style-positionといったプロパティを使うことで、順序なしリスト（ul）や順序付きリスト（ol）のスタイルやマーカーの位置を自由にカスタマイズできます。

これらのプロパティを活用すれば、デフォルトの「●」や「1.」といった記号を、ローマ数字、アルファベット、四角形、さらには独自の画像に変更することも可能です。本記事では、具体的なコード例とともにリストの整形方法をわかりやすく解説します。

list-styleプロパティの基本構文

list-styleは、上記3つの個別プロパティ（type / image / position）を一括して指定できるショートハンドプロパティです。基本的な構文は以下の通りです。

セレクタ {
    list-style: /*値*/
}

例えば list-style: circle inside; のように指定すると、マーカーが「○」になり、テキストの内側に配置されます。

例1：順序付きリスト（ol）のスタイリング

次の例では、list-style-typeに「upper-roman」（大文字ローマ数字）を指定し、順序付きリストの番号表示を変更しています。あわせてline-heightで行間も調整しています。

<!DOCTYPE html>
<html>
<head>
<style>
ol {
    list-style: upper-roman;
    line-height: 150%;
}
</style>
</head>
<body>
<h2>最新のC#バージョン</h2>
<ol>
<li>C# 8.0</li>
<li>C# 7.3</li>
<li>C# 7.2</li>
<li>C# 7.1</li>
<li>C# 7.0</li>
</ol>
</body>
</html>

出力結果

このコードを実行すると、リスト項目が「Ⅰ」「Ⅱ」「Ⅲ」…という大文字ローマ数字で表示されます。

CSSでリストを整形する方法：順序なしリスト・順序付きリストのスタイリング完全ガイド

例2：順序なしリスト（ul）のスタイリング

次の例では、ネストされた（入れ子の）順序なしリストに対して「circle inside」を適用し、さらに:last-child擬似クラスを使って最後の項目だけマーカーを「square」（四角形）に変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
ul > ul {
    list-style: circle inside;
}
li:last-child {
    list-style-type: square;
}
</style>
</head>
<body>
<h2>プログラミング言語</h2>
<ul>
<li>C++は、Bjarne StroustrupによってC言語の拡張として開発されたプログラミング言語です。</li>
<li>Javaは、James Goslingによって開発されたプログラミング言語です。
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
</li>
<li>Scalaは、一般的なプログラミングパターンを簡潔かつエレガントで型安全な方法で表現できるよう設計された、モダンなマルチパラダイム言語です。</li>
</ul>
</body>
</html>

出力結果

このコードを実行すると、入れ子の子リストは白抜きの丸（circle）マーカーがテキストの内側に表示され、親リストの最後の項目のみ黒い四角（square）マーカーで表示されます。

CSSでリストを整形する方法：順序なしリスト・順序付きリストのスタイリング完全ガイド

主なlist-style-typeの値一覧

  • disc：塗りつぶしの円（デフォルト）
  • circle：白抜きの円
  • square：塗りつぶしの四角形
  • decimal：1、2、3…（算用数字）
  • lower-roman / upper-roman：小文字・大文字のローマ数字
  • lower-alpha / upper-alpha：小文字・大文字のアルファベット
  • none：マーカーを非表示にする

まとめ

CSSのlist-style系プロパティを使えば、リストの見た目を簡単にカスタマイズできます。list-style-typeでマーカーの種類を、list-style-positionでマーカーの位置（inside / outside）を、list-style-imageで画像マーカーをそれぞれ制御できます。デザインに合わせてリストを整形し、より読みやすいコンテンツを作成しましょう。

  1. CSSでレスポンシブ対応の価格表を作成する方法【サンプルコード付き】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブ対応の価格表（料金テーブル）を簡単に作成できます。本記事では、メディアクエリとfloatレイアウトを組み合わせた実装方法を、実際に動作するサンプルコードとともに分かりやすく解説します。レスポンシブ価格表のサンプルコード以下は、無料プランと上位プランの2つの価格表を並べて表示し、画面幅が狭くなると自動的に縦積みレイアウトへ切り替わる完全なHTML・CSSコードです。<!DOCTYPE html> <html> <head> <meta name="viewport&qu

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

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