PCとスマホやタブレットでは当然画面幅が違うので同じレイアウトが使えるとは限りません。
そんな場合に便利なのがCSSのメディアクエリを使って切り替えすることです。
スクリプトとかも必要なくて便利なので、そのやり方について詳しく紹介していきます。
メディアクエリの使い方
メディアクエリというのは @media から始まる条件式のこと
これを使うことでCSSを特定の条件で切り替えすることが可能になります。
次のように @media の後にメディアタイプを指定するのが一番基本的な使い方
1 2 3 | @media screen{ /** screen用のCSS */ } |
上の例ではメディアタイプに普通の画面（ディスプレイ）を表す screen を指定しています。
メディアタイプには screen 以外にも print とか aural とかの値も摂れます。
しかしディスプレイ以外はほぼ扱わないので @media の後は screen を指定するのがほとんどです。
そしてこのメディアクエリには () で囲んだ条件を書くことも可能
1 2 3 | @media screen and (条件式){ /** 条件に当てはまった時のCSS */ } |
以上がメディアクエリについての基本知識
そしてこれを応用することで画面幅に応じてCSSの切り替えができるようになります。
画面幅で切り替えする方法まとめ
メディアクエリ＋画面幅の条件を使ったCSS切り替え方法は大きく分けて次の３つ
- 最小画面幅で切り替え
- 最大画面幅で切り替え
- 最小幅と最大幅の範囲で切り替え
この３つのやり方について具体的なコード例と一緒に説明します。
最大画面幅で切り替え
例えば画面幅が480px以下の時だけなどある画面幅以下でCSSを適用したい場合
その場合は画面幅を ○○○px とすると次のような条件をメディアクエリの後に書きます。
1 2 3 | @media screen and (max-width: ○○○px){ /** ○○○px以下のスタイル */ } |
max-width の後に最大画面幅（単位はピクセル以外でもOK）を書くだけです。
では具体的な例として画面幅でマージンを切り替えするコードを紹介しましょう。
例えば次のようなページ全体の内容を含むコンテナ要素を考えます。
1 2 3 4 5 | <body> <div id="container"> <!-- コンテナの中身 --> </div> </body> |
このコンテナ要素のマージンを最大画面幅で切り替えするのが次のコード
1 2 3 4 5 6 7 8 9 10 11 | /** デフォルトのCSS */ #container{ margin: 20px; } /** 480px以下の場合のCSS */ @media screen and (max-width: 480px){ #container{ margin: 0; } } |
まず初めに全ての端末でデフォルトで表示されるCSSを定義
そのあとメディアクエリで480px以下のスマホ用のCSSを書いています。
以上が max-width を使った最大画面幅で切り替えする方法
スマホ向けのスタイルを書くときに便利ですね。
最小画面幅で切り替え
例えば画面幅が1024px以上の時など、最小の画面幅でCSSを適用したい場合
その場合は画面幅を ○○○px としてメディアクエリに次のような条件を書きます。
1 2 3 | @media screen and (min-width: ○○○px){ /** ○○○px以上で適用されるスタイル */ } |
min-width の後にスタイルが適用される最小の画面幅を書けばOKです。
では具体的なコード例の紹介
今度も先ほどと同じように次のコンテナ要素のマージンを切り替えしたいとします。
1 2 3 4 5 | <body> <div id="container"> <!-- コンテナの中身 --> </div> </body> |
このコンテナ要素を最小画面幅で切り替えしているのが次のコード
1 2 3 4 5 6 7 8 9 10 11 | /** デフォルトのCSS */ #container{ margin: 0; } /** 480px以下の場合のCSS */ @media screen and (min-width: 1024px){ #container{ margin: 20px; } } |
さっきのコードと似ていますが、このコードでは
- デフォルトでマージンを0pxに設定
- 1024px以上の場合だけマージン20pxに切り替え
という風に切り替えしています。
以上が min-width を使って最小画面幅で切り替えする方法
こちらはPCなどの広い端末用のスタイルを書くのに適してますね。
最大幅と最小幅の間で切り替え
例えば画面幅が320px以上480px未満の範囲内でスタイルを切り替えたいなどの場合
その場合は最大幅を ○○○px 、最小幅を ●●●px として次のように書けばOKです。
1 2 3 | @media screen and (max-width: ○○○px) and (min-width: ̻●●●px){ /** ○○○px以上●●●px以下で適用されるスタイル */ } |
カッコで囲んだ条件同士を and で結ぶのがポイント
では具体的な使用例を紹介します。
例えば次はhogeクラスを持つ要素を320px以上480px以下で非表示にするコード
1 2 3 4 5 | @media acreen and (min-width: 320px) and (max-width: 640px){ div.hoge{ display: none; } } |
「以上」を表すのが min-width で、「以下」を表すのが max-width という点に注意
意味が分かっていないと逆に書いてしまいがちなので気を付けたいですね。
以上が最小幅と最大幅の間で切り替えする方法
こちらは細かく画面幅を指定して切り替えたいときに便利な書き方です。
ここまでのまとめ
ということで画面幅ごとにCSSを切り替える方法まとめ
- 最大幅で切り替えある幅「以上」で切り替えるなら min-width を使う
- 最小幅で切り替えある幅「以下」で切り替えるなら max-width を使う
- ある範囲の幅で切り替え「以上」の min-width と「以下」の max-width を組み合わて使う
スマホとかPCでレイアウトを変えるときによく使うので使えるようになると便利です。
ではでは( ´ー｀)ﾉ~
