初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS メディア クエリを使用してレスポンシブを作成

f:id:bellsmarket:20150427225343p:plain:h400f:id:bellsmarket:20150427224555p:plain:h400
f:id:bellsmarket:20150427225326p:plain:h400
レスポンシブデザインの初歩を作成してみます。
今回は通常の幅を3カラムで記述し、幅が狭まる毎に
カラム数を減らしていきます。

メディアクエリを使ってCSSを書いてみます。
メディアクエリとは、Webページの見栄えを記述するCSSのバージョン3で追加された仕様の一つで、
表示された画面環境に応じて適用するスタイルを切り替える機能です。


CSSの切り替わるポイントをブレイクポイント言います。
分かりやすいように切り替わる毎にバックグラウンドの色を変えています。

幅毎に下記の記述を使って指定していきます。

@media screen and (min-width:⚪︎⚪︎⚪︎px) and (max-width:⚪︎⚪︎⚪︎px){
//通常のCSSと同じように記載します。
}

例文

* {
	margin:0;
	padding: 0;
}
#container {
	width:960px;
	margin: 0 auto;
	overflow:hidden;

}
ul {
	list-style:none;
}
img {
	vertical-align:bottom;
}
a {
	text-decoration:none;
}
h1 {
	margin-bottom:20px;
}
.nav {
	overflow:hidden;
}
.content {
	float:left;
	width:320px;
	overflow:hidden;
}


li {
	float:left;
	margin-bottom:20px;
	margin-right:20px;
}
.back {
	clear:both;
}
.left {
	float:right;
}
.scrolltop {
	position:fixed;
	bottom: 30px;
	right:30px;
	font-size:30px;
}

/*レスポンシブ対応*/
@media screen and (min-width:640px) and (max-width:959px){
	body {
	background:#333;
	}
	#container {
	width:640px;
	margin: 0 auto;
	overflow:hidden;
	}
.content.three {
	width:640px;
	overflow:hidden;
}
 three li {
	float:left;
}
}

@media screen and (max-width:639px){
	body {
		background:red;
	}
	#container {
		width:320px;
		margin: 0 auto;
		overflow:hidden;
	}
	.content {
	float:none;	
	}
}
</style>
<body>
<div id="container">
	<div class="content">
		<header>
			<h1><img src="img/logo01.png" alt="楽しいおかず"></h1>
			<div id="nav">
				<ul>
					<li><a href="#"><img src="img/nav01_01.png" alt="concept"></a alt=""></li>
					<li><a href="#"><img src="img/nav02_01.png" alt="menu"></a alt=""></li>
					<li><a href="#"><img src="img/nav03_01.png" alt="access"></a alt=""></li>
					<li><a href="#"><img src="img/nav04_01.png" alt="news"></a alt=""></li>
				</ul>
			</div><!--nav-->
		</header>
				<ul class="section">
					<li><img src="img/ph01_l.jpg" alt=""></li>
				</ul>
				<ul class="section">
					<li><img src="img/ph02_mt.jpg" alt=""></li>
					<li><img src="img/ph03_s.jpg" alt=""></li>
					<li><img src="img/ph04_s.jpg" alt=""></li>
				</ul>
				<ul class="section">
					<li><img src="img/ph05_my.jpg" alt=""></li>
					<li><img src="img/ph06_s.jpg" alt=""></li>
					<li><img src="img/ph07_s.jpg" alt=""></li>
				</ul>
	</div><!--content-->
	<div class="content">
		<ul class="section">
			<li><img src="img/ph08_my.jpg" alt=""></li>
			<li><img src="img/ph09_s.jpg" alt=""></li>
			<li><img src="img/ph10_s.jpg" alt=""></li>
		</ul>
		<ul class="section">
			<li><img src="img/ph11_l.jpg" alt=""></li>
		</ul>
		<ul class="section">
			<li><img src="img/ph12_s.jpg" alt=""></li>
			<li class="left"><img src="img/ph13_mt.jpg" alt=""></li>
			<li><img src="img/ph14_s.jpg" alt=""></li>
		</ul>
		<ul class="section">
			<li><img src="img/ph15_l.jpg" alt=""></li>
		</ul>
		<ul class="section">
			<li><img src="img/ph16_s.jpg" alt=""></li>
			<li><img src="img/ph17_s.jpg" alt=""></li>
			<li><img src="img/ph18_my.jpg" alt=""></li>
		</ul>
	</div><!--content-->
	<div class="content last  three">
		<ul class="section">
			<li><img src="img/ph19_l.jpg" alt=""></li>
		</ul>
		<ul class="section">
			<li><img src="img/ph20_s.jpg" alt=""></li>
			<li class="left"><img src="img/ph21_mt.jpg" alt=""></li>
			<li><img src="img/ph22_s.jpg" alt=""></li>
		</ul>
		<ul class="section">
			<li><img src="img/ph23_s.jpg" alt=""></li>
			<li><img src="img/ph24_s.jpg" alt=""></li>
			<li><img src="img/ph25_my.jpg" alt=""></li>
		</ul>
		<ul class="section">
			<li><img src="img/ph26_s.jpg" alt=""></li>
			<li><img src="img/ph27_s.jpg" alt=""></li>
			<li><img src="img/ph28_s.jpg" alt=""></li>
			<li><img src="img/ph29_s.jpg" alt=""></li>
		</ul>
		<ul class="section last">
			<li><img src="img/ph30_l.jpg" alt=""></li>
		</ul>
	</div><!--content-->
	<p class="scrolltop"><a  href="#top">トップに戻る</a></p>
	</div><!--container-->
	

</body>
</html>
topへ戻る