【HTML】メディアクエリ

メディアクエリとは

メディアクエリはデバイスに応じてCSSを切り替えることができる仕様です。

メディアクエリには、メディアタイプとメディア特性があります。

メディアタイプとメディア特性を指定することで、デバイスごとにCSSを切り替えることができます。

メディアタイプとメディア特性

メディアタイプはディスプレイやテレビなどのデバイスのことで、メディア特性はデバイスの幅や高さ、向きなどを指定できます。

メディアタイプ

メディアタイプには下記のような値を指定できます。

メディア特性

メディア特性には主に下記のような値を指定できます。

メディアクエリの指定方法

メディアクエリの指定方法は大きく分けると下記の2つがあります。

linkタグで指定する

メディアクエリをlinkタグで指定するには、media属性を使用します。

<link rel="stylesheet" href="style.css" medhia="screen and (max-width: 480px)">

この例ではデバイスタイプがscreen、デバイス特性がmax-width:480pxとなります。

CSSファイルで指定する

CSSファイルでメディアクエリを指定するには、@mediaを使用する方法と、@importを使用する方法があります。

@mediaを使用する方法

@mediaを使用してメディアクエリを指定するには、下記のように記述します。

@media screen and (max-width: 480px) {
  styleを記述
}

@importを使用する方法

@importを使用してメディアクエリを指定するには、下記のように記述します。

@import url(style.css) screen and (max-width: 480px);

メディアクエリのまとめ

メディアクエリはデバイスの特性に応じて、CSSを切り替えることができる仕様です。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。