【CSS】PC・スマホ・タブレットに合わせたメディアクエリのテンプレ【コピペOK】
人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート
レスポンシブサイトを作る際のメディアクエリの一覧です。
CSSに貼り付けして利用できます。
テンプレみたいに使ってみてください。
ブラウザはChrome、エディタはVSCodeを使用しています。
※随時、追記、修正あります。
【CSS】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) {}
/*====================
スマホを基本設計にする
- 〜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コードを書く。
}
メディアクエリのありがちな失敗例
- 空白スペースを忘れている
- 表示されない&表示させたい
空白スペースの問題解決は以下のプラグイン設定で解決です。
表示されない&表示させたい
サイドバーなどでスマホ表示では見せたくないが、
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で表示を消した場合、再度表示させる必要がありますね。
ありがちなミスなので忘れないようにしておきましょう〜
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はここに記述↑*/
}