@counter スタイルのルールを使用して CSS を使用してリスト項目をカスタマイズするにはどうすればよいですか?
リストは Web 開発の重要な部分であり、情報を組織的かつ構造的に提示するために使用されます。 HTML には、順序付きリスト、順序なしリスト、定義リストの 3 種類のリストがあります。ただし、要件に従ってリストを設計する必要がある場合、これらのリストのスタイルを設定するのは難しい場合があります。 CSS は @counter スタイル ルールを提供しており、これによりリスト項目のマークアップをより柔軟かつ創造的な方法でカスタマイズできます。
この記事では、@counter スタイルのルールを使用して、CSS を使用してリスト項目をカスタマイズする方法を学びます。 @counter-style ルールは、事前定義されたスタイル セットの一部ではないカウンター スタイルを定義するために使用され、カウンター値が文字列表現に変換される方法を定義します。
@カウンタースタイルとは何ですか?
@counter-style ルールは、CSS カウンター プロパティと組み合わせて使用できるカウンター スタイルを定義するために使用されます。このルールは、カスタム リスト項目マーカー スタイルを定義するために使用されます。カウンター プロパティを使用すると、増加または減少できます。 :before や :after などの疑似要素のコンテンツを生成するために使用されるカウンター。 ###文法### リーリー
name パラメーターは、定義しているカウンター スタイルの名前を指定するために使用されます。中括弧内で、カウンターの外観を制御するプロパティと値のセットを定義できます。 include −を使用できます
- System
- -10 進数、小文字、大文字のローマ数字など、使用する番号付けシステムを指定します。
- - カウンタの各レベルに使用されるシンボルを指定します。
- -カウンター値の後に追加されるサフィックスを指定します。
- -カウンター値の前に追加するプレフィックスを指定します。
- -カウンター値を表示するときに使用する最小桁数を指定します。
ステップ 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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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

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