CSSのアットルールを分かりやすく解説&実践サンプル付き【@rules】
こんにちは!本日はCSSのアットルールについてのお話です。
CSSではスタイルを定義するためのさまざまな方法が用意されています。
その中で、「@」で始まる特殊な構文を持つ「アットルール」は、特定の条件や設定を定義する際に非常に便利です。
今回は主なアットルールについて、初心者の方にも分かりやすく解説していきたいと思います。
目次
アットルールとは
CSSのアットルールとは「@」で始まる特別な命令文で、CSSの挙動を細かく制御したり、条件付きのスタイルを定義したりするために使用されます。
アットルールには、主に以下のような用途があります。
- ・外部リソースの読み込み(例: フォントなど)
- ・条件付きスタイル(例: メディアクエリなど)
- ・アニメーションの定義
では、ここからは具体的なアットルールの種類や記述方法、サンプルコードをご紹介していきます!
アットルールの種類
@charset
CSSファイルの文字エンコーディングを指定します。
例えば複数の文字コードが混在する可能性がある場合や、サーバーやエディタのデフォルト設定がUTF-8以外の場合に有効です。
現在では多くのサーバーやエディタがデフォルトでUTF-8を使用するため@charsetを明示するケースは減少していますが、
文字化けを防ぐ目的で古い環境と互換性を保つ場合に役立つことがあります。
記述を行う場合、必ずCSSファイルの先頭に記述する必要があり、他のルールの前に置く必要があります。
@charset "UTF-8";
@media
例えば画面幅が768px以下の場合に、など特定の条件下でのみスタイルを適用するためのメディアクエリを定義します。
スマートフォン、タブレット、デスクトップなどそれぞれのデバイスに応じたレスポンシブデザインを実現するために重要なアットルールです。
以下のサンプルコードは画面幅が768px以下になったときにp要素の背景色と文字色を変更させる、といったものです。
max-widthを指定した場合は「〜px以下」、min-widthの場合は「〜px以上」と指定することができます。
また@mediaを記述する際は、全体的なスタイル・他のアットルールの後に記述することが推奨されます。
<p>画面幅に応じて色が変わります</p>
p {
/* 背景色 ブルー */
background-color: #99ccff;
/* 文字色 黒 */
color: #000;
width: 300px;
padding: 20px;
text-align: center;
}
/* 画面幅が768px以下の時の条件 */
@media screen and (max-width:768px) {
p {
/* 背景色 ピンク */
background-color:#ff9999;
/* 文字色 白 */
color: #fff;
}
}
@container
コンテナのサイズに応じてCSSの命令を出し分けることができるアットルールです。
前述した@mediaと少し似ていますが、@mediaはメディアのサイズに応じて命令を出し分けるという特徴がある一方、
@containerは要素のサイズに応じて可変させることができるため、より柔軟なレスポンシブ対応が可能となります。
以下のサンプルコードは「.container」の横幅が500px以下の場合に、子孫要素であるpとulを左右配置から上下配置に切り替える、といったものです。
基準となる.containerに「container-typeプロパティ」と「container-nameプロパティ」を設定し、@container以下で切り替えた後のスタイルを適用しています。
<div class="container">
<div class="wrap">
<p>テキストテキストテキストテキストテキストテキスト</p>
<ul>
<li>・リスト</li>
<li>・リスト</li>
<li>・リスト</li>
</ul>
</div>
</div>
.container {
width: 50%;
padding: 10px;
background-color: #ffc;
/* インライン方向(横方向)のサイズに応じる */
container-type: inline-size;
/* コンテナの名前 */
container-name: layout;
}
.container .wrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.container .wrap p {
width: 45%;
background-color: #99ccff;
}
.container .wrap ul {
list-style: none;
width: 45%;
background-color: #ff9999;
}
/* layout(コンテナ)が横幅500px以下になったら */
@container layout (max-width:500px) {
.container .wrap {
/* 子要素を縦に並べる */
flex-direction: column;
}
.container .wrap p {
width: 100%;
margin-bottom: 20px;
}
.container .wrap ul {
width: 100%;
}
}
@containerについてはこちらの記事で詳しく解説しておりますのでぜひご参照ください。
【CSS】コンテナクエリについて / メディアクエリとの違い〜文法までを紹介
@keyframes
CSSアニメーションを作成するためのアットルールで、アニメーションの開始から終了までの変化を定義します。
なおアニメーションを実装するためには、アットルールの前にanimationプロパティを記述してアニメーションの時間や進捗、何度繰り返すかなどの詳細を設定しておく必要があります。
以下のサンプルコードでは要素のwidthが3秒間かけて200pxから300pxに永遠に変化するアニメーションを表現しています。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
animationプロパティについては以下の記事で詳しく紹介しておりますのでぜひ参考にしてみてください。
CSSだけでOK! transition・animationで動き・アニメーションを実装する
@font-face
外部フォントを読み込んで使用するためのアットルールです。
ユーザーの閲覧環境にそのフォントがない場合でも指定したフォントを表示させることができます。
Google FontsやAdobe Fontsと同じWebフォントとして扱うことができるイメージです。
以下はサンプルコードです。
/* font-faceを定義 */
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
}
body {
/* フォントを指定 */
font-family: 'CustomFont', sans-serif;
}
まず@font-face内でfont-familyに対し任意の名前をつけます。
さらにsrcに対し、表示させたいフォントのパス、フォーマットの種類(woff2,woff,ttf,truetype など)を記述します。
最後に、そのフォントを適用したい要素にfont-familyの指定をすればOKです。
記述ができたら、きちんと指定したフォントで表示されているか必ずチェックしましょう。
なお、font-faceの記述を行う場合は@charsetの次、他のアットルールの前に記述するようにしましょう。
@scope
特定の要素の範囲内だけでスタイルを適用するためのアットルールです。
@scopeの後ろの()内に指定したい範囲を記述します。
以下のサンプルコードではクラス「wrap2」の中にある要素にのみ特別に命令を出しています。
もちろん子孫セレクタを使用しても同じように命令が可能ですが、特定の範囲内で多く独自のスタイルを適用したい場合に便利です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
まとめ
CSSのアットルールは、条件付きスタイルの適用やアニメーション、カスタムフォント、スコープ管理などさまざまな用途に活用することができます。
適切に使用することで効率的にCSSの命令が出せたり、メンテナンス性の高いスタイル設計が可能となりますので、ぜひ参考にしてみてください。
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください!