2014-12-11

2014-12-11

メディアクエリ基礎Add Star

 

 

Media Queries


Media Queries

menu1
menu2
menu3

Contents 
Menu1
Contents 
Menu2

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



<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<linkrel="stylesheet"href="css/style.css">
<title>メディアクエリ</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<divid="container">

<header>
<h1>Media Queries</h1>
</header><!-- /header -->

<nav>
<ul>
<li><ahref="#">menu1</a></li>
<li><ahref="#">menu2</a></li>
<li><ahref="#">menu3</a></li>
</ul>
</nav><!-- /nav -->

<divid="content">

<aside>

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

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

</aside>

<article>

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

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

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

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

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

</article>

</div>

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

</div><!-- /#container -->
</body>
</html>


@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, p, small, dl, dt, dd, ul, li,
article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration: none;
}

/* 共通設定およびスマートフォン向けのスタイル */
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  background: #FFF;
}
header {
  text-align: center;
  background: #333;
}
header h1 {
  font-size: 2.3em;
  padding: 0.4em 0 0.4em 0;
  margin: 0 0 0.2em;
  color: #FFF;
}

nav {
  background: #B9DEF3;
  overflow: hidden;
}
nav ul li {
  width: 100%;
  text-align: center;
  line-height: 2.0em;
  color: #FFF;
  border-bottom: 1px solid #FFF;
}
nav li a {
  color: #000;
  font-weight: bold;
}
nav li a:hover {
  color: #FFF;
  background: #379DEC;
  display: block;
}

#content {
  width: 80%;
  margin: 1em auto 1em;
}
#content h1{
  font-weight: bold;
}
section h2 {
  color: #FFF;
  font-size: 1.2em;
}
section h3 {
  font-size: 1.1em;
}
section {
  margin: 0 0 1em 0;
}
article p {
  margin-left: 2em;
}
aside > section {
  height: 130px;
  background: #1D80EF;
  padding: 15px 0 0 20px;
}
article > section {
  padding-bottom: 10px;
  border-bottom: 1px solid #CCC;
}
footer {
  width: 100%;
  text-align: center;
}

/* Media Queries による切り替え */

/* タブレット向けのスタイル:481px ~ 768px */
@media only screen and (min-width: 481px) {
 nav {
   padding: 0 0 0 7%;
 }
 nav ul {
 }
 nav ul li {
  float:left;
  width: 100px;
  text-align: center;
  line-height: 3.0em;
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  border-bottom: none;
 }
aside section {
   width: 90%;
   float: left;
   display: block;
 }
}

/*  PC向けのスタイル:769px~960px */
@media only screen and (min-width: 769px) {
 article {
   width: 65%;
   float: right;
 }
 aside {
   width: 30%;
   float: left;
 }
 footer {
   clear: both;
}