Navigate
  • Hazuki

【CSS】メディアクエリを使ってレスポンシブWebを作る

メディアクエリと、Flexboxを使って、PC・タブレット・スマホと、3段階の画面サイズに合わせてレスポンシブWebを作ってみました。
サンプルページ：https://exp.hazu.jp/media-query/media-query.html
仕組みをまとめてみたいと思います。

どのように表示させたいのか

スマホ縦 → １カラン
スマホ横・タブレット縦 → ２カラン
タブレット横・PC → ３カラン

ディバイスによるブレイクポイント

3段階の画面サイズに合わせて切り替えたいのですが、ブレイクポイントは何ピクセルにするのか、というのが問題ですね。Googleのディベロッパーツールによれば、こうなっています。
（以下の単位はCSS で利用する「CSS ピクセル」で「画面解像度」ではありません。iOS では「csspx」、Android では「dp」。）

スマートフォン

対応 横幅 高さ
iPhone 5/SE 320 568
iPhone 6/7/8 375 667
iPhone 6/7/8 Plus 414 736
iPhone X 375 812
Android（ほとんどのスマホ） 360 640

タブレット

端末 横幅 高さ
iPad 768 1024
iPad Pro 1024 1366
Android Sサイズ 600 960
Android Mサイズ 768 1024
Android Lサイズ 800 1280

これより、こんな3段階にしてみました。

メディアクエリ区分け（width）

スマホ縦： ～499px
スマホ横＋タブレット縦：　500px ～ 800px
タブレット横＋PC：　801px～

メディアクエリ

＜ HTMLのメタ情報 ＞
まず、HTML の<head>の部分で、で、「ビューポート＝ディバイスの画面サイズ」になるように指示します。
（「ビューポート」については、前回、まとめました。→ 【CSS】よく使う単位 & ビューポート単位）

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

＜ メディアクエリの書き方 ＞
CSS のメディアクエリを利用して、ブレイクポイントごとに条件分けしていきます。

@media screen and (max-width:499px) { /* １カランになるよう記述 */ }
@media screen and (min-width:500px) and (max-width:800px) { /* ２カランになるよう記述 */ }
@media screen and (min-width:801px){ /* ３カランになるよう記述 */ }

＜ CSS例 ＞

/* スマホ縦対応 1カラン */@media screen and (max-width:499px) { 
.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column; 
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}

.item {
 width: 100%;
}
}

/* スマホ横＆タブレット縦対応 ２カラン */@media screen and (min-width:500px) and (max-width:800px) {
.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}

.item {
 width: 50%;
}
}

/* タブレット横＆ＰＣ対応 3カラン */@media screen and (min-width:801px){
.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}

.item {
 width: 33.3%;
}
}