WordPress　固定ページの設計　詳細版　スマホ対応 » １１．メディアクエリーの作成

１１．メディアクエリーの作成

表示機器の画面サイズに合わせて表示のさせ方を変えるのがメディアクエリーです。このサイトは、

※　スマホ幅　480px以下

※　タブレット幅　481px ～ 768px以下

※　パソコン幅　769px以上

１）スマホ用メディアクエリー

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* --------スマホ向けＣＳＳメディアクエリー ------- */
@media only screen and (max-width: 480px) {
body {font-size:0.75em;}
#header_img {width:100%;
max-width:478px;}
#nav {max-width:245px;}
#nav li {padding-left: 5px;
padding-right: 5px;}
#content_plan {width:100%;}
#side_menu_box {width:100%;}
#box3_all {display:block;
width:100%;}
.box3 {width:97%;
margin:0 auto;
overflow: auto;}
.box3:nth-child(1){
margin-bottom: 10px; }
.box3:nth-child(2){
margin-bottom: 10px; }
.box3_img {width:100%; margin:0 auto; }
.Wikipedia {padding: 0px 10px;}
#home_document {width:100%;}
#home_site_design {width:100%;
margin-top:15px;
margin-left:0px;}
#sumaho_menu_open {display:block;}
#sumaho_menu_close {display:none;}
#side_menu_box {display:none;}
}

行番
説　明

2
最大幅480px（480px以下）の時に適用するメディアクエリーの宣言文

6
メインメニュー幅を縮小

9,10
記事内容幅を100%、サイドメニュー幅を100%にして枠組みを解除

13～15
旅行プラン横並び3列を解除し、縦3列表示＆中央寄せ

20～21
画像を100%にして、画像の下に記事文書を表示

26～28
小さく狭い画面を広げるため一時的にメニューを隠し、Menu Openボタンで再表示
　→　JavaScriptでコントロール

29
メディアクエリー文の終了、忘れやすいので注意

Page Top ↑

２）タブレット用メディアクエリー

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/* -------タブレット向けＣＳＳメディアクエリー ------- */
@media only screen and (min-width: 481px) and (max-width: 768px) {
#header_img {width:100%;
max-width:768px;}
#nav {max-width:360px;}
#nav li {
padding-left: 15px;
padding-right: 15px;}
#side_menu_box {width:100%;}
#content_plan {width:100%;}
#box3_all {display:block;
width:100%;}
.box3 {width:97%;
margin:0 auto;
overflow: auto;}
.box3:nth-child(1){
margin-bottom: 10px; }
.box3:nth-child(2){
margin-bottom: 10px; }
.box3_img {width:40%;
float:left; }
.Wikipedia {padding-left: 42%;}
#home_document {width:95%;}
#home_site_design {width:95%;
margin-left:10px;
margin-top:15px;}
#sumaho_menu_open {display:block;}
#sumaho_menu_close {display:none;}
#side_menu_box {display:none;}
}

行番
説　明

2
481px以上768px以下の時に適用するメディアクエリーの宣言文

9,10
記事内容幅を100%、サイドメニュー幅を100%にして枠組みを解除

13～15
旅行プラン横並び3列を解除し、縦3列表示＆中央寄せ

20～22
画像の右に記事文書を表示

27～29
スマホと同様にメニューを隠し、Menu Openボタンで再表示
　→　JavaScriptでコントロール

Page Top ↑

３）パソコン用メディアクエリー

1
2
3
4
5
6
7
8
9
10
11
12

/* -------パソコン向けＣＳＳメディアクエリー ------- */
@media only screen and (min-width: 769px) {
#header_img {width:100%;
max-width:980px;}
#nav {max-width:360px;}
#nav li {padding-left: 15px;
padding-right: 15px;}
#home_site_design {margin-left:10px;}
#sumaho_menu {display:none;}
#side_menu_box {display:block;}
.box3:nth-child(2) {margin: 0px 10px 0px 10px;}
}

行番
説　明

2
769px以上の時に適用するメディアクエリーの宣言文

9
メニューの表示、非表示のボタンは表示しない

11
横3列の中央ボックスに左右の余白

Page Top ↑