CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS @pageルール CSS @keyframesルール

CSS @mediaルール

@media ルールは、単一のスタイルシート内で複数のメディアタイプにスタイルルールを定義するために使用できます。後には、カンマで区切られたメディアタイプリストとルールを含むブロックが続きます。

メディアタイプごとに異なるスタイルを定義するために @media ルールを使用できます。

@mediaは異なるスクリーンサイズに異なるスタイルを設定するために使用できます。特に、レスポンシブデザインのページを設定する必要がある場合、@mediaは非常に役立ちます。

ブラウザのサイズを変更する過程で、ページもブラウザの幅と高さに応じて再レンダリングされます。

CSS @media 规則の使用文法

この規則の文法は以下の通りです：

@media　media　type,...　{
　　　　/*　media-specific　rules　*/
}

異なるメディアに異なるCSSスタイルを適用することもできます：

<link　rel="stylesheet"　media="mediatype　and|not|only　(media　feature)"　href="style.css">

以下の例では、@media属性の使用方法を示しています。

例

@media　screen{
body　{
color:　#32cd32;
		　　font-family:　Arial,　sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height:　1。2;
}
}

テストを見て‹/›

注意：スタイルシートに適用されるすべてのメディアタイプに適用されるスタイル規則@mediaは、CSSの内部規則@mediaに適用されます。2。1中で無効

メディアタイプ

値	説明
all	すべてのデバイスに適用されます。
aural	廃止されました。音声と音声合成器に使用されていました。
braille	廃止されました。ブラailleのタッチフィードバックデバイスに適用されます。
embossed	廃止されました。印刷の視覚障害者用印刷デバイスに使用されていました。
handheld	廃止されました。ハンドヘルドデバイスやより小さなデバイス、例えばPDAや小さな電話に使用されていました。
print	プリンターや印刷プレビューデバイスに使用されます。
projection	廃止されました。プロジェクタデバイスに使用されていました。
screen	コンピュータのスクリーン、タブレット、スマートフォンなどに使用されます。
speech	スクリーンリーダーや音声出力デバイスなどに適用されます。
tty	廃止されました。固定の文字グリッド、たとえば電報、端末デバイス、文字に制限がある携帯機器に使用されていました。
tv	廃止されました。テレビやインターネットテレビに使用されていました。

メディア機能

値	説明
aspect-ratio	出力デバイスのページの可視領域の幅と高さの比率を定義します。
color	出力デバイスの各色原色の個数を定義します。カラーデバイスでない場合、値は0になります。
color-index	出力デバイスのカラーキューションテーブルに定義されたエントリの数。カラーキューションテーブルを使用していない場合、値は0になります。
device-aspect-ratio	出力デバイスのスクリーンの表示幅と高さの比率を定義します。
device-height	出力デバイスのスクリーンの表示高さを定義します。
device-width	出力デバイスのスクリーンの表示幅を定義します。
grid	出力デバイスがグリッドまたはドットマトリックスを使用しているかどうかをクエリするために使用されます。
height	出力デバイスのページの表示領域の高さを定義します。
max-aspect-ratio	出力デバイスのスクリーンの表示幅と高さの最大比率を定義します。
max-color	出力デバイスの各カラーサブセットの最大要素数を定義します。
max-color-index	出力デバイスのカラーカラーケリテーブル中の最大エントリ数を定義します。
max-device-aspect-ratio	出力デバイスのスクリーンの表示幅と高さの最大比率を定義します。
max-device-height	出力デバイスのスクリーンの最大表示高さを定義します。
max-device-width	出力デバイスのスクリーンの最大表示幅を定義します。
max-height	出力デバイスのページの最大表示領域の高さを定義します。
max-monochrome	単色フレームバッファー中の各ピクセルに含まれる最大単色素子の数を定義します。
max-resolution	デバイスの最大解像度を定義します。
max-width	出力デバイスのページの最大表示領域の幅を定義します。
min-aspect-ratio	出力デバイスのページの表示領域の幅と高さの最小比率を定義します。
min-color	出力デバイスの各カラーサブセットの最小要素数を定義します。
min-color-index	出力デバイスのカラークエリテーブル中の最小エントリ数を定義します。
min-device-aspect-ratio	出力デバイスのスクリーンの表示幅と高さの最小比率を定義します。
min-device-width	出力デバイスのスクリーンの最小表示幅を定義します。
min-device-height	出力デバイスのスクリーンの最小表示高さを定義します。
min-height	出力デバイスのページの最小表示領域の高さを定義します。
min-monochrome	単色フレームバッファー中の各ピクセルに含まれる最小単色素子の数を定義します。
min-resolution	デバイスの最小解像度を定義します。
min-width	出力デバイスのページの最小表示領域の幅を定義します。
monochrome	単色フレームバッファー中の各ピクセルに含まれる単色素子の数を定義します。単色デバイスでない場合は、値は0です。
orientation	出力デバイスのページの表示領域の高さが幅を超えるかまたは等しいかを定義します。
resolution	デバイスの解像度を定義します。例えば：96dpi, 300dpi, 118dpcm
scan	テレビクラスのデバイスのスキャンプロセスを定義します。
width	出力デバイスのページの表示領域の幅を定義します。

ブラウザの互換性

@media属性のブラウザの互換性について、以下の表の数字はその属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザはこのルールをサポートしています。

	Firefox 1+ Google Chrome1+ Internet Explorer 9+ Apple Safari 1。3+ Opera 9。2+

さらに詳しくは

以下のチュートリアルを参照してください：CSS メディアタイプ。

CSS @pageルール CSS @keyframesルール