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

CSSのlist-styleショートハンドプロパティの使い方を徹底解説

list-styleプロパティとは

CSSのlist-styleプロパティは、リスト要素のマーカー（行頭記号）に関するスタイルをまとめて指定できるショートハンド（省略形）プロパティです。この1つのプロパティを書くだけで、以下の3つの個別プロパティを同時に設定できます。

  • list-style-type：マーカーの種類（算用数字、ローマ数字、アルファベット、中黒など）
  • list-style-position：マーカーを表示する位置（テキストボックスの内側か外側か）
  • list-style-image：マーカーとして使用する画像ファイル

個別に3つのプロパティを書く必要がないため、コードが簡潔になり、メンテナンス性も向上します。

基本構文

list-styleプロパティの基本的な構文は次のとおりです。

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

値はスペース区切りで複数指定でき、順番は任意です。また、一部の値だけを指定することも可能で、省略された値には初期値が適用されます。

コード例1：upper-alpha と inside を組み合わせる

次の例では、最初の<ol>要素に対して「大文字アルファベット（upper-alpha）」のマーカーと「inside（内側表示）」の位置を一括で指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-size: 1.33em;
    background: linear-gradient(to right, orange, lightgreen, lightblue);
}
ol:first-of-type {
    box-shadow: inset 0 0 23px rgb(20,255,40);
    list-style: upper-alpha inside;
}
ul {
    list-style: circle;
}
</style>
</head>
<body>
<ol>
<li>Demo</li>
</ol>
<ol>
<li>Demo</li>
</ol>
<ul>
<li>demo</li>
<ol>
<li>demo</li>
</ol>
</ul>
</body>
</html>

表示結果

上記のコードを実行すると、ブラウザには次のように表示されます。

CSSのlist-styleショートハンドプロパティの使い方を徹底解説

最初のリストではマーカーが「A」という大文字アルファベットになり、テキストの内側に配置されているのが確認できます。一方、<ul>要素にはcircle（白抜きの丸）が適用されています。

コード例2：lower-roman でローマ数字のマーカーを指定する

続いて、順序付きリスト全体に「小文字ローマ数字（lower-roman）」を指定した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
ol {
    width: 40%;
    list-style: lower-roman;
}
li {
    border: thin solid hotpink;
    margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Popular Sports</h2>
<ol>
<li>Football</li>
<li>Cricket</li>
<li>Tennis</li>
<li>Hockey</li>
<li>Volleyball</li>
<li>Basketball</li>
</ol>
</body>
</html>

表示結果

このコードの出力は次のようになります。

CSSのlist-styleショートハンドプロパティの使い方を徹底解説

各項目の先頭に「i」「ii」「iii」といった小文字ローマ数字が表示され、リスト全体にエレガントな印象を与えています。

まとめ

list-styleプロパティを使えば、マーカーの種類・位置・画像を1行で指定でき、リストのスタイリングを効率化できます。よく使われる値としては、disc、circle、square、decimal、lower-roman、upper-alphaなどがあり、noneを指定すればマーカーを非表示にすることも可能です。デザインに合わせて柔軟に活用しましょう。

  1. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &