目次
@カウンタースタイルとは何ですか?
ホームページ ウェブフロントエンド 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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

ショー、Don' t Tell ショー、Don' t Tell Mar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

NPMコマンドは何ですか? NPMコマンドは何ですか? Mar 15, 2025 am 11:36 AM

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。

See all articles