2014.6.11

Media Queries基礎Add Star

スマートフォンサイト

------------------------------index.html------------------------------

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>sample1</title>




</head>
<body>
<div id="stage">
<header id="header">
<h1>Media Queries</h1>
</header>
<nav id="nav">
<ul class="cf">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
<div id="content" class="cf">
<aside class="content_menu cf">
<section id="content_menu1">
<h1>content Menu1</h1>
</section>
<section id="content_menu2">
<h1>content Menu2</h1>
</section>
</aside>
<article class="main">
<section id="body_link">
<h1>2013.03.14</h1>
<p>レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。</p>
</section>
<section id="section_link">
<h1>2013.03.12</h1>
<p>メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。</p>
</section>
<section id="article_link">
<h1>2013.02.25</h1>
<p>このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。</p>
</section>
<section id="aside_link">
<h1>2013.02.10</h1>
<p>今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。</p>
</section>
<section id="nav_link">
<h1>2013.02.09</h1>
<p>PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。</p>
</section>
</article>
</div>
<footer id="footer">
<small>(c) Webデザインの勉強</small>
</footer>
</div>
</body>
</html>

------------------------------style.css------------------------------

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
margin:0;
padding:0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
body{
line-height:1.0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
ins{
background-color:#BBE3D7;
color:#000;
text-decoration:none;
}
mark{
background-color:#BBE3D7;
color:#000;
font-style:italic;
font-weight:bold;
}
del{
text-decoration:line-through;
}
abbr[title], dfn[title]{
border-bottom:1px dotted;
cursor:help;
}
table{
border-collapse:collapse;
border-spacing:0;
}
hr{
display:block;
height:1px;
border:0;
border-top:1px solid #FFF;
margin:1em 0;
padding:0;
}
input,select{
vertical-align:middle;
}

/* clearfix */
.cf{
zoom:1.0;
}
.cf:before,.cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}

/* 共通設定およびスマートフォン向けのスタイル */
body{
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
width:100%;
font-size:16px;
line-height:1.5em;
background-color:#FFF;
}
header{
text-align:center;
padding-left:6%;
background-color:#333;
}
header h1{
font-size:2.3em;
padding:0.4em 0 0.4em 0;
margin:0 0 0 2em;
color:#FFF;
}
nav{
background-color:#81E24B;
}
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:#3F7C48;
display:block;
}
#content{
width:80%;
margin:1em auto 1em;
}
#content h1{
font-weight:bold;
}
aside h1{
color:#FFF;
}
section{
margin:0 0 1em 0;
}
article.main p{
margin-left:2em;
}
aside > section{
height:130px;
background-color:#3C0;
padding:15px 0 0 20px;
}
article > section{
border-bottom:1px solid #FFF;
}
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;
}
#content_menu1{
width:45%;
float:left;
display:block;
}
#content_menu2{
width:45%;
float:right;
display:block;
}
}

/* PC向けのスタイル：769px～960px */
@media only screen and (min-width: 769px) {
article.main{
width:65%;
float:right;
}
aside.content_menu{
width:30%;
float:left;
}
aside.content_menu ul li{
font-size:1.1em;
}
#content_menu1,#content_menu2{
width:95%;
float:none;
}
}