CSSのルール @media @import @page @charset @keyframes @font-faceの使い方をご紹介します。
@charsetはスタイルシートファイルで使用するキャラクタセット(文字集合)を指定するスタイルシートルールである。@charsetはスタイルシートファイルの先頭行に記述する。@charsetの前にコメントなどがあってはならない。
スタイルシートファイルの中で日本語を使用する場合、必ず@charsetで文字コードを指定する。本来、@charsetで文字コードを指定しなくてもWebブラウザが自動的に文字コードを判定するはずだが、この判定を誤って文字化けするWebブラウザが多いため。
@charset "UTF-8";文字コードにはcharset(IANAが割り当てたキャラクタセットのMIME名)を指定する。
color()関数で使用できるカラープロファイルを定義する。
カウンタのスタイルを定義する。
フォントをダウンロードして使用するよう指定します。
@font-face {
font-family: myfont;
src: url(http://segakuin.com/font/myfont.eot");
}font-variant-alternatesプロパティで共通の名前を使用する。
importは外部ファイルのスタイルシートを読み込みを指定します。
@import {
url(segakuin.com/css/mystyle.css);
}アニメーションの流れに沿ったキーフレームのスタイルを定義する。
出力メディア又は出力条件を指定して、適用するCSSプロパティを指定する。
@media media { properties }@media (condition) { properties }| 値 | 意味 |
|---|---|
| screen | 画面 |
| 印刷又は印刷プレビュー |
印刷時又は印刷プレビュー時に適用するCSSプロパティを指定する。
@media print {
/* properties */
}画面幅が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
}CSSスタイルシートで使用するXML名前空間を定義します。
印刷時又は印刷プレビュー時に適用するCSSプロパティを指定する。
@page { properties }印刷時には文字色をモノクロにする例を次に示す。
.info {
color: blue;
}
.warn {
color: red;
}
@page {
.info {
color: black;
}
.warn {
color: black;
}
}印刷時、最初のページに適用するスタイルシートを指定します。
@page:first { スタイルシート定義 }印刷時、右のページに適用するスタイルシートを指定します。
@page:right { スタイルシート定義 }印刷時、左のページに適用するスタイルシートを指定します。
@page:left { スタイルシート定義 }スクロールコンテナ内のスクロールの進行状況によって時間値を決定するアニメーションタイムラインを定義する。
ウェブ・ブラウザーが特定のCSS機能に対応しているかによって、宣言を指定する。
@supports (property: value) { properties }@supports not (property: value) { properties }ウェブ・ブラウザがグリッドに対応してればグリッドとして表示し、グリッドに対応していなければフローとして表示する例を次に示す。
@supports (display: grid) {
div {
display: grid;
}
}
@supports not (display: grid) {
div {
float: right;
}
}World Wide Web Consortium (2022) Media Queries Level 5