メディアクエリの書き方（レスポンシブ化その２）

スタイルシートに指定する方法

ひとつのCSSに書く方法（１）と、CSSを分けて書く方法（２）があるのですが、ひとつのCSSに書いたほうがファイルが少なくて楽かと思ったけど、CSSの知識がない私みたいな人は苦労しました。面倒でもそれぞれのメディアに分けたCSSを作成した方が簡単でした。

1.全てをひとつのCSSに記載の場合

一般の場合

<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="http://exsample.com/css/style.css" />

WordPressの場合

<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />

2.それぞれのメディアに分けてCSSを作成の場合

media=”screen and (max-width:767px)”
画面サイズが767pxまでこのファイルのスタイルが適用される。media=”screen and (min-width:768px) and (max-width:1020px)”
画面サイズ768pxから1020pxまではこのファイルのスタイルが適用される。

media=”screen and (min-width:1021px)”
画面サイズ1021px以上はこのファイルはスタイルが適用される。

小さい方から書くのをモバイルファースト、大きい方から書くのをデスクトップファーストと言います

一般の場合

<!-- ※スマートフォン用のスタイル（smart.css） -->
<link rel="stylesheet" media="screen and (max-width:767px)" type="text/css" href="http://exsample.com/css/smart.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:1020px)" type="text/css" href="http://exsample.com/css/tablet.css" />
<!-- ※パソコンのスタイル（style.css） -->
<link rel="stylesheet" media="screen and (min-width:1021px)" type="text/css" href="http://exsample.com/css/style.css" />

WordPressの場合

自分のコピペの都合でビューポートも書いておきます。

<!--ビューポートここから-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ビューポートここまで-->

<!--メディアクエリここから-->
<!-- ※スマートフォン用のスタイル（smart.css） -->
<link rel="stylesheet" media="screen and (max-width:767px)" type="text/css" href="<?php bloginfo('template_directory'); ?>/smart.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:1020px)" type="text/css" href="<?php bloginfo('template_directory'); ?>/tablet.css" />
<!-- ※パソコンのスタイル（style.css） -->
<link rel="stylesheet" media="screen and (min-width:1021px)" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<!--メディアクエリここまで-->

htmlのheadタグの中に記述する方法

先程とおなじで知識のない私には難しいです。Bloggerの場合はこちらの手法になりますので、もともとレスポンシブのテーマを使用しております。この方法はもう使わないと思いますが健忘録に書いておきます。（そのうち知識がつけば出来るようになるのかもしれない？）

@media only screen and (max-width: 767px) { css{狭いブラウザやタブレット向けCSS} }
/* 　　767pxまでの幅の場合に適応される */

@media only screen and (max-width: 1020px) and (min-width: 768px) { css{スマホ向けCSS}
/* 　　768px〜1020pxまでの幅の場合で適応される */

メディアごとのCSSは

body {
background-color:#222222;
}

とか

p {
font-size: 1em;
}

#container{
width : 95%;
}

のように、CSSを { }の中に書く。