【hr】段落の変わり目
みいと
おじさんのWEBデザイン学習まとめ
【HTML】メディアクエリ
みいと
メディアクエリとは
メディアクエリはデバイスに応じてCSSを切り替えることができる仕様です。
メディアクエリには、メディアタイプとメディア特性があります。
メディアタイプとメディア特性を指定することで、デバイスごとにCSSを切り替えることができます。
メディアタイプとメディア特性
メディアタイプはディスプレイやテレビなどのデバイスのことで、メディア特性はデバイスの幅や高さ、向きなどを指定できます。
メディアタイプ
メディアタイプには下記のような値を指定できます。
| all | 全ての機器(デフォルト) |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ |
| handheld | モバイルデバイス |
| プリンタ | |
| projection | プロジェクタ |
| screen | PC、スマートフォン、タブレットなどのディスプレイ |
| 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
興味を持ったものをいろいろと勉強しています。
