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

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

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

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

CSSの list-style プロパティは、次のように記述します。

li {
    list-style: /*値*/;
}

none を指定するとデフォルトのマーカーが消え、独自のデザインを適用できるようになります。

例1：ホバー時に影が変化するリスト

以下の例では、list-style: none で標準のブレットを消し、box-shadow と :hover 疑似クラスを組み合わせています。リスト項目にマウスを乗せると、シャドウの色がチャートリュースからブルーへ変化し、文字サイズも拡大してアニメーション的な演出が生まれます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         li {
            margin: 3px 0;
            padding: 2%;
            width: 28%;
            line-height: 1.2%;
            list-style: none;
            border-radius: 5% 0 0 5%;
            box-shadow: -10px 2px 4px 0 chartreuse;
            color: cornflowerblue;
         }
         li:hover {
            box-shadow: -10px 2px 4px 0 blue!important;
            font-size: 1.4em;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>a</li>
         <li>b</li>
         <li>c</li>
         <li>d</li>
      </ul>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。

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

ポイント解説

  • border-radius：左側のみ角丸にすることで、リスト項目に立体感を持たせています。
  • box-shadow：負のX方向オフセットにより、左側に影を配置しています。
  • :hover + font-size：マウスオーバー時の視覚的フィードバックとして機能します。

例2：CSSカウンターを使った番号付きリスト

次の例では、counter-reset と counter-increment を使って独自の連番を生成し、::before 疑似要素で表示しています。ホバー時には内側の影（inset の box-shadow）がライトブルーからライトグリーンへ変化します。

<!DOCTYPE html>
<html>
   <head>
      <style>
         ol {
            list-style: none;
            counter-reset: li;
            overflow: hidden;
         }
         li {
            margin-right: 10%;
            padding: 2%;
            width: 15%;
            float: left;
            line-height: 1.2%;
            font-weight: bold;
            counter-increment: li;
            box-shadow: inset 2px 14px 10px lightblue;
         }
         li:hover {
            box-shadow: inset 6px 14px 10px lightgreen!important;
            font-size: 1.4em;
         }
         li::before {
            content: counter(li);
            color: seagreen;
            display: inline-block;
            width: 40%;
            margin-left: -2em;
         }
      </style>
   </head>
   <body>
      <ol>
         <li>a</li>
         <li>b</li>
         <li>c</li>
      </ol>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。

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

ポイント解説

  • counter-reset / counter-increment：ブラウザ標準の番号ではなく、自由にスタイルできる独自の連番を作成します。
  • ::before疑似要素：content: counter(li) で番号を挿入し、色や位置を細かく制御できます。
  • inset box-shadow：要素の内側に影を描画することで、押し込まれたような奥行き表現が可能です。

まとめ

list-style プロパティでデフォルトのマーカーを制御し、:hover や box-shadow、CSSカウンターを組み合わせれば、JavaScript不要の純粋なCSSだけでインタラクティブなリストUIを実現できます。ナビゲーションメニューや目次など、さまざまな場面で応用してみてください。

  1. CSSでリストの箇条書き（ビュレット）の色だけを変更する方法

    CSSでリストの箇条書き（ビュレット）の色を変更したい場合、::before 疑似要素を使う方法が便利です。通常の color プロパティではテキストごと色が変わってしまうため、「マーカーだけ別の色にしたい」というケースでは、一度デフォルトの箇条書きを消してから独自のビュレットを生成するのが定番のテクニックです。実装のポイント仕組みはシンプルで、以下の2ステップで実現できます。list-style: none; … デフォルトの箇条書きマーカーを非表示にするli::before … 疑似要素でビュレット（Unicode の「\2022」＝ • ）を生成し、color プロパティで好みの色を指定

  2. CSSのclip-pathプロパティで三角形を作成する方法

    三角形は、CSSのclip-pathプロパティを使うことで簡単に作成できます。画像ファイルやSVGに頼らず、純粋なCSSだけで図形を描画できるため、軽量で柔軟なデザイン表現が可能になります。 clip-pathプロパティとは clip-pathプロパティは、要素の表示範囲を切り抜く（クリッピングする）ためのプロパティです。特にpolygon()関数を使用すると、複数の座標点を指定することで任意の多角形を自由に描くことができます。 構文 CSS clip-pathプロパティの基本構文は以下のとおりです。 Selector {     clip-path: