概要
- ビューポートでどのように画面表示を行うのかを指定
- 画面領域毎に読み込むCSSを切り替えるには**メディアクエリ（@media）**を使う
- 画面幅によってCSSを別ファイルで管理する場合は**@import**を使う
レスポンシブ対応とは？
レスポンシブ対応とはPC、タブレット、スマートフォンなどの異なる画面サイズを柔軟にレイアウトを調整することです。
パソコンでみると横長の画面レイアウトだけど、スマホでみると縦長のレイアウトで表示されるサイトがありますよね。このレスポンシブ対応を行うには2つの機能を知っておく必要があります。
- ビューポート
- メディアクエリ
ビューポートとは？
ビューポートとはウェブサイトを表示するための領域のことです。ビューポートを指定することで、どのように画面表示するのかを決めます。
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
このように、headタグのmetaタグにviewportを指定します。contentの中身は2つのプロパティを設定しています。
- width=device-width
- initial-scale=initial-scale
contentのwidth
contentのwidthでは、画面幅をどのように表示するのかを決めます。今回指定した「device-width」は表示するパソコンやスマホによってウィンドウの画面表示幅を変更するという意味です。
一方、widthに480pxのような固定値を設定するとパソコン、スマホどちらで表示しても480px固定の画面を表示できます。
<head>
<meta name="viewport" content="width=480px">
</head>
ビューポートでは、内部的に仮想的なウィンドウを作り、実際の画面に表示しています。
そのため、画面幅が1000pxあるPCで表示しても、ウィンドウに表示される画面の幅は480pxで固定です。逆に、480px以下の300pxの画面で表示しようとすると一部しか表示されません。
パソコンで表示したけどスマホ用の縦長の画面が表示されたというのは、このパターンに当たります。スマホで利用するユーザーが多いサイトだとパソコン表示に対応するコスパが悪いので固定することが多いです。
contentのinitial-scale
もう一つのプロパティinitial-scaleでは画面表示時の初期倍率を設定しています。
1を基準に大きければviewportを拡大、小さければviewportを縮小します。基本的にinitial-scaleに1以外の値を設定すると予期せぬ表示になるので、1を設定していれば間違いないはずです。
ビューポートの指定方法
結局のところビューポ－トの指定方法は以下のどちらかで大丈夫です。
レスポンシブ対応の場合
<meta name="viewport" content="width=device-width,initial-scale=1">
スマホユーザーが多い場合
<meta name="viewport" content="固定幅">
今回はレスポンシブ対応についてなので前者の指定方法を使います。
メディアクエリとは？
レスポンス対応を実現する2つ目の要素であるメディアクエリとは、表示された画面に応じて適用するスタイルを切り替える機能のことです。
CSSファイルの中で「@media」を使うことで適用でき、この機能を使うことでレスポンシブ対応を実現できます。
使い方としては次の3パターンです。
- パソコン表示
- スマホ表示
- タブレット表示
パソコン表示のメディアクエリ
パソコンのように大画面で表示する場合は、画面サイズが1025px以上のように最小値を指定します。
@media screen and (min-width: 1025px) {
p {color : red}
}
この場合、画面サイズが1025px以上になるとpタグの文字色が赤に変わります。ここで指定した画面サイズをブレイクポイントと呼び、その幅を境にスタイルが切り替わります。
また、パソコン表示では最小の画面幅を指定したいため「min-width」を指定しています。
スマホのメディアクエリ
スマホのように小さい画面でのみスタイルを適用するには画面サイズが480px以下のように最大値を指定します。
@media screen and (max-width: 480px) {
p {color : blue}
}
この場合だと、スマホのような小さい480px以下の画面幅になると文字色が青に変わります。スマホだと画面表示する最大値を指定したいので「max-width」を指定します。
タブレットのメディアクエリ
スマホよりも大きくて、パソコンよりも小さいタブレットの場合のスタイルを切り替えるにはどうすればいいのでしょうか？
その場合にもメディアクエリが使えます。
@media screen and (min-width: 481px) and (max-width:1024px) {
p {color : green}
}
この場合、画面幅が481px～1024pxは文字色が緑色に変化します。andでつなげることで両方の条件に合致した場合のみスタイルを適用することができます。
最小幅を指定するmin-widthと最大幅を指定するmax-widthはパソコンやスマホと同じです。
メディアクエリの記述順
メディアクエリを記述する順番には2種類あります。
- デスクトップファースト
- モバイルファースト
デスクトップファースト
デスクトップファーストとは、大きいサイズから順番に指定する方法です。具体的には
- パソコン
- タブレット
- スマホ
の順番で記述していきます。
/** パソコン(デフォルト) **/
p {color : red}
/** タブレット **/
@media screen and (max-width: 1024px) {
p {color : green}
}
/** スマホ **/
@media screen and (max-width: 480px) {
p {color : blue}
}
このように大きい画面からスタイルを設定して、小さい画面で上書きするようなイメージです。メディアクエリを指定していないデフォルトのスタイルがパソコン用に使われるため、このように呼ばれます。
また、CSSでは最後に指定されたスタイルを適用するのも覚えておきましょう。
モバイルファースト
もう一つの方法がモバイルファーストです。逆にこちらは小さい画面から設定していきます。
/** スマホ(デフォルト) **/
p {color : blue}
/** タブレット **/
@media screen and (min-width: 480px) {
p {color : green}
}
/** パソコン **/
@media screen and (min-width: 1024px) {
p {color : red}
}
このように画面が小さいほうからスタイルを設定していきます。メディアクエリの記述がないデフォルトのCSSがスマホ用のスタイルなのでこのように呼ばれています。
現在のメディアクエリの記述方法の主流はモバイルファーストです。理由はデスクトップファーストで記述すると、小さい画面で見ようとしたときに重たいデスクトップのスタイルを読み込もうとして表示が遅くなるためです。
しかし、絶対にモバイルファーストで記述する必要もなく、パソコンユーザーが多い場合にはデスクトップファーストで記述したほうがよいでしょう。
注意点としては、1つのCSSの中でモバイルファーストとデスクトップファーストを混同させないことです。ヘッダーはモバイルファースト、フッターはデスクトップファーストのように混同させると、どのスタイルが適用されているのかが分かりづらくなります。
別ファイルで画面幅毎のファイルを指定したい場合
スマホ用のスタイルとパソコン用のスタイルを別のCSSで管理したという場面が出てくるでしょう。そんなときに使える方法が2つあります。
- HTMLで読み込むCSSを変更する方法
- CSSで別ファイルのCSSを読み込む方法
HTMLで読み込むCSSを変更する方法
1つ目の方法HTMLで読み込むCSSを変更する方法です。次の例ではモバイルファーストでCSSを読み込んでいます。
<link rel="stylesheet" href="mobile.css"> <!--スマホ -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:480px)"> <!--タブレット -->*/
<link rel="stylesheet" href="pc.css" media="screen and (min-width:1024px)"> <!--パソコン-->
このように、それぞれのCSSを読み込む際にmediaプロパティを設定することで画面幅に応じたスタイルを設定できます。これにより、CSSの中でメディアクエリを記述する必要がなくなるメリットがあります。
CSSで別ファイルのCSSを読み込む方法
2つ目の方法はCSSで別ファイルのCSSを読み込む方法です。
<link rel="stylesheet" href="main.css">
/* スマホ */
p {color : blue}
@import url("./tablet.css"); /* タブレット */
@import url("./pc.css"); /* PC */
このように、HTMLではメインとなる1つのCSSを読み込み、読み込んだCSSで画面幅に応じたCSSを読み込みます。