【2022年/ブレイクポイント】PC・スマホ・タブレットに合わせたメディアクエリのテンプレ【コピペOK】
人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート
こんにちは、かんです(»@minimal_kan)
WordPressをメインにWEB制作をしています。»プロフィールはこちら
2022年02月07日更新
レスポンシブサイトを作る際のメディアクエリ、ブレイクポイントの一覧をコピペできるように作成しました。
CSSに貼り付けして利用できるので、テンプレみたいに使ってみてください。
ブラウザはChrome、エディタはVSCodeを使用しています。
※随時、追記、修正あります。
本記事の目次※早く読み進めたい方はこちらで飛んでください
- 基本的なブレイクポイント/スタンダード
- 各デバイス別用のブレイクポイント
- 基本的なブレイクポイント(5パターン版)
- SnowMonkeyで使用するブレイクポイント
- iphone13シリーズまとめ
- メディアクエリのポイントまとめ
2022年4月4日更新
現在、Udemyで期間限定セール中です!通常価格の90%の割引率で最低価格が¥24,000→1,600円からのお得なセール中です!
Udemyのセールをチェックする
【WEB制作×デザイナー向け】Udemyおすすめ優良講座まとめ【2022年/星4つ厳選】
【WEB制作×デザイナー向け】「UdemyでWEB系の教材を購入してみたいけど、どれを購入すればいいか分からない。買うなら良い教材が良いな」こういった悩みを持つ方向けに、Udemyのおすすめ優良講座をまとめてみました。
【2021年版】PC・スマホ・タブレットに合わせたメディアクエリのテンプレ【コピペOK】
下記より、コピペして使えるようになっています。好きなように活用してみてください。
基本的なブレイクポイント/スタンダード
よく利用されるスタンダードな記述は下記の通り。
/*====================
スマホを基本設計にする
- 〜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
を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はここに記述↑*/
}
もっとカスタマイズがしたい方はこちら
【SnowMonkey】WordPressデモサイトのマニュアルを配布【完全無料&実績利用OK】
【完全無料&実績利用OK】SnowMonkeyで作成するWordPressデモサイトのマニュアルを無料配布します。実績利用、ポートフォリオなど自由に使っていただいてOKです。これを元に案件獲得や営業活動の支えになれれば幸いです。WordPressの操作〜ブロックエディタの使い方をマスターできるようになります。
【まとめ記事】Snow Monkeyのカスタマイズをすべて紹介+解説
本記事にこれまでのSnow Monkeyのカスタマイズ記事をまとめてみました。この記事から各カスタマイズのページに飛べるようになっています。アレンジの幅があると何かと便利ですよね。ぜひ使ってみてください。Snow Monkeyを上手に活用して素敵なライフを送りましょう。
- 【画像12枚で解説】My Snow Monkeyを使って本番環境のサイトを直接編集する方法【Snow Monkey】
- 【コピペOK】Snow Monkeyにアニメーションを付ける方法【AOSでサイトに動きを付ける】
- 【Snow Monkey】コピペで使えるブレイクポイントをまとめてみた【Sassもできる】
- 【サクッと5分でOK】Snow Monkeyにアニメーションを付ける方法【wow.js / Animate.css】
- 【簡単】Snow Monkeyのドロワーをカスタマイズをする方法【コピペOK】
- 【Snow Monkey】CSSで簡単!ボタンにエフェクトを加える方法【コピペOK】
- 【Snow Monkey】ナビバーメニューリンクでページ内をスムーススクロールで飛ばす方法【5分で完成】
追記: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の始め方をサポート
ブログの始め方完全マニュアルを公開【収益化まで5つのステップで解説】 » かんろぐ
本記事は、完全初心者向けブログの始め方完全マニュアルになっており、収益化まで5つのステップで分かりやすく解説しています。 1:収益化の仕組みを知る / 2:WordPressで開設 / 3:必要なASPやツールの紹介 / 4:実際に記事を書いてみよう / 5:ブログの悩みや「よくある質問」に答えます
【月5万稼ぐ】無料で出来るWordPressブログの始め方を初心者向けに解説【40枚の画像で紹介】 » かんろぐ
『ブログで稼ぎたいけど、始め方が分からない』という方のために15分でできるWordPressブログの始め方を画像40枚以上使って記事にしてみました。クイックスタートという方法を使えば、誰でも簡単にブログを始めることができます。
【完全無料】これからWordPressを始めたいあなたをサポートします » かんろぐ
WordPressをこれから始めようとする方にサーバーの開設、ドメインの取得、WordPressの立ち上げまでを完全サポートします。 […]