こんにちは、ユアサです。
アームズに入社してからCSSでのスタイル調整はだいぶ慣れてきました。ですが、以前CSSファイルを触っているときに、冒頭に「@」が付いている見慣れないものを発見し、見つけた当時は何のための記述なのか全然理解していませんでした。「@import」はアームズでも頻繁に使用されていたので知ってはいましたが、他にも種類があることを知らなかったので、今回は自分の把握していない「@」の記述のルールを備忘録としての意味も込めて書きまとめていきます。
@で始まる「アットルール」
CSSで記述される@から始まる書式は「アットルール」と呼ばれています。CSSでスタイルシートを記述するにあたってのルールを定義するものです。アットマークから始まり、次のセミコロンもしくは次のCSSブロックのどちらかが現れるまでの部分からなります。
数が多いので、今回は比較的使用頻度が高いものをまとめます。
各アットルールについて
@charset
外部CSSファイルの文字コードを指定する際に使用されます。このアットルールは外部CSSファイルの先頭に一つだけ記述します。このアットルールはスタイルシートのエンコーディング文字を設定でき、CSSプロパティで非ASCII文字を使う際にも便利です。
複数の@charsetが定義されている場合は最初のものだけ使用されます。またHTMLのstyle属性や文字セットが関係しているstyle要素の中では使用ができません。
使用例
@charset "UTF-8"; @charset "iso-8859-15";
@import
別ファイルの外部スタイルシートを取り込む際に使用されます。style要素内や外部スタイルシートの中で記述することができますが、他アットルールや宣言ブロックよりも前に記述する必要があります。（ただし「@charset」がある場合はその直後に記述します。）
また特定のメディアに対応した@importを指定することができ、その場合はURLの後でカンマ区切りのメディアクエリを指定して書きます。
使用例
@import 'custom.css';
@import url('style.css'); // 外部スタイルシート
@import url('style.css') print; // 外部スタイルシート+特定のメディアに対応
@media
それぞれにメディアタイプを指定してスタイルを適用する際に使用されます。style要素内や外部スタイルシートの中で記述することができます。（記述が無い場合は全メディアで同様のスタイルが適応）
@mediaで指定できるメディアタイプの値は、link要素やstyle要素のmedia属性で指定できる値と同じです。
使用例
@media screen, tv {
body {
font-size: 16px;
}
}
@media handheld {
body {
background: #000000; color: #ffffff;
}
}
// 他にもaural（音声合成装置）、projection（プロジェクターやOperaの）などの値もあります。
@mixin
よく利用するCSSスタイルを定義しておき、別の場所で使いまわせるようにすることができます。また、その定義のスタイルに値を引き渡すことができる引数も使用することが可能です。
バックエンドなどでよく使用される定義関数のような使い方に近いです。
今回挙げているアットルールの中で、これは他とは違いSASSの記法となっています。
使用例
@mixin mainStyle {
width: 100%;
margin: 30px 15px;
color: red;
}
.subStyle01 {
@include mainStyle;
background-color: #f6f6f6;
}
.subStyle02 {
@include mainStyle;
border: 3px solid #000000;
}
// @includeで対象のスタイルを読み込み
まとめ
他にもアットルールは種類が多数ありますが、今回は業務内でもよく使われている・よく見かけるものをピックアップしてまとめました。
実はこの記事の最後に出てきた@mixinをつい最近CSSファイル内で初めて発見したのがきっかけで、アットルールについて改めて知っておこうと思い記事にしました。他のものも使用できるタイミングがあれば積極的に使っていきたいと思います。
最後まで読んでいただきありがとうございました（^人^）
