アジェンダ
- メディアクエリ
- メディアクエリとは
- 書き方
- メディアタイプの例
- メディア特性の例
- スマートフォンの「フィット」機能への対応
- 高解像度ディスプレイへの対応
- 実践
メディアクエリ
メディアクエリとは
PCのモニター(横長)やスマートフォンの画面(縦長)など、表示させるデバイスに適した表示方法を選択する手法。
書き方
メディアクエリは、HTMLのlinkタグで指定する方法と、CSSで指定する方法がある。
<!-- 条件を満たすデバイスで閲覧する場合、CSSファイルの記述が適応される. -->
<link rel="stylesheet" href="./style.css" media="メディアクエリの条件文">
/* 条件を満たすデバイスで閲覧する場合、CSSの記述が適応される */
@media (メディアクエリの条件文) {
/* CSSの記述 */
}
「メディアクエリの条件文」は、メディアタイプやメディア特性を指定することができる。
メディアタイプの例
メディアタイプには以下のようなものがある。
- all
- 全てのデバイス
- screen
- 一般的なディスプレイ(モニター、スマートフォン、など)
- projection
- プロジェクター
- 印刷
メディア特性の例
メディア特性には以下のようなものがある。
- width
- 表示領域の横幅
- height
- 表示領域の縦幅
- max-width
- CSSが適応される、最大の表示領域の横幅
- min-width
- CSSが適応される、最小の表示領域の横幅
- device-width
- デバイスの横幅
- device-height
- デバイスの縦幅
- orientation
- デバイスの向き(縦: portrait 横: landscape)
スマートフォンの「フィット」機能への対応
スマートフォンのブラウザには、画面の解像度をページに合わせる「フィット」という機能がある。
この機能が働くと、メディアクエリが正常に働かない場合がある。
フィット機能に対応するために、以下の通りに__「デバイスの解像度を、デバイスの画面サイズに設定する」__記述をする必要がある。
<meta mame="viewport" content="width=device-width">
高解像度ディスプレイへの対応
ディスプレイの中には、1pxの表示に2つのピクセルを使用する「高解像度ディスプレイ」が存在する。
この高解像度ディスプレイでは、1ピクセルの大きさが通常のディスプレイと異なるため、表示が崩れてしまう場合がある。
高解像度ディスプレイに対応するために、メディア特性に以下の記述を追記する必要がある。
/* 通常のディスプレイ. */
-webkit-device-pixel-ratio: 1
/* 高解像度ディスプレイ. */
-webkit-device-pixel-ratio: 2
実践
上記の内容を用いて以下のindex.html、style_pc.css、style_phone.cssを作成した。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta mame="viewport" content="width=device-width">
<!-- 一般的なPCモニター用のCSS. -->
<link rel="stylesheet" href="./style_pc.css" media="screen and (min-width: 1024px)">
<!-- 一般的なスマートフォン用のCSS. -->
<link rel="stylesheet" href="./style_phone.css" media="(min-width: 768px) and (max-width: 1023px)">
<title>レスポンシブなサイト</title>
</head>
<body>
<div class="title">レスポンシブなサイト</div>
<img src="./makoto.jpg" alt="上目遣いの天使" class="profile_icon">
<div class="content">
<p>標準的なPCのモニターでは、画像の右側に文字が配置されているはずです。スマートフォンサイズでは、画像の下に文字が配置されているはずです。</p>
<p>表示させるデバイスによって適した表示方法になるサイトを、<span class="strong">レスポンシブなサイト</span>といいます。</p>
<!-- 使用しているCSSファイルによって、表示を変化させる. -->
<p class="device_content">現在、<span class="device"></span>用のWebページが表示されています。</p>
</div>
</body>
</html>
.title {
font-size: 3em;
font-weight: bold;
color: brown;
text-shadow: 7px 7px 2px burlywood;
margin: 1em;
padding: 0.2em;
border-style: dotted;
border-color: chocolate;
border-radius: 1em;
}
.profile_icon {
margin: 2em;
width: 500px;
height: 500px;
float: left;
}
.content {
margin: 5%;
}
.strong {
font-weight: bold;
text-decoration: underline;
}
.device_content {
font-size: 2em;
line-height: 2em;
}
/* PC用のCSSで表示していることをWebページに表示する. */
.device::before {
content: "PC";
font-weight: bold;
color: orange;
}
.title {
font-size: 3em;
font-weight: bold;
color: brown;
text-shadow: 7px 7px 2px burlywood;
margin: 1em;
padding: 0.2em;
border-style: dotted;
border-color: chocolate;
border-radius: 1em;
}
.profile_icon {
margin: 0em 25%;
width: 300px;
height: 300px;
}
.content {
margin: 5%;
}
.strong {
font-weight: bold;
text-decoration: underline;
}
.device_content {
font-size: 2em;
line-height: 2em;
}
/* スマートフォン用のCSSで表示していることをWebページに表示する. */
.device::before {
content: "スマートフォン";
font-weight: bold;
color: orange;
}
これをWebブラウザに表示させるとこんな感じ。
GoogleChromeのデベロッパーツールで、PCで閲覧した場合とスマートフォン(iPhone6)で閲覧した場合を確認。
●PC
●iPhone6
このように、今どのデバイスによって、文書の構造や表示させる文章を変化させることもできる。
(CSSで文書を表示させる手法についての是非は、また別の話)
おわりに
今回は、ついにレスポンシブな内容だった。
デバイスごとに複数のCSSファイルを用意するか、一つのCSSファイルを作成してその中でデバイスを指定するか・・・。
より良い設計を心がけるために、調べよう。
参考
3-1 メディアクエリとは（メディアクエリ）
3-2 メディアタイプ（メディアクエリ）
3-3 メディア特性（メディアクエリ）
3-4 環境に合わせた指定の追加（メディアクエリ）
3-5 ページの印刷（メディアクエリ）