【CSS3】メディアクエリ指定でデバイスの横幅ごとに表示を切り替える

CSS3ではユーザのブラウザやデバイスの情報を取得することができるようになり、それに対応したスタイルの適用が可能になった。
これにより、ひとつのHTMLファイルで複数のデバイスに対応できるようになった。

CSS3のメディアクエリ(@media)を使ってデバイスの横幅ごとにデザインを切り替えてみる。
今回は、1,000px以上をPC・タブレット(横)、1,000px以下をタブレット(縦)、480px以下をスマートフォン(横)(縦)と想定してスタイルを指定してみる。

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {

}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {

	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {

	}
}

実際に試してみる。
【index.html】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>title</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!-- page content -->
<div id="contents">
<h1><img src="img/common/img_head.gif" width="100%"/></h1>
	<ul id="main_menu">
		<li class="mainMenu">メニュー1</li>
		<li class="mainMenu">メニュー2</li>
		<li class="mainMenu">メニュー3</li>
		<li class="mainMenu">メニュー4</li>
		<li class="mainMenu">メニュー5</li>
		<li class="mainMenu">メニュー6</li>
		<li class="mainMenu">メニュー7</li>
		<li class="mainMenu">メニュー8</li>
		<li class="mainMenu">メニュー9</li>
		<li class="mainMenu">メニュー10</li>
	</ul>
</div>
</body>
</html>

【common.css】

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {
	width: 980px;
	margin: auto;
}
ul#main_menu {
	display: block;
	width: 100%;
	height: 50px;
}
ul#main_menu li.mainMenu{
	display: block;
	float: left;
	color: #FFFFFF;
	width: 10%;
	height: 50px;
	line-height: 50px;
	background: #000000;
	text-align: center;
}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 20%;
		height: 50px;
		line-height: 50px;
		background: #0000FF;
	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 50%;
		height: 50px;
		line-height: 50px;
		background: #FF0000;
	}
}

【実行結果】

メディアクエリ

ウィンドウの横幅を縮めると、ウィンドウの横幅に応じてそれぞれ指定したスタイルが適応される。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>