CSS @ルール：初級者向けの包括的なガイド

こんにちは、ウェブ開発者の卵さんたち！今日は、CSS @ルールの魅力的な世界に飛び込みます。前に聞いたことがないとしても心配しないでください - このチュートリアルが終わるまでに、あなたはこれらの強力なツールをプロのように操ることができるようになります！

CSS @ルールとは？

まずは基本から始めましょう。CSS @ルール（発音は「アットール」）は、CSSにスーパーパワーを与える特別な指示です。これにより、私たちはスタイルが異なる状況でどのように振る舞うかを定義し、アニメーションを作成し、甚至是自定义プロパティを定義することができます。これらを、あなたのウェブページを本当に動的で魅力的にするシークレットソースだと考えてください！

文法

@ルールの文法は非常にシンプルです。常に「@」シンボルで始まり、識別子（ルール名）に続け、デklarationのブロックまたはセミコロンで終わります。以下は一般的な構造です：

@rule-name {
/* ルールの内容 */
}

または、ブロックを必要としない一部のルールの場合：

@rule-name value;

シンプルですね？では、最も一般的で役立つ@ルールをいくつか見てみましょう！

@ルールの種類

CSSには多くの@ルールがあり、それぞれに特別な目的があります。以下に、最も重要ないくつかをまとめた表を示します：

@ルール	目的
@media	デバイスの特性に基づいてスタイルを適用
@keyframes	アニメーションシーケンスを定義
@font-face	自定义フォントの使用を許可
@import	他のCSSファイルからスタイルをインポート
@page	印刷用のページ固有のルールを定義
@supports	ブラウザの機能サポートに基づいてスタイルを適用
@charset	スtylesheetの文字エンコーディングを指定

では、これらのルールのいくつかを例とともに詳しく見てみましょう！

CSS @ルール - @pageの例

@pageルールは、印刷レイアウトを扱う際に特に役立ちます。これにより、印刷されたページのサイズ、余白、その他のプロパティを定義することができます。

@page {
size: A4;
margin: 1cm;
}

@page :first {
margin-top: 2cm;
}

この例では、すべてのページをA4サイズに設定し、1cmの余白を設定しています。また、最初のページには特別に2cmの上余白を設定しています。素晴らしい履歴書を作成しているとしましょう - このルールにより、画面上だけでなく印刷物でも同じように見えます！

CSS @ルール - @keyframesの例

さあ、アニメーションで少し派手にしましょう！@keyframesルールは、ウェブページ上でスムーズで目を引くアニメーションを作成するためのチケットです。

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.bouncy-button {
animation: bounce 1s infinite;
}

このコードはシンプルなバウンドアニメーションを作成します。ボタンは20ピクセル上に移動し、その後下に戻り、無限に繰り返します。ボタンに小さなトランポリンを与えるようなものです！

このアニメーションを使用するには、以下のように要素に適用します：

<button class="bouncy-button">クリックして！</button>

CSS @ルール - @propertyの例

@propertyルールはCSSの新しい追加機能で、特定のタイプ、継承動作、初期値を持つ自定义プロパティ（CSS変数）を定義して使用することを許可します。

@property --main-color {
syntax: '<color>';
inherits: false;
initial-value: #ff0000;
}

.my-element {
background-color: var(--main-color);
}

この例では、自定义プロパティ--main-colorを定義しています。これは色の値であり、親要素から継承されず、初期値は赤です。これにより、CSS変数を操作する際の柔軟性が向上します。

CSS @ルール - ルールリスト

私たちはいくつかの一般的な@ルールをカバーしましたが、探索するものはまだ多くあります。以下に、より包括的なリストを示します：

@ルール	説明
@charset	スtylesheetの文字エンコーディングを指定
@import	他のCSSファイルからスタイルをインポート
@namespace	ネームスペースプレフィックスを宣言
@media	デバイスの特性に基づいてスタイルを適用
@supports	ブラウザの機能サポートに基づいてスタイルを適用
@document	ドキュメントの特性に基づいてスタイルを適用（非推奨）
@font-face	自定义フォントの使用を許可
@keyframes	アニメーションシーケンスを定義
@viewport	ビューポートの特性を制御（主にメタビューポートタグに置き換えられました）
@page	印刷用のページ固有のルールを定義
@counter-style	カウンタースタイルを定義
@font-feature-values	OpenTypeフォント機能の名前付き値を定義
@property	自定义CSSプロパティを定義

これらのルールのそれぞれは、スタイルやウェブページの制御に新しい可能性を開きます。CSSの旅を続ける中で、ますますこれらの強力なツールを利用することになるでしょう。

忘れないでください、CSS @ルールをマスターする鍵は練習です。実験を恐れず、さまざまな組み合わせを試してみてください。誰かが次の大きなウェブデザイントレンドを作るかもしれません！

幸せなコーディングを、そしてスタイルシートにはバグが無いことを祈っています！

Credits: Image by storyset