シンプル

シンプルレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブWebデザイン</title>
<style>
html, body, div, img {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  border: 0;
  vertical-align: bottom;
}
body {
  background: #E4E4E4;
}
#container {
  background: #FFF;
  margin: 0 auto;
  padding: 20px;
}
header {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
  background: #CCC;
}
nav {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  background: #CCC;
}
#wrapper {
  width: 100%;
  overflow: hidden;
}
section.content, section.sidebar { 
  float : left;
  background: #CCC;
  height: 100px;
}
section.content {
  width : 100%;
  margin-bottom: 20px;
}
section.sidebar {
  width : 100%;
  margin-bottom: 20px;
}
footer {
  width : 100%;
  height: 100px;
  background: #CCC;
}

/*768px*/
@media screen and (min-width : 768px){
section.content { width : 48.6%; }
section.sidebar { width : 48.6%; }
section.content {
  height: 300px;
  background: #CCC;
  float: left;
}
section.sidebar {
  height: 300px;
  background: #CCC;
  float: right;
}
}

/*1024px*/
@media screen and (min-width : 1024px) {
#container {
  max-width : 960px ;
  background: #FFF;
  margin: 0 auto;
  padding: 20px;
}

#wrapper {
  width: 100%;
  overflow: hidden;
}

section.content { width : 65.3333%; }
section.sidebar { width : 32.3333%; }
section.content {
  height: 300px;
  background: #CCC;
  float: left;
}
section.sidebar {
  height: 300px;
  background: #CCC;
  float: right;
}
footer {
  width : 100%;
  margin : 0 auto;
}

}
</style>
</head>
<body>
<div id="container">
<header>header</header>
<nav>nav</nav>
<div id="wrapper">
<section class="content">content</section>
<section class="sidebar">sidebar</section>
</div>
<footer>footer</footer>
</div>
</body>
</html>
応用

Media Queries

menu1menu2menu3

content Menu1
content Menu2

2015.11.06
レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。
2015.11.06
メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。
2015.11.03
このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。
2015.11.02
今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。
2015.11.01
PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。

&#169; 2015 Webデザインの勉強
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<title>メディアクエリ</title>
<style>
  article, aside, dialog, figure, footer, header,
  main, menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="container">

<header>
<h1>Media Queries</h1>
</header>

<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>

<div id="content">

<aside>

<section>
<h2>content Menu1</h2>

</section>
<section>
<h2>content Menu2</h2>
</section>

</aside>

<article>

<section>
<h3>2015.11.06</h3>
<p>レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。</p> 
</section>

<section>
<h3>2015.11.04</h3>
<p>メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。</p>
</section>

<section>
<h3>2015.11.03</h3>
<p>このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。</p>
</section>

<section>
<h3>2015.11.02</h3>
<p>今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。</p>
</section>

<section>
<h3>2015.11.01</h3>
<p>PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。</p>
</section>

</article>

</div>

<footer>
<small>&copy; 2015 Webデザインの勉強</small>
</footer>

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