2021/05/25 (更新日: 2023/05/20)

【2023年/ブレイクポイント / コピペOK】PC・スマホ・タブレットに合わせたメディアクエリのテンプレ

CODE HTML/CSS

PR ※当サイトではアフィリエイト広告を利用しています

こんにちは、かんです(»@minimal_kan)
WordPressをメインにWEB制作をしています。»プロフィールはこちら

2023年5月20日更新

レスポンシブサイトを作る際のメディアクエリ、ブレイクポイントの一覧をコピペできるように作成しました。

CSSに貼り付けして利用できるので、テンプレみたいに使ってみてください。
ブラウザはChrome、エディタはVSCodeを使用しています。
※随時、追記、修正あります。

効率よくコーディングしたい方はこちらをどうぞ

【2023年版】PC・スマホ・タブレットに合わせたメディアクエリのテンプレ【コピペOK】

/* 画面サイズ 600px 未満 */
@media (max-width: 599px) {

}

/* 画面サイズ 600px 以上 1200px 未満 */
@media (max-width: 1200px) {

}

/* 画面サイズ 1200px 以上 */
@media (min-width: 1201px) {

}

最近は、上記のように「@media」のみ書けば問題ないようです。
screenはメディアタイプ、printは印刷タイプなど、省略するとallと同じ挙動になるので、必要なければ省略してOKです。
»メディアクエリーの使用について【mdn web docs】

【2022年版】PC・スマホ・タブレットに合わせたメディアクエリのテンプレ【コピペOK】

下記より、コピペして使えるようになっています。好きなように活用してみてください。

基本的なブレイクポイント/スタンダード

よく利用されるスタンダードな記述は下記の通り。

PCファーストの場合

@media screen and (max-width: 600px) {
 ここにCSSコードを書く。
}

@media screen and (max-width: 765px) {
 ここにCSSコードを書く。
}

@media screen and (max-width: 1074px) {
 ここにCSSコードを書く。
}

@media screen and (max-width: 1440px) {
 ここにCSSコードを書く。
}

スマホファーストの場合

/*====================
スマホを基本設計にする
 - 〜479px：スマートフォン縦
 - 〜768px：タブレット
 - 〜1279px：小型PC(Windows/Macなど)
 - 1280px〜：大型PC(外部モニター/iMacなど)
====================*/
  
/* 〜479px：SP縦
------------------------------ */
ここに基本CSSを書きます。
モバイルファーストでは、モバイル最小値からPCの大きさに向けて、以降のCSSを書いていきます。
    
/* 〜768px：タブレット
------------------------------ */
@media screen and (max-width:768px) {
 ここにCSSコードを書く。
}
  
/* 〜1279px：小型PC
------------------------------ */
@media screen and (max-width:1279px) {
 ここにCSSコードを書く。
}
  
/* 1280px〜：大型PC
------------------------------ */
@media screen and (min-width:1280px) {
 ここにCSSコードを書く。
}

各デバイス別のブレイクポイント

/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1200px) {
}

/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:479px) and (max-width:768px) {
}

スマホ用のMedia Queries
/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (max-width: 479px) {
}

基本的なブレイクポイント（5パターン）

/*====================
スマホを基本設計にする
 - 〜479px：スマートフォン縦
 - 480px〜599px：スマートフォン横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/
  
/* 〜479px：SP縦
------------------------------ */
ここに基本CSSを書きます。
モバイルファーストでは、モバイル最小値からPCの大きさに向けて、以降のCSSを書いていきます。
  
  
/* 480px〜599px：SP横
------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) { 
 ここにCSSコードを書く。
}
  
/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
 ここにCSSコードを書く。
}
  
/* 960px〜1279px：小型PC
------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {
 ここにCSSコードを書く。
}
  
/* 1280px〜：大型PC
------------------------------ */
@media screen and (min-width:1280px) {
 ここにCSSコードを書く。
}

分かりやすいように、Max-widthとMin-widthを２つ記載にしていますが、見づらいと思う方はどちらかを外してもOKです。

SnowMonkeyで使用するメディアクエリ

@media screen and (max-width:999px){
/*↓タブレット用CSSはここに記述↓*/



/*↑タブレット用CSSはここに記述↑*/
}

@media screen and (max-width:639px){
/*↓998px~639pxはここに記述↓*/



/*↑998px~639pxはここに記述↑*/
}

@media screen and (max-width:599px){
/*↓スマホ用CSSはここに記述↓*/



/*↑スマホ用CSSはここに記述↑*/
}

もっとカスタマイズがしたい方はこちら

• 【画像１２枚で解説】My Snow Monkeyを使って本番環境のサイトを直接編集する方法【Snow Monkey】
• 【コピペOK】Snow Monkeyにアニメーションを付ける方法【AOSでサイトに動きを付ける】
• 【Snow Monkey】コピペで使えるブレイクポイントをまとめてみた【Sassもできる】
• 【サクッと５分でOK】Snow Monkeyにアニメーションを付ける方法【wow.js / Animate.css】
• 【簡単】Snow Monkeyのドロワーをカスタマイズをする方法【コピペOK】
• 【Snow Monkey】CSSで簡単！ボタンにエフェクトを加える方法【コピペOK】
• 【Snow Monkey】ナビバーメニューリンクでページ内をスムーススクロールで飛ばす方法【５分で完成】

【2021年9月】追記：iPhone13シリーズのサイズ

２０２１年９月２６日更新

2021年9月、iPhone13シリーズが発売されたので、それぞれの大きさをまとめてみました。

iPhone 13mini

• 375×812
• 5.4インチ

iPhone 13,13Pro

• 390×884
• 6.1インチ

iPhone 13ProMax

• 428×926
• 6.7インチ

今までの仕様とは大きな変更はありません。スマホ時も最低幅320pxを限度にコーディングしておけば問題ないでしょう。

【2022年10月】追記：iPhone14シリーズのサイズ

2022年10月22日更新

2022年9月、iPhone14シリーズが発売されたので、それぞれの大きさをまとめてみました。

iPhone 14

• 390×844
• 6.1インチ

iPhone 14 Plus

• 428×926
• 6.7インチ

iPhone 14 Pro

• 390×844
• 6.1インチ

iPhone 14 ProMax

• 6.7インチ

メディアクエリのポイントまとめ

レスポンシブの考え方

初心者のうちは少し戸惑ってしまいますよね。一旦整理してみましょう。

• min-width / ○px以上だと〜〜となる
• max-width / ○px以下だと〜〜となる

@media only screen and (min-width:1200px) {
〜〜〜// 1200px以上は、ここに記載されたCSSが適用される
〜〜〜// 1200px以下は、ここに記載されたCSSが適用されない
}

ちょっとややこしいですが、上記のようなイメージです。

ありがちな失敗例

• 空白スペースを忘れている
• 表示されない&表示させたい

空白スペースの問題解決は以下のプラグイン設定で解決です。

ブレイクポイントが多すぎる

ブレイクポイントを多く設定すると、メンテナンスが難しくなり、コードが複雑になる可能性もあります。

ブレイクポイントは必要最低限に抑え、それぞれが明確な目的を持つようにするべきです。

• モバイルデバイス: 375px
• タブレット: 768px
• デスクトップ: 1280px以上
• デスクトップモニター：2000px以上

こういった形で自分の中で基準を持っておくのがベストですね。

レスポンシブした時に表示させない&表示させたい方法

サイドバーなどでスマホ表示では見せたくないが、PC画面にした場合は表示させたい時は以下のような認識で解決です。
背景色はplum、横幅は160pxです。

/* display: none で800px以下では表示させない */
aside{
display: none;
}

/* 800px以上から表示する場合display: blockで再度表示させる*/

@media (min-width: 800px) {
    aside{
        display: block;
        background: plum;
        width: 160px;
    }
}

display: noneで表示を消した場合、再度表示させる必要がありますね。
ありがちなミスなので忘れないようにしておきましょう！

ブレイクポイントとは？

ブレイクポイントというのは、ウェブサイト制作やコーディングでよく使われるレスポンシブデザインの要素で、デバイスのスクリーンサイズによってウェブサイトのレイアウトが切り替わるタイミングのことを指しています。

CSSのメディアクエリを使ってこれを実現しており、基本的にはデバイスのスクリーン幅を基準に設定されます。基本的なデバイスはモバイル、タブレット、デスクトップの３種類がメインです。

例えば、2021年の時点では、以下のようなブレイクポイントがよく使われていました。

• モバイル（縦向き）は320pxから420px
• モバイル（横向き）は481pxから767px
• タブレット（縦向き）は768pxから1023px
• タブレット（横向き）や小型デスクトップは1024pxから1279px
• デスクトップは1280px以上

ただ、もう2023年なので、新しいデバイスが出てきたり、既存のデバイスのスクリーンサイズが変わったり、ユーザーの使い方が変わったりして、これらのブレイクポイントが変わってきています。

この記事を書いた人

かん

未経験からWeb制作会社へ転職 | Webの楽しさや転職のあれこれを発信 | 転職サポート「CodeChange」主催 / 転職成功15名超 | WordPress・Shopify | CodeBegin転職講師 | マナブさん弟子 | カオマンガイとサウナ | ブロガー | ●かんろぐ運営/月間7,600PV達成 |

合わせて読みたい記事

＼販売90部突破中／

＼現在90部突破!無料特典あり🎁／ ココナラで営業ゼロで稼ぎたい人はこちら

CSS HTML PROGRAMMING

• Tweet
• facebook