CSSのみで画面幅に合わせてレイアウトを切り替える方法

PCとスマホやタブレットでは当然画面幅が違うので同じレイアウトが使えるとは限りません。

そんな場合に便利なのがCSSのメディアクエリを使って切り替えすることです。

スクリプトとかも必要なくて便利なので、そのやり方について詳しく紹介していきます。

メディアクエリの使い方

メディアクエリというのは @media  から始まる条件式のこと

これを使うことでCSSを特定の条件で切り替えすることが可能になります。

 

次のように @media  の後にメディアタイプを指定するのが一番基本的な使い方

上の例ではメディアタイプに普通の画面(ディスプレイ)を表す screen を指定しています。

メディアタイプには screen  以外にも print  とか aural  とかの値も摂れます。

しかしディスプレイ以外はほぼ扱わないので @media  の後は screen  を指定するのがほとんどです。

 

そしてこのメディアクエリには ()  で囲んだ条件を書くことも可能

 

以上がメディアクエリについての基本知識

そしてこれを応用することで画面幅に応じてCSSの切り替えができるようになります。

画面幅で切り替えする方法まとめ

メディアクエリ+画面幅の条件を使ったCSS切り替え方法は大きく分けて次の3つ

  • 最小画面幅で切り替え
  • 最大画面幅で切り替え
  • 最小幅と最大幅の範囲で切り替え

この3つのやり方について具体的なコード例と一緒に説明します。

最大画面幅で切り替え

例えば画面幅が480px以下の時だけなどある画面幅以下でCSSを適用したい場合

その場合は画面幅を ○○○px  とすると次のような条件をメディアクエリの後に書きます。

max-width  の後に最大画面幅(単位はピクセル以外でもOK)を書くだけです。

 

では具体的な例として画面幅でマージンを切り替えするコードを紹介しましょう。

例えば次のようなページ全体の内容を含むコンテナ要素を考えます。

このコンテナ要素のマージンを最大画面幅で切り替えするのが次のコード

まず初めに全ての端末でデフォルトで表示されるCSSを定義

そのあとメディアクエリで480px以下のスマホ用のCSSを書いています。

 

以上が max-width  を使った最大画面幅で切り替えする方法

スマホ向けのスタイルを書くときに便利ですね。

最小画面幅で切り替え

例えば画面幅が1024px以上の時など、最小の画面幅でCSSを適用したい場合

その場合は画面幅を ○○○px  としてメディアクエリに次のような条件を書きます。

min-width  の後にスタイルが適用される最小の画面幅を書けばOKです。

 

では具体的なコード例の紹介

今度も先ほどと同じように次のコンテナ要素のマージンを切り替えしたいとします。

このコンテナ要素を最小画面幅で切り替えしているのが次のコード

さっきのコードと似ていますが、このコードでは

  • デフォルトでマージンを0pxに設定
  • 1024px以上の場合だけマージン20pxに切り替え

という風に切り替えしています。

 

以上が min-width  を使って最小画面幅で切り替えする方法

こちらはPCなどの広い端末用のスタイルを書くのに適してますね。

最大幅と最小幅の間で切り替え

例えば画面幅が320px以上480px未満の範囲内でスタイルを切り替えたいなどの場合

その場合は最大幅を ○○○px  、最小幅を ●●●px  として次のように書けばOKです。

カッコで囲んだ条件同士を and  で結ぶのがポイント

 

では具体的な使用例を紹介します。

例えば次はhogeクラスを持つ要素を320px以上480px以下で非表示にするコード

以上」を表すのが min-width  で、「以下」を表すのが max-width  という点に注意

意味が分かっていないと逆に書いてしまいがちなので気を付けたいですね。

 

以上が最小幅と最大幅の間で切り替えする方法

こちらは細かく画面幅を指定して切り替えたいときに便利な書き方です。

ここまでのまとめ

ということで画面幅ごとにCSSを切り替える方法まとめ

  • 最大幅で切り替え
    ある幅「以上」で切り替えるなら min-width  を使う
  • 最小幅で切り替え
    ある幅「以下」で切り替えるなら max-width  を使う
  • ある範囲の幅で切り替え
    以上」の min-width  と「以下」の max-width  を組み合わて使う

スマホとかPCでレイアウトを変えるときによく使うので使えるようになると便利です。

ではでは( ´ー`)ノ~

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください