【CSS】@mediaや@supportsなど、@規則と呼ばれる記述について知ろう

スタイルシートを眺めていて、頭にアットマークが付いた記述を見たことがあると思います。
それは@規則と呼ばれるもので、CSSのルールを規定するためのものです。
今回は@規則の種類と使い方について紹介します。

@charset

@charsetは、スタイルシートで使う文字コードを定義します。
必ずファイルの最初に記述する必要があります。
文字コードは、UTF-8、Shift_JIS、EUC-JPなどです。
大文字・小文字の区別はないので、どちらで記述しても大丈夫です。

@media

@mediaはメディアクエリと呼ばれ、スタイルを適用するメディアを条件分岐で指定する役割を持っています。
メディアタイプ（出力対象のデバイスの指定）とメディア特性（サイズなど）を指定することができ、昨今のレスポンシブ対応に必需の機能になっています。

メディアタイプ

メディアタイプの種類は、all（全てのデバイス）、screen（ディスプレイ）、print （印刷）、speech(音声）などがあります。
下記の場合、ディスプレイでは文字サイズが16px、印刷時には20pxになります。

メディア特性

端末の環境を指定することが出来ます。
最もメジャーなのがビューポートの幅（width）や高さ(height)の指定です。
その他は比較的マニアックなものが多いので、必要に応じて確認してみてください。

上記のように指定すると、

• 幅がディスプレイの幅以下かつ681px以上であれば文字サイズが16px
• 幅が680px以下かつ376px以上であれば文字サイズが14px
• 幅が375px以下であれば文字サイズが12px

となります。

HTMLでメディアクエリを書く

ちなみに、メディアクエリはHTMLのlinkタグの属性として記述することも可能です。
その場合は、以下のような記述になります。

@supports

@supportsは、「ブラウザがCSSのプロパティや値に対応していれば@supports内のスタイルを適用し、対応していなければコードを遡って該当するスタイルを適用する」という、サポートに応じた条件分岐の役割を果たす機能を持っています。

上の例の場合、gridをサポートしているブラウザではglidを適用し、対応していないブラウザではflexboxを適用します。
条件として、notやand、orを使用することができます。

まとめ

今回は代表的なものを3種類紹介しましたが、メディアクエリは特に使用頻度の高い@規則だと思います。
レスポンシブ対応をする際などにお役立てください。