CSS @media @import @page @charset

CSSのルール @media @import @page @charset @keyframes @font-faceの使い方をご紹介します。

@charset

@charsetはスタイルシートファイルで使用するキャラクタセット(文字集合)を指定するスタイルシートルールである。@charsetはスタイルシートファイルの先頭行に記述する。@charsetの前にコメントなどがあってはならない。

スタイルシートファイルの中で日本語を使用する場合、必ず@charsetで文字コードを指定する。本来、@charsetで文字コードを指定しなくてもWebブラウザが自動的に文字コードを判定するはずだが、この判定を誤って文字化けするWebブラウザが多いため。

@charset "UTF-8";

文字コードにはcharset(IANAが割り当てたキャラクタセットのMIME名)を指定する。

@color-profile

color()関数で使用できるカラープロファイルを定義する。

@counter-style

カウンタのスタイルを定義する。

@font-face

フォントをダウンロードして使用するよう指定します。

@font-face {
  font-family: myfont;
  src: url(http://segakuin.com/font/myfont.eot");
}

@font-feature-values

font-variant-alternatesプロパティで共通の名前を使用する。

@import

importは外部ファイルのスタイルシートを読み込みを指定します。

@import {
  url(segakuin.com/css/mystyle.css);
}

@keyframes

アニメーションの流れに沿ったキーフレームのスタイルを定義する。

@media

出力メディア又は出力条件を指定して、適用するCSSプロパティを指定する。

@media media { properties }
@media (condition) { properties }
media
次に示す出力メディアのうち、いずれかを指定する。
メディア
意味
screen 画面
print 印刷又は印刷プレビュー

印刷時又は印刷プレビュー時に適用するCSSプロパティを指定する。

@media print {
  /* properties */
}
condition
条件を指定する。

画面幅が480px以上のときに適用するCSSプロパティを設定する例を次に示す。

@media (min-width:480px) {
 /* properties */
}

OSの設定がダークモードになっているときに適用するプロパティを設定する例を次に示す。

@media (prefers-color-scheme: dark) {
  background-color: black;
  color: white
}

OSの設定がライトモードになっているときに適用するプロパティを設定する例を次に示す。

@media (prefers-color-scheme: light) {
  background-color: white;
  color: black
}
properties
指定した出力メディア又は指定した条件に合致したときに適用するCSSプロパティ

@namespace

CSSスタイルシートで使用するXML名前空間を定義します。

@page

印刷時又は印刷プレビュー時に適用するCSSプロパティを指定する。

@page { properties }
properties
印刷時又は印刷プレビュー時に適用するCSSプロパティ

印刷時には文字色をモノクロにする例を次に示す。

.info {
  color: blue;
}
.warn {
  color: red;
}
@page {
  .info {
    color: black;
  }
  .warn {
    color: black;
  }
}

@page:first

印刷時、最初のページに適用するスタイルシートを指定します。

@page:first { スタイルシート定義 }

印刷時、右のページに適用するスタイルシートを指定します。

@page:right { スタイルシート定義 }

@page:left

印刷時、左のページに適用するスタイルシートを指定します。

@page:left { スタイルシート定義 }

@scroll-timeline

スクロールコンテナ内のスクロールの進行状況によって時間値を決定するアニメーションタイムラインを定義する。

@supports

ウェブ・ブラウザーが特定のCSS機能に対応しているかによって、宣言を指定する。

@supports (property: value) { properties }
@supports not (property: value) { properties }
property
CSSプロパティの名前
value
CSSプロパティの値
properties
適用するプロパティのリスト

ウェブ・ブラウザがグリッドに対応してればグリッドとして表示し、グリッドに対応していなければフローとして表示する例を次に示す。

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

参考文献

World Wide Web Consortium (2022) Media Queries Level 5