メディアクエリでスタイルシートを切り替える

トップページ > ウェブ制作チュートリアル > メディアクエリでスタイルシートを切り替える

第23章　スマートフォンへの対応

★メディアクエリでスタイルシートを切り替える

メディアクエリでスタイルシートを切り替える

前回、meta要素でビューポートを設定して、ウェブページを等倍に表示させられるようになりました。この状態のウェブページに対して、スマートフォン用のスタイルを作成していきます。

スマートフォン用のスタイルを作成すると言っても、スマートフォン向けに新たに別のウェブページを作成するわけではありません。これまでに作成したHTMLファイルをそのまま利用して、スタイルシートを切り替えることでスマートフォンサイトを実現します。

具体的には、ユーザーがパソコンでアクセスしてきた場合と、スマートフォンでアクセスしてきた場合とで、適用するスタイルシートを別のものにします。それを実現するためにメディアクエリという手法を使います。

メディアクエリとは、ユーザーの利用しているデバイスのウィンドウサイズに応じて、適用するCSSを切り替えるというものです。つまり、パソコンモニタのような大きな画面の場合にはパソコン向けのスタイルシートを適用させて、スマートフォンのような小さな画面の場合にはスマートフォン向けのスタイルシートを適用させるということです。

サンプルサイトでは、大きな画面と小さな画面の境目を800ピクセルにしようと思います。 index.htmlに以下の記述を追加してください。

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>

	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_index">
	<img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社">
	</div>

	<!-- サブメニュー（左カラム） -->
	<div id="submenu">
		<h2>新着情報</h2>
		<ul>
			<li><a href="#info0001">新商品のご案内</a></li>
			<li><a href="#info0002">展示会への出展</a></li>
			<li><a href="#info0003">環境への取り組み</a></li>
		</ul>
	</div>

	<!-- インフォメーション（右カラム） -->
	<div id="info">
		<h3 id="info0001">新商品のご案内</h3>
		<p>
		<img src="images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ（中略）
		</p>
		<hr>
		
		<h3 id="info0002">展示会への出展</h3>
		<p>
		<img src="images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ（中略）
		</p>
		<hr>
	
		<h3 id="info0003">環境への取り組み</h3>
		<p>
		<img src="images/index0003.png" alt="環境への取り組みのイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ（中略）
		</p>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

上記のHTMLでは、まずbase.cssを適用して、さらに、ウィンドウサイズが800px以下の場合にはbase_sp.cssも適用するように指定しています。まだ、base_sp.cssを作成していないので、ブラウザで表示をしても特に変化はありません。

ウィンドウ幅に応じて異なるスタイルを指定する

今回追加したHTMLソースの内容を確認しておきましょう。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css">

上記のHTMLでは、link要素でbase.css とbase_sp.css の２つのCSSファイルと関連付けています。 base.cssはすべてのメディアで適用され、base_sp.cssはウィンドウ幅800px以下の場合にだけ適用されます。

メディアクエリを使用してスタイルを指定し分ける場合、ユーザーが利用しているデバイスの種類ではなく、ユーザーが閲覧しているウィンドウ幅に応じてスタイルが適用されます。スマートフォンはウィンドウサイズが小さいため（ウィンドウ幅800px以下のデバイスならば）、base_sp.cssが適用されます。また、ユーザーがパソコンで閲覧している場合にも、ブラウザのサイズを小さくして横幅800ピクセル以下にリサイズすれば、base_sp.cssが適用されることになります。

次回は、base_sp.cssを新規作成して、本当にウィンドウ幅に応じてスタイルが切り替わるかどうか、表示テストをしてみましょう。

まとめ

メディアクエリでユーザーのデバイスのウィンドウサイズを判別して、スタイルシートを切り替える
スマートフォンのような小さな画面の場合には、スマートフォン向けのスタイルシートを適用させる
今回の作例では、ウィンドウ幅が800px以下の場合にスマートフォン向けCSSファイルを適用する

<前へ

目次へ

次へ>