HTML

【HTML】メディアクエリ

みいと

メディアクエリとは

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

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

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

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

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

メディアタイプ

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

all全ての機器(デフォルト)
braille点字ディスプレイ
embossed点字プリンタ
handheldモバイルデバイス
printプリンタ
projectionプロジェクタ
screenPC、スマートフォン、タブレットなどのディスプレイ
speech音声読み上げソフトなど
tty文字幅固定の端末
tvテレビ

メディア特性

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

width
min-width
max-width
ビューポートの幅
height
min-height
max-height
ビューポートの高さ
device-width
device-min-width
device-max-width
デバイスの幅
device-height
device-min-height
device-max-height
デバイスの高さ
aspect-ratio
min-aspect-ratio
max-aspect-ratio
デバイスのアスペクト比
resolution
min-resolution
max-resolution
デバイスの解像度
orientationデバイスの向きを指定

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

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

  • linkタグで指定する
  • CSSファイルで指定する

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を切り替えることができる仕様です。

まとめ
  • メディアクエリを使うと、デバイスの特性に応じてCSSの切り替えができる
  • メディアクエリにはメディアタイプとメディア特性がある
  • メディアクエリはlinkタグかCSSファイルで指定する

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました