かんろぐ Written by kan

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

CODE HTML/CSS

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

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

2021年9月26日更新

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

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

本記事の目次※早く読み進めたい方はこちらで飛んでください

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

【2021年/ブレイクポイント】PC・スマホ・タブレットに合わせたメディアクエリのテンプレ【コピペOK】
下記より、コピペして使えるようになっています。好きなように活用してみてください。

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


/*-----------------------------------------------------*/
/* 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) {
}

基本的なブレイクポイント(3パターン)


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

基本的なブレイクポイント(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-widthMin-widthを2つ記載にしていますが、見づらいと思う方はどちらかを外しても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はここに記述↑*/
}

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


追記:iPhone13シリーズのサイズ

追記:iPhone13シリーズのサイズ

2021年9月26日更新

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

iPhone 13mini

  • 375×812
  • 5.4インチ

iPhone 13,13Pro

  • 390×884
  • 6.1インチ

iPhone 13ProMax

  • 428×926
  • 6.7インチ

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

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

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

レスポンシブの考え方

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

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

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

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

ありがちな失敗例

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

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

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

サイドバーなどでスマホ表示では見せたくないが、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で表示を消した場合、再度表示させる必要がありますね。

ありがちなミスなので忘れないようにしておきましょう!

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート