アジェンダ
- メディアクエリ
- メディアクエリとは
- 書き方
- メディアタイプの例
- メディア特性の例
- スマートフォンの「フィット」機能への対応
- 高解像度ディスプレイへの対応
- 実践
メディアクエリ
メディアクエリとは
PCのモニター(横長)やスマートフォンの画面(縦長)など、表示させるデバイスに適した表示方法を選択する手法。
書き方
メディアクエリは、HTMLのlinkタグで指定する方法と、CSSで指定する方法がある。
<!-- 条件を満たすデバイスで閲覧する場合、CSSファイルの記述が適応される. --><linkrel="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)
スマートフォンの「フィット」機能への対応
スマートフォンのブラウザには、画面の解像度をページに合わせる「フィット」という機能がある。
この機能が働くと、メディアクエリが正常に働かない場合がある。
フィット機能に対応するために、以下の通りに「デバイスの解像度を、デバイスの画面サイズに設定する」記述をする必要がある。
<metamame="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><htmllang="ja"><head><metacharset="UTF-8"><metamame="viewport"content="width=device-width"><!-- 一般的なPCモニター用のCSS. --><linkrel="stylesheet"href="./style_pc.css"media="screen and (min-width: 1024px)"><!-- 一般的なスマートフォン用のCSS. --><linkrel="stylesheet"href="./style_phone.css"media="(min-width: 768px) and (max-width: 1023px)"><title>レスポンシブなサイト</title></head><body><divclass="title">レスポンシブなサイト</div><imgsrc="./makoto.jpg"alt="上目遣いの天使"class="profile_icon"><divclass="content"><p>標準的なPCのモニターでは、画像の右側に文字が配置されているはずです。スマートフォンサイズでは、画像の下に文字が配置されているはずです。</p><p>表示させるデバイスによって適した表示方法になるサイトを、<spanclass="strong">レスポンシブなサイト</span>といいます。</p><!-- 使用しているCSSファイルによって、表示を変化させる. --><pclass="device_content">現在、<spanclass="device"></span>用のWebページが表示されています。</p></div></body></html>.title{font-size:3em;font-weight:bold;color:brown;text-shadow:7px7px2pxburlywood;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:7px7px2pxburlywood;margin:1em;padding:0.2em;border-style:dotted;border-color:chocolate;border-radius:1em;}.profile_icon{margin:0em25%;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 ページの印刷（メディアクエリ）