メディアクエリの記述方法
link要素を使って、CSSファイルごと切り替える方法
link要素でCSSファイルをリンクする際に、
media属性を使ってメディアクエリを指定し、
リンクするCSSを切り替えることが出来る
link要素のmedia属性によるCSSファイルの切り替え例
<!-- 画面サイズが 767px 以下の時に適用されるスタイル -->
<link rel="stylesheet" href="smartphone.css" media="screen and (max-width: 767px)">
<!-- 画面サイズが 768px 以上、1023px 以下の時に適用されるスタイル -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)">
<!-- 画面サイズが 1024px 以上時に適用されるスタイル -->
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 1024px)">
上記の <link> タグをHTMLファイルの <head>〜</head>内に配置すると、
media属性の条件に応じてCSSファイルを切り替えできる。
link要素のmedia属性の構文
CSSファイルの中で @mediaキーワードによる切り替え方法
CSSファイルの中で、@mediaキーワードを使って、
メディアクエリを指定し、スタイルを切り替えることが出来る
CSSファイルの中で @mediaキーワードによる切り替をえる例
/* デフォルトのスタイル（画面の幅が 768px 未満の時のスタイル） */
.item {
width: 100%;
}
/* 画面サイズが 768px 以上の時に適用されるスタイル */
@media screen and (min-width: 768px) {
.item {
width: 25%;
float: left;
}
}
/* 画面サイズが 1024px 以上の時に適用されるスタイル */
@media screen and (min-width: 1024px) {
.item {
width: 20%;
}
}
@mediaキーワードの構文
@importで別のCSSファイルを読み込む方法
CSSファイルの中に、@importキーワードで別のCSSファイルを読み込む際に
メディアクエリを指定する事ができる。
@importキーワードによるCSSファイルの読み込みを切り替える例
/* 画面サイズが 767px 以下の時に適用されるスタイル */
@import url("smartphone.css") screen and (max-width: 767px);
/* 画面サイズが 768px 以上 1023px 以下の時に適用されるスタイル */
@import url("tablet.css") screen and (min-width: 768px) and (max-width: 1023px);
/* 画面サイズが 1024px 以上の時に適用されるスタイル */
@import url("pc.css") screen and (min-width: 1024px);
@importの構文
出力媒体とメディア特性
主な出力媒体
| 値 |
意味 |
all |
全ての機器 |
screen |
パソコン画面（スマホやタブレットも含む） |
print |
プリンタ |
prijection |
プロジェクタ |
tv |
テレビ |
handheld |
携帯用機器 （画面が小さく回線も遅い機器） |
tty |
文字幅が固定の端末 |
speech |
スピーチ・シンセサイザー （音声読み上げソフトなど） |
braille |
点字ディスプレイ |
emossed |
点字プリンタ |
主なメディア特性と値
| メディア特性 |
説明 |
値 |
width |
表示領域の幅 （スクロールバーを含む） |
実数 + 単位 |
min-width |
表示領域の最小の幅 （これ以上に適用） |
実数 + 単位 |
max-width |
表示領域の最大の幅 （これ以下に適用） |
実数 + 単位 |
height |
表示領域の高さ （スクロールバーを含む） |
実数 + 単位 |
min-height |
表示領域の最小の高さ （これ以上に適用） |
実数 + 単位 |
max-height |
表示領域の最大の高さ （これ以下に適用） |
実数 + 単位 |
orientation |
縦長 （portrait） / 横長 （landscape） |
portrait / landscape |
resolution |
解像度 |
実数 + dpi / 実数 + dpcm |
min-resolution |
最小の解像度（これ以上に適用） |
実数 + dpi / 実数 + dpcm |
max-resolution |
最大の解像度（これ以下に適用） |
実数 + dpi / 実数 + dpcm |
特性と値を複数指定する場合は、「and」で区切る。
メディアクエリを試してみよう
-
「chapter02」 › 「media-queries」 › 「css」フォルダ内の「common.css」をテキストエディタで開く
-
メディアクエリで、ウインドウの幅によって
body要素の背景色を変更する
chapter02/media-queries/css/common.css
/* ウインドウが 768px 以上の時 */
@media screen and (min-width: 768px) {
body {
background-color: #607d8b;
color: #eceff1;
}
}
/* ウインドウが 1024px 以上の時 */
@media screen and (min-width: 1024px) {
body {
background-color: #263238;
}
}
- 上書き保存
-
ブラウザで「chapter02」 › 「media-queries」フォルダ内の「index.html」にアクセス
-
ウインドウ幅に応じて背景色が変更されるかを確認
ブラウザでの表示例
- IE8以下への対応
- IE8以下はメディアクエリが非対応となる。
JavaScriptによる対策が必要で、一般的に、
respond.jsというJavaScriptファイルをダウンロードし、ロールカルフォルダ内に保存し、<script>タグで読み込み利用する。
読み込みサンプル（「js」フォルダ内に保存した場合）
<!--[if lt IE 9]>
<script src="js/respond.js"></script>
<![endif]-->
