レスポンスデザインとは
Webサイトを閲覧するユーザが使用するデバイスの画面サイズに応じて表示を最適化するデザインのことをレスポンスデザインという．PCやモバイル端末(スマホ・タブレット)では画面サイズが違うため，同じ表示方法では一方が見にくくなることがある．レスポンスデザインを利用すれば，一つのhtmlから複数の見え方を作ることが可能であるため，端末にあった配置や表示を適用できる．
メディアクエリ
メディアクエリとは，レスポンスデザインを実現するために必要な機能で，Webページのスタイルを記述するCSSの仕様の一つ．具体的には，表示された画面環境に応じて適用スタイルを切り替える機能である．
HTMLの追加事項
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
メディアクエリを利用したレスポンシブデザインを実装する場合は，適応したいHTMLファイルのヘッダ要素に，上記のmeta要素を追加する必要がある．
基本構文
メディアクエリの基本構文は以下のようになる．それぞれメディアタイプとメディアの特性を指定することで，特定の画面環境のみに適用させることができる．
@media メディアタイプ and (メディアの特性){
/*指定したいCSS*/
selector{}
}
・メディアタイプ
→どのメディアにCSSを適用させるかを指定するもの．メディアタイプに指定されるデバイスとして以下のものが記述する．(他にもあります．)
| 記述方法 | 適用されるデバイス |
|---|---|
| all | 全てのデバイス |
| プリンター | |
| screen | プリンター以外のデバイス(PC，スマホ，タブレット) |
・メディアの特性
→メディアの特性は，CSSを適用させる条件を指定するもの．メディアの特性として以下のものが使われる．(他にもあります)
| 記述方法 | |
|---|---|
| width | ブラウザの表示領域の幅 |
| height | ブラウザの表示領域の高さ |
| device-width | デバイス画面の幅 |
| device-height | デバイス画面の高さ |
| orientation | ブラウザの表示領域の向き |
画面サイズごとに切り替え
閲覧している端末の画面サイズに応じて表示を切り替えるには以下のように記述する．
@media screen and (min-width: 768px){
/*指定したいCSS*/
selector{...}
}
メディアタイプにはscreenを指定する．メディアの特性としてmin-widthを指定することで，ウィンドウ幅が768px以上の場合にCSSを適用することができる．
ブレイクポイント
ブレイクポイントとは，レスポンスデザインの表示を切り替えるポイントを指す．ブレイクポイントにデバイスのウィンドウ幅を指定することで，デバイス毎のCSSを適用することができる．Webアプリでは，基本的にPC/スマホ/タブレットの3種類を指定すれば良い．
端末ごとの横幅
PC：768px以上
タブレット端末：480px〜767px
スマホ端末：479px以下
（厳密には使う端末によって少し異なる）
例
/* PC */
@media screen and (min-width: 768px){
/* PCに適用するCSS*/
}
/* Tablet */
@media screen and (max-width: 768px){
/* タブレット画面に適用するCSS*/
}
/* SmartPhone */
@media screen and (max-width: 480px){
/* スマホ画面に適用するCSS*/
}
コンテンツの配置を変える方法
コンテンツの配置を変える方法は，別の記事にまとめました．本記事と組み合わせることでレスポンスデザインが完成させることができます．