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

CSSでlist-style-typeを使ってリストのマーカースタイルを設定する方法

CSSでリストのマーカー（行頭記号・番号）の種類を設定するには、list-style-type プロパティを使用します。このプロパティを活用することで、箇条書きリスト（ul）や番号付きリスト（ol）の表示スタイルを自由にカスタマイズできます。

主な list-style-type の値

  • disc：黒丸（デフォルト値）
  • circle：白丸
  • square：黒い四角形
  • decimal：算用数字（1、2、3…）
  • upper-roman：大文字ローマ数字（Ⅰ、Ⅱ、Ⅲ…）
  • lower-roman：小文字ローマ数字（ⅰ、ⅱ、ⅲ…）
  • upper-alpha／lower-alpha：大文字・小文字のアルファベット
  • none：マーカーを非表示にする

例1：番号なしリスト（ul）に適用する

以下の例では、番号なしリストのマーカーを四角形（square）に設定しています。

<!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でlist-style-typeを使ってリストのマーカースタイルを設定する方法

各項目の先頭に、通常の黒丸ではなく黒い四角形のマーカーが表示されます。

例2：番号付きリスト（ol）に適用する

次に、番号付きリストの番号を大文字ローマ数字（upper-roman）に設定した例を見てみましょう。

<!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-typeを使ってリストのマーカースタイルを設定する方法

項目番号が「Ⅰ、Ⅱ、Ⅲ…」という大文字ローマ数字で表示されます。

まとめ

list-style-type プロパティを使えば、ul・ol どちらのリストでもマーカーの見た目を簡単に変更できます。サイトのデザインに合わせて disc、square、decimal、upper-roman などさまざまな値を試し、読みやすく魅力的なリストを作成しましょう。また、マーカーを消したい場合は none を指定します。

  1. CSSの一般兄弟セレクター（〜）とは？基本構文と使い方を実例で解説

    CSSの一般兄弟セレクター（General Sibling Combinator）は、基準となる要素の後ろに続く兄弟要素をすべて選択するためのセレクターです。基準要素と対象要素が同じ親要素を持つ場合にのみ適用されます。隣接兄弟セレクター（+）が直後の1つの要素だけを選択するのに対し、一般兄弟セレクター（~）は後続する該当要素をすべてまとめて選択できる点が特徴です。基本構文CSS一般兄弟セレクターの構文は以下のとおりです。element ~ element { /* 宣言 */ }波線（~）の左側に基準となる要素、右側に選択したい要素を記述します。これにより、左側の要素より後に現れる右側

  2. CSSで基本のリストをリストグループに変換する方法

    CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>