カテゴリー

キーワード

 
> 【CSS】CSS3 のメディアクエ...

【CSS】CSS3 のメディアクエリをざっと紹介します IE8の対応法もアリ


2016 年 2 月 10 日 投稿    view: 29744
タグ:
このエントリーをはてなブックマークに追加

メディアクエリ

こんにちは、WEBマーケティング部の杉尾です。

 

今回は、レスポンシブデザインのサイトを作るのに欠かせないCSS3 メディアクエリ(Media Queries)のお話です。

 

Bootstrapなどのフレームワークを使った場合は、当たり前のようにレスポンシブデザインになりますが、そういうものを使わずにレスポンシブなサイトを作る場合は必ず必要となってくる知識です。

 

また、それらを使う場合でも、ちょっとした改修やデザイン変更時に触ることがあるかもしれません。

是非とも覚えて、積極的に活用しましょう。

 

 

メディアクエリとは?

CSS3から導入された仕様の一つです。

 

よく使う指定として、「ウェブページの表示サイズがこれ以上の幅ならこういうスタイルを適用する」という指定ができます。

 

それ以外にも、
表示サイズ、高さ』(height)
画面の幅、高さ』(device-width、device-height)
画面が横長、もしくは縦長』(orientation)
表示領域の縦横比』(aspect-ratio)
画面の画素密度』(resolution)
表示可能な色の数』(color)
などを指定してスタイルを書くことができます。

 

最近、よく使うのが、画面の画素密度(resolution)でしょうか。

 

前回、高精細ディスプレイの話を詳しくさせていただきましたが、その最後にmin-resolutionを使ったスタイルの書き方を紹介しました。

 

【参考】

ピクセルとdpi、ppi、dppxと解像度の話
 

これから更に画素密度の高いディスプレイも出てくるでしょうから、場合によってはこういう指定を平行して使うことも考えておくべきでしょうね。

 

メディアクエリ、ブラウザ対応状況

では、次にメディアクエリのブラウザ対応状況を見てみましょう。

 

Can I use メディアクエリ

出典:http://caniuse.com/#search=Media%20Queries

 

 

主要ブラウザ全てが対応しています。

 

IE8以下では使えませんが、StatCounterを見ると1.14%しかシェアがありません。

(2016年1~2月現在、日本国内ブラウザシェア)

 

もはや切り捨ててしまってよい気がします。

 

スタットカウンター ブラウザシェア(20161月~2月)

 

出典:http://gs.statcounter.com/#browser_version-JP-daily-20160101-20160201-bar

 

余談ですが、Chomeがシェア一位になっていますね。ウェブ関係者としては嬉しい限りです。

 

 

まだIE8に対応する必要がある案件では、こちらを使ってください。

IEの古いバージョンにも対応させられるJavaScriptファイルです。

 

わざわざダウンロードしなくても使えます。~内にかいてください。

 

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

 

 

HTML5も同時に使いたいときは、<head>~</head>内にこう書いてください。

 

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

 

注意点1:@media (min-width: 980px){…}ではなく、@media screen and (min-width: 980px) {…}と書いてください。
注意点2:Bootstrapなど外部フレームワークを使用した場合、表示が崩れる可能性が高いです。
注意点3:CSSを@importで呼び出している場合、正しく作動しません。

 

基本的な書き方

書き方は二つあります。

一つは、HTMLファイル内の<head>~</head>内に以下のように書く方法です。

 

<link rel="stylesheet" href="pad.css" type="text/css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="smart.css" type="text/css" media="screen and (max-width: 480px)">

 

こう書けば、ウィンドウサイズが481px~768pxまではpad.cssというCSSファイルが適用され、ウィンドウサイズが480px以下の場合は、smart.cssというCSSファイルに書いたスタイルが適用されます。

 

 

もう一つの書き方は以下の通りです。

こちらはCSSファイルを分けたくない場合に有効です。

 

@media screen and (max-width: 768px) {
   /*--- 表示領域が768px以下の場合に適用するスタイル ---*/
   div.sample {height: 300px;}
}
@media screen and (max-width: 480px) {
   /*--- 表示領域が480px以上の場合に適用するスタイル ---*/
   div.sample {height: 200px;}
}

 

私がよくやるのは、CSSファイルの上の方に、PC用(つまり横幅が広い場合)のスタイルを書き、下の方にデバイスごとのスタイル(横幅で振り分ける)を書きます。

 

というのも、CSSはカスケードスタイルシートの名前が示す通り、下に書いたものが優先的に反映されます。(!importantを書いたときなどは除く)

 

ですので、そのように指定してやると、デバイスごとに思い通りのスタイルが適用できるという寸法です。

 

CSSの基本原理はこの記事をご覧ください。

【CSS】CSSとは? カスケーディング・スタイル・シートって? CSSの基礎知識を紹介します
 

 

条件指定は複数可能

また、条件指定は複数可能です。

ですので、こういった指定もできます。(HTML内に書く場合です)

 

<link href="tablets.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 768px)" >

 

 

CSSファイル内に書く場合はこうですね。

 

@media screen and (min-width: 481px) and (max-width: 768px) {
   /*--- ここにスタイルを書く ---*/
}

 

これらは、481px以上、768px以下の場合に適用されるスタイルです。

 


また『,』(カンマ)を使うと、いずれかの場合に適用するというスタイル指定も可能です。

こんな感じに指定してください。

 

@media screen and (max-width: 481px), screen and(min-width: 769px) {
   /*--- ここにスタイルを書く ---*/
}

 

これは481px以下、もしくは769px以上のときに適用されるスタイルです。

 

メディアクエリの具体例

既にご理解いただいているかもしれませんが、具体例を挙げておきます。

これは一例ですので、案件ごとに色々な指定をしてください。

 

まず、<head>~</head>内で指定する場合です。

※最低限の要素しか書いていません

 

【sample.html】(ファイル名はご自身の環境に合わせて変更してください)

 

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="pad.css" type="text/css" media="screen and (max-width: 768px)">
        <link rel="stylesheet" href="smart.css" type="text/css" media="screen and (max-width: 480px)">
        <title>サンプルソース</title>
    </head>
    <body>
        <p>テキストテキストテキスト</p>
    </body>
</html>

 

こちらはウィンドウサイズが769px以上の場合、『style.css』のみが適用されます。
ウィンドウサイズが481px~768pxまでは『style.css』と『pad.css』が適用されます。
また、ウィンドウサイズが480px以下では『style.css』と『smart.css』が適用されます。

 

 

次に、一つのCSSファイル内にスタイルを書く方法です。

 

【style.css】(ファイル名はご自身の環境に合わせて変更してください)

 

body {font-family:"メイリオ",Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,"MS Pゴシック",sans-serif;}
ul li {list-style-type:none;}
div.test {width:650px;}
ul.test {
    margin:10px 0 10px 10px;
    padding:5px;
}
p.text {
    color:red;
}

@media screen and (max-width: 768px) {
   /*--- 表示領域が768px以下の場合に適用するスタイル ---*/
   div.sample {width: 400px;}
    ul.test {
        margin:8px 0 8px 8px;
        padding:4px;
    }
    p.text {
        color:blue;
    }
}
@media screen and (max-width: 480px) {
   /*--- 表示領域が480px以上の場合に適用するスタイル ---*/
   div.sample {width: 100%;}
    ul.test {
        margin:5px 0 5px 5px;
        padding:2px;
    }
    p.text {
        color:black;
    }
}

 

下に書いたメディアクエリ部分のスタイルが上に書いたものを打ち消さなければ、そのままスタイルが適用されます。

 

上記CSSファイルの場合、bodyに指定したフォントの種類(font-family)やリスト横に表示するマーカー文字(list-style-type)に関する指定ですね。

 

一つのファイルに指定すると、呼び出しが外部ファイルの呼び出しが一回で良くなりますが、あまり細かい指定をしていくと、CSSが冗長になるというデメリットもあります。

 

とはいえ、この辺は設計の段階での話にもなります。

 

案件によってディレクターやクライアントとしっかり協議して、どのデバイスを優先させるかということなどを話し合ってください。

 

まとめ

CSS3のメディアクエリをざっと紹介しました。

 

細かいことを言い出せば、別のこと(たとえばデバイスごとの指定など)の話も入ってきますが、それは別の記事でお話しさせていただきたいと思います。

今回は使い方だけ理解していただければ幸いです。

 

最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事