ホーム >  WEB全般 >  メディアクエリで画面サイズごとCSSを切り替えるには?


Posted:2014/11/30 9:00:33 AM|Category : WEB全般

メディアクエリで画面サイズごとCSSを切り替えるには?

 Media Queriesとは、「ブラウザの表示領域」や「端末の画面サイズ」など閲覧環境の条件に応じてスタイルを振り分けるCSS3の機能です。
スクリプトを用いなくてもサイトをパソコンやスマートフォンで見るときのデザインを簡単に適用できます。

従来の方法とCSS3の違い

従来の方法

 以下のHTML(link要素)のように、「印刷用(print)」や「画面用(screen)」を指定します。

<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="print.css" type="text/css" media="print">

単純な括りでしかCSSの適用対象を指定できませんでした。

画面上に表示される場合:「screen.css」を適用
印刷される場合:「print.css」を適用

CSS3

 以下のHTMLのように、「表示領域の横幅が480px以下の場合にのみ適用」や「表示領域の横幅が900px以上の場合にのみ適用」など、細かい条件が指定できます。

<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (max-width: 480px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 900px)">

ブラウザの表示領域の横幅が480px以下の場合のみ:「phone.css」を適用
ブラウザの表示領域の横幅が900px以上の場合のみ:「pc.css」を適用

CSS内でも適用可能

 link要素だけでなく、CSS内でも指定できます。CSSファイルに、下記のように記述することもできます。

@media screen and (max-width: 320px) {
   /* 表示領域が320px以下の場合に適用 */
   div#sidebar { width: 100%; }
}
@media screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用 */
   div#sidebar { width: 240px }
}

この方法なら、すべてのスタイルを1つのCSSソース中にまとめることができます。

記述例

link要素に記述

 link要素で分岐する方法です。

  • ・横幅が568px:css1 だけが適用。
  • ・横幅が853px:css1、css2 が適用。
  • ・横幅が1,024px :css1、css2、css3 が適用。
  • ・横幅が1,800px:css1、css2、css3、css4 が適用
<link href="css1.css" rel="stylesheet" type="text/css">
<link href="css2.css" rel="stylesheet" type="text/css" media="screen and (min-width: 641px)">
<link href="css3.css" rel="stylesheet" type="text/css" media="screen and (min-width: 961px)">
<link href="css4.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)">

1つのcssファイルに記述

 単一のCSSファイルで分岐させます。

/* ▼すべての場合に適用 */
div#sidebar { width: 100%; }

/* 横幅が641px以上の場合に適用 */
@media screen and (min-width: 641px) {
   div#sidebar { width: 160px; }
}

/* 横幅が961px以上の場合に適用 */
@media screen and (min-width: 961px) {
   div#sidebar { width: 25%; }
}

横幅の最小単位と最大単位を指定

 条件指定は複数記述できます。
以下のように、最小サイズと最大サイズの両方を指定することもできます。

link要素

  • ・横幅が0px~480px:phones.css を適用。
  • ・横幅が481px~800px:tablets.css を適用。
  • ・横幅が1,024px :allpcs.css を適用。
<link href="phones.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)" >
<link href="tablets.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 800px)" >
<link href="allpcs.css" rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" >

cssファイル

 ※「min-width: 0px」は記述不要です。

@media screen and (min-width: 0px) and (max-width: 480px) {
   div#sidebar { width: 100%; }
}
@media screen and (min-width: 481px) and (max-width: 800px) {
   div#sidebar { width: 160px; }
}
@media screen and (min-width: 801px) {
   div#sidebar { width: 25%; }
}

andで条件を絞る

 Media Queriesで適用対象を指定する際には、「and」を使って条件を絞ることができます。

screen and (min-width: 480px) and (max-width: 920px)

複数の条件を列挙

 カンマ記号を使うと、複数の条件を列挙できます。
「or」の役割を果たします。

print, screen and (min-width: 300px), screen and (max-width: 900px)

※「print」や「screen」は、CSSの「Media Type」の値です。
all、screen、print、handheld、tvがあります。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告