【CSSの@とは？】@mediaや@importなどよく使うものまとめ

この記事は以下のようなひとに向けて書いています。

CSSの@を理解するとさまざまなスタイル定義ができるようになるので、頑張って習得していきましょう

【CSSの@とは？】@mediaや@importなどよく使うもの

CSSの「@」の意味

「@」は、CSSでスタイルシートを記述するにあたってのルールを定義するもので「@規則」と呼ばれます。

よく使う@規則

@charset（スタイルシートの文字コード指定）

@charsetは、CSSファイルの文字コードを指定するときに使用します。

スタイルシートの最初に一つだけ記述して使用するため、HTMLの<style>要素の中では使えないので注意しましょう。

■CSS

/* 例: ブラウザに UTF-8 文字セットを使用することを知らせる */
@charset "utf-8";

@import（別のスタイルシートの読み込み）

@importは、別のスタイルシートを読み込むときに使用します。

@importの記述は、url( )関数による書式のほかに、url( )関数を省略した書式でも指定することができるので、以下の記述がすべて同じ意味になります。

■CSS

@import url("sample.css");
@import url('sample.css');
@import url(sample.css);
@import "sample.css";
@import 'sample.css';

また、@importの最後にメディアタイプを記述すると、メディアタイプを指定してスタイルシートを読み込むことができます。

そのときに、メディアタイプを複数指定する場合にはカンマ（ , ）で区切ります。

■CSS

@import url("browse.css") screen,tv;
@import url("mobile.css") sp;
@import url("print.css") print;

入れ子状の@規則

@media（メディアクエリの結果を指定）

@mediaは、スタイルシートを適用する条件を指定することができます。

例えば、スマートフォンサイズの場合と、PCディスプレイサイズの場合で適用するスタイルシートを変更することができます。

■CSS

/* 横幅が 767px 以下であれば */
@media (max-width:767px) { ... }

/* 高さが 600px 以上であれば */
@media (min-height: 600px) { ... }

/* 画面が縦長であれば */
@media (orientation: portrait) { ... }

/* カラー端末であれば */
@media (color) { ... }

/* モノクロ端末であれば */
@mdeia (monochrome) { ... }

/* 解像度が 300dpi 以上であれば */
@media (min-resolution: 300dpi) { ... }

@supports（ブラウザに合わせて処理を振り分け）

@supportsは、ブラウザがCSSの属性や値をサポートしているか否かによって処理を振り分けることができます。

例えば、ブラウザがdisplay: gridをサポートしている場合、サポートしていない場合の振り分けは以下のようになります。

■CSS

/* ブラウザがサポートしている場合 */
@supports (display: grid) {
  div {
    display: grid;
  }
}

■CSS

/* ブラウザがサポートしていない場合 */
@supports not (display: grid) {
  div {
    float: right;
  }
}

条件付きグループ規則とは？

条件付きグループ規則とは、入れ子の@規則のなかにさらに@規則を含めることができます。

また、それらは真か偽と判定されるなにかしらの条件と結びついており、条件が真であれば条件付きグループ規則内の文がすべて適用されます。

@mediaと@supportsは、条件付きグループ規則となります。

@page（印刷時のCSSプロパティを変更）

@pageは、文書を印刷するときに一部のCSSプロパティを変更するために使用します。

変更できるCSSプロパティは、margin,margin-top,margin-bottom,margin-left,margin-right,size,marks,orphans,widowsです。

■CSS

@page { margin-top: 4cm; margin-bottom: 4cm; }

下記のように条件を指定することもできます。

■CSS

/* 最初のページ */
@page :first { margin-right: 4cm; }
/* 右ページ */
@page :right { margin-right: 4cm; }
/* 左ページ */
@page :left { margin-left: 4cm; }
/* 白紙ページ */
@page :blank { margin-left: 4cm; }

@font-face（指定したWebフォントを適用）

@font-faceは、指定の「Webフォント」を使用できるようにします。

Webサイトでテキストを表示するときにインターネット上のフォントを適用できるので、ユーザーのフォント環境に依存せずに意図通りのフォントで表示することができます。

■CSS

@font-face {
font-family: 'use-SourceHanSansJP';
  src: url('font/SourceHanSansJP-Normal.otf') format('opentype');
}

@keyframes（アニメーションのスタイルを定義）

@keyframesは、animationプロパティによるアニメーションのフレーム（または中間地点）のスタイルを定義することができます。

例えば、下記は赤から青に変わるフレームを定義しています。

■CSS

@keyframes myframe {
  from {
    color: red;
  }
  to {
    color: blue;
  }
}

次に、下記では「最初（0%）10×0px の赤」「途中（50%）10×10px の青」「最後（100%）20×10px の緑」の図形をアニメーションで描くフレームを定義しています。

■CSS

@keyframes myframe {
  from {
    width: 10px;
    height: 0px;
    background: red;
  }
  50% {
    width: 10px;
    height: 10px;
    background: blue;
  }
  to {
    width: 20px;
    height: 10px;
    background: green;
  }
}

【CSSの@とは？】@mediaや@importなどよく使うもの｜まとめ

本記事では、CSS初心者向けに「CSSの@の意味から@mediaや@importなどのよく使う＠規則」について説明してきました。

CSSの@を理解するとさまざまなスタイル定義ができるようになり、コーディングの作業効率もアップさせることができます。

初心者の人でもわかるようにまとめてみましたので、わからなくなったときに参考にしてもらえると幸いです。