HTML/CSS

2020.08.19

CSS｜メディアクエリ｜スマホやPCで表示を変える

この記事は1345日前に投稿されたものです。

画面サイズで表示を変えるレスポンシブデザインの基本とも言える「メディアクエリ」の使い方、書き方です。メディアクエリは画面サイズやウインドウサイズによって、CSSを切り替えてレイアウトをそれぞれに合わせるために使用するものです。メディアクエリを使用したCSSの切り替えはブレイクポイント（768px以上とか）で行います。

スマホとPCで読み込むスタイルシートを変える

端末ごとにCSSを作るのは手間がかかる分オススメしませんが、例えば、ドロワーメニュー（ハンバーガーメニュー）などスマホでしか使用しないCSSを追加で読み込む、という使い方なら便利です。

<link rel="stylesheet" href="style-sp.css" type="text/css" media="screen and (max-width:767px)">
<link rel="stylesheet" href="style-pc.css" type="text/css" media="screen and (min-width:768px)">

サンプルは、幅が767pxまで（スマホ）は「style-sp.css」を読み込んで、768px（タブレット、PC）以上は「style-pc.css」を読み込みます。

ちなみにWordpressならメディアクエリではありませんがwp_is_mobile()という条件分岐タグで読み込むスタイルシートを変えることもできます。

よく使うwordpressの条件分岐タグ

スタイルシートで適用させる内容を変える

メディアクエリで適用させるCSSを変えます。

メディアクエリの書き方：ブレイクポイントを768px以上にする場合

@media screen and (min-width: 768px) {　//適用させるCSS　}

ウェブサイトの内容にもよりますが、現在ではモバイルファーストでの記述が多くなってきました。スマホをベースにして、タブレットやPCの場合にCSSを変更、追加するといったパターンです。

※2018年からGoogleはスマホサイトをページ評価の基準にしています。

モバイルファースト

//全端末共通のCSS
div.sample{background-color:red;}
div p{color:white;}
@media screen and (min-width: 768px) {　//幅768px以上の場合に適用されるCSS
  div.sample{background-color:blue;}
}
@media screen and (min-width: 1024px) {　//幅1024px以上の場合に適用されるCSS
  div.sample{background-color:green;}
}

まとめ：viewportも忘れずに

viewportは表示領域を設定してページが見やすいように拡大したりする機能です。メディアクエリと合わせて、viewportもレスポンシブには必須のものです。

head内にviewportの記述も忘れずに！

<meta name="viewport" content="width=device-width,initial-scale=1">