検索
ホームページウェブフロントエンドCSSチュートリアルCSS At-Rule とは何ですか? CSS の機能をどのように拡張しますか?

What are CSS At-Rules and How Do They Extend CSS Functionality?

CSS の「@」記号の目的を理解する

CSS の「@」記号は最近注目を集めており、好奇心を刺激しています。これまでこの問題に遭遇していなかった開発者の間でも、非公式には「at-rule」として知られるこの記号は、CSS でのスタイルの適用方法を制御する上で重要な役割を果たします。

歴史的背景

「@」 CSS1 の初期の頃から CSS に存在しており、主に「@import」ルールに使用されていました。 CSS2 と CSS3 の導入により、「@media」および「@font-face」構造で広く認識されるようになりました。

At-Rules の目的

アットルールは、HTML/XML 要素のスタイルを超えて拡張されるブラウザー用の特別な命令です。これらは、次のような CSS のさまざまな側面を制御するメカニズムを提供します。

  • スタイルシートのインポート (@import): これにより、他のファイルからスタイルシートに追加の CSS コードを組み込むことができます。
  • 適用メディア固有のスタイル (@media): メディア クエリを使用すると、特定のメディア タイプ (印刷、モバイルなど) をターゲットにし、それに基づいてスタイルを選択的に適用できます。
  • カスタム フォントの定義 (@font-face): これにより、すべてのコンピューターでネイティブに利用できるわけではないカスタム Web フォントを埋め込むことができ、デバイス間で一貫したフォント レンダリングが保証されます。

セレクターを超えて

特定の HTML/XML を対象とするセレクターとは異なります要素、at ルールは異なるレベルで動作します。これらは、スタイルがブラウザによってどのように適用され、解釈されるかを制御します。

追加の At-Rules

上記の一般的に使用される At-Rule 以外にも、他にも多数のタイプが定義されています以下を含む CSS 内:

  • 条件ルール (@if, @else)
  • キーフレーム アニメーション (@keyframes)
  • ページング メディア (@page)

結論

CSS の「@」記号は、開発者がスタイルシートの機能と制御を拡張できる多用途ツールです。 at-rules の目的と使用法を理解することは、さまざまなシナリオやデバイスに対応する洗練された効率的な CSS コードを作成するために重要です。

以上がCSS At-Rule とは何ですか? CSS の機能をどのように拡張しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
React状態管理にImmerを使用しますReact状態管理にImmerを使用しますApr 18, 2025 am 10:41 AM

状態を利用して、アプリケーションデータを追跡します。ユーザーがアプリケーションと対話するにつれて状態が変更されます。これが発生したら、状態を更新する必要があります

アニメーション化されたファビコンの作成アニメーション化されたファビコンの作成Apr 18, 2025 am 10:35 AM

タブを切り替えたときに目を向ける最初のものです。

Netlify-Hostedサイトでドメインを使用しますNetlify-Hostedサイトでドメインを使用しますApr 18, 2025 am 10:34 AM

Netlifyにはカスタムドメイン用の独自のドキュメントがあります。したがって、このようなものに関する馬の技術ドキュメントを探している場合、それはのソースとして扱われるべきです

擬似コード擬似コードApr 18, 2025 am 10:33 AM

Yonatan Doronは、「Art of Code - なぜより多くの擬似コードを書くべきなのか」というメディアに関する投稿を書きました。擬似コードのファンとして、そのタイトルが大好きです

'は、マリー・コンドの組織治療をgruntに任せてください'は、マリー・コンドの組織治療をgruntに任せてくださいApr 18, 2025 am 10:31 AM

私たちは、WebpackとNPMスクリプトの時代に住んでいます。良いか悪いか、彼らはロールアップ、JSPM、Gulpのビットとともに、バンドリングとタスクランニングのリードを奪いました。しかし

大分裂から分岐します大分裂から分岐しますApr 18, 2025 am 10:27 AM

フロントエンド開発者という用語が好きです。懸念がある場合、それはあなたの仕事の性質をカプセル化します。

ウェブサイトを立ち上げるための初心者の旅ウェブサイトを立ち上げるための初心者の旅Apr 18, 2025 am 10:20 AM

2018年9月、私はWeb開発を学ぶ旅のほんの数ヶ月でした。私が多くの新しい開発者の場合は確かにそうであるように、それは大きな仕事でした

すべての新しいES2019のヒントとトリックすべての新しいES2019のヒントとトリックApr 18, 2025 am 10:19 AM

ECMAScript標準は、ES2019に新機能を追加することで再び更新されました。現在、ノード、Chrome、Firefox、Safariで正式に利用可能になりました

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 中国語版

SublimeText3 中国語版

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

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール