目次
@カウンタースタイルとは何ですか?
ホームページ ウェブフロントエンド CSSチュートリアル @counter スタイルのルールを使用して CSS を使用してリスト項目をカスタマイズするにはどうすればよいですか?

@counter スタイルのルールを使用して CSS を使用してリスト項目をカスタマイズするにはどうすればよいですか?

Sep 10, 2023 pm 09:25 PM

如何使用 @counter-style 规则使用 CSS 自定义列表项?

リストは Web 開発の重要な部分であり、情報を組織的かつ構造的に提示するために使用されます。 HTML には、順序付きリスト、順序なしリスト、定義リストの 3 種類のリストがあります。ただし、要件に従ってリストを設計する必要がある場合、これらのリストのスタイルを設定するのは難しい場合があります。 CSS は @counter スタイル ルールを提供しており、これによりリスト項目のマークアップをより柔軟かつ創造的な方法でカスタマイズできます。

この記事では、@counter スタイルのルールを使用して、CSS を使用してリスト項目をカスタマイズする方法を学びます。 @counter-style ルールは、事前定義されたスタイル セットの一部ではないカウンター スタイルを定義するために使用され、カウンター値が文字列表現に変換される方法を定義します。

@カウンタースタイルとは何ですか?

@counter-style ルールは、CSS カウンター プロパティと組み合わせて使用​​できるカウンター スタイルを定義するために使用されます。このルールは、カスタム リスト項目マーカー スタイルを定義するために使用されます。カウンター プロパティを使用すると、増加または減少できます。 :before や :after などの疑似要素のコンテンツを生成するために使用されるカウンター。 ###文法### リーリー

name パラメーターは、定義しているカウンター スタイルの名前を指定するために使用されます。中括弧内で、カウンターの外観を制御するプロパティと値のセットを定義できます。 include −

を使用できます

    System
  • -10 進数、小文字、大文字のローマ数字など、使用する番号付けシステムを指定します。

  • Symbol
  • - カウンタの各レベルに使用されるシンボルを指定します。

  • Suffix
  • -カウンター値の後に追加されるサフィックスを指定します。

  • Prefix
  • -カウンター値の前に追加するプレフィックスを指定します。

  • Pad
  • -カウンター値を表示するときに使用する最小桁数を指定します。

    CSS で @counter-styles ルールを使用する手順
CSS で @counter-styles ルールを使用する手順は次のとおりです -

ステップ 1: 順序付きリストを作成する

最初のステップは、順序付きリストを作成し、独自のリスト項目タグを使用してカスタマイズすることです。以下の例では、デフォルトの番号付けシステムの代わりにローマ数字を使用します。以下はリストの HTML コードです −

リーリー

ステップ 2: @counter スタイルを定義する

リーリー

上記のコードでは、my-numerals という名前のカウンター スタイルを定義し、システム プロパティを upper-roman に設定しています。これは、カウンターがリスト内で大文字のローマ数字を使用するように設定されることを意味します。また、シンボルのプロパティを I から X までのローマ数字の文字列に設定します。

ステップ 3: CSS スタイル

リーリー

上記のコードでは、counter-reset 属性が ol 要素のセクションに設定されています。これは、カウンターが 0 から開始することを意味します。ここでは、各 li 要素のセクションの counter-increment 属性も設定します。

例 1

は次のように翻訳されます:

例 1

リーリー

上の例では、@counter-style ルールを使用して my-roman という名前のカスタム カウンター スタイルを定義しました。ここでは、大文字のローマ数字を使用するためにシステム プロパティを upper-roman に設定し、シンボルのプロパティを I から X までのローマ数字の文字列にします。

この後、counter-reset 属性を使用してカスタム カウンタ スタイルを順序付きリストに適用し、counter-increment 属性を使用して各リスト項目のカウンタをインクリメントし、list-style 属性の項目タグを使用してデフォルトのリストを削除しました。 。

最後に、ローマ数字を使用してカスタム リスト項目マークアップを表示するには、content 属性と counter 関数 (カウンターの名前 (この場合はセクション) の 2 つのパラメーターを受け取ります) を介して :before 疑似要素を使用します。およびカウンタのスタイル名 (この場合はローマ数字))。

例 2

の中国語訳は次のとおりです:

例 2

リーリー

上記の例では、list-style 属性を使用して、順序なしリスト要素のデフォルトのリスト項目マークアップを削除しました。さらに、:before 擬似要素も使用して、content 属性と空の文字列を利用してリスト項目を表示します。

画像が正しく表示されるように表示属性を inline-block に設定し、幅と高さの属性をマーカー画像のサイズに設定しました。タグ付けされた画像の URL を指定するには、background-image 属性を使用し、画像の重複を防ぐために、background-repeat 属性を使用します。最後に、margin-right プロパティを使用して画像の右側にマージンを追加しました。

###結論###

HTML リストを扱う場合、CSS で @counter-style ルールを使用してリスト項目タグの外観をカスタマイズできます。このルールは、順序付きリストのカスタム スタイルを定義する簡単かつ柔軟な方法を提供します。 @counter スタイルのルールの構文には、システム、シンボル、サフィックス、プレフィックス、パッドなどのいくつかのパラメーターが含まれています。これらのパラメータを使用すると、リスト項目マーカーの外観を変更できます。 @counter スタイル ルールを使用すると、現在のプロジェクト設計のニーズに合ったリスト項目マークアップを簡単に作成できます。

以上が@counter スタイルのルールを使用して CSS を使用してリスト項目をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

それは' Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

Redwood.jsと動物相を使用してイーサリアムアプリを構築します Redwood.jsと動物相を使用してイーサリアムアプリを構築します Mar 28, 2025 am 09:18 AM

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

ブラウザから有効なCSSプロパティ値を取得できますか? ブラウザから有効なCSSプロパティ値を取得できますか? Apr 02, 2025 pm 06:17 PM

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

CI/CDで少し CI/CDで少し Apr 02, 2025 pm 06:21 PM

「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

WordPressブロックエディターでのマークダウンとローカリゼーションを使用します WordPressブロックエディターでのマークダウンとローカリゼーションを使用します Apr 02, 2025 am 04:27 AM

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか?

レスポンシブデザインのブラウザを比較します レスポンシブデザインのブラウザを比較します Apr 02, 2025 pm 06:25 PM

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

See all articles