マルチデバイスサイト - web制作学習用ブログ

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マルチデバイスサンプルサイト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style-s.css">
<link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:600px) and (max-width:979px)">
<link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:980px)">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'>
<!--[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]-->
</head>

<body>
<div id="container">
<header>
<h1><figure class="toplogo"><img src="img/logo.png" alt="topロゴ"></figure></h1>
<ul class="icon">
<li><figure><img src="img/twitter.png" width="35" height="35" alt="twitter"></figure></li>
<li><figure><img src="img/facebook.png" width="35" height="35" alt="facebook"></figure></li>
<li><figure><img src="img/googleplus.png" width="35" height="35" alt="google+"></figure></li>
<li><figure><img src="img/rss.png" width="35" height="35" alt="RSS"></figure></li>
</ul>
<figure><img src="img/header.jpg" width="960" height="300" alt="ヘッダー画像"></figure>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="content">
<section class="main">
<h1>海岸のデコレーション</h1>
<p class="category">CATEGORY: 海と海岸と空</p>

<p class="textarea">海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>

<figure class="main_photo"><img src="img/sand.jpg" width="500" height="332" alt="砂浜"></figure>

<p class="textarea">こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>

<p class="textarea">ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</section>
</div>
<div id="sidebar">
<section class="side_menu">
<h1>CATEGORIES</h1>
<ul class="side_list">
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">山と森林</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">海と海岸と空</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">都市と建築</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">地下</li>
</ul>
</section>
<section class="side_menu">
<h1>RECENT POSTS</h1>
<ul class="side_list">
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">海岸のデコレーション</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">風車と海風の関係</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">ツルを伸ばしてどこまでも</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">色とりどりの絨毯</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">休日に買い物にいくなら</li>
<li><img src="img/listmark.png" width="13" height="13" alt="マーク">高層ビルと風の関係</li>
</ul>
</section>
</div>
</div>
<footer>
<small>PICKUP STREAM</small><br>
<small>Copyright 〓 PICKUP STREAM, all rights reserved.</small>
</footer>
</div>
</body>
</html>

スマートフォン用

@charset "utf-8";
body {
  font-family:
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin: 24px 10px;
    line-height: 1.6;
}
header {
  margin:0 0 15px 0;
  overflow: hidden;
}
#content {
  margin: 0 0 50px 0;
}
#sidebar {
  margin: 0 0 50px 0;
}
img {
   max-width: 100%;
   height: auto;
 }
 .icon{
  float: right;
}
header ul li{
  display: inline;
  float:left;
  margin-left: 5px;
}
nav {
  width: 100%px;
  height: 36px;
  margin: 0 0 12px;
    background: #000;
}
nav ul li {
  width: 31%;
  height: 34px;
  line-height:2;
  font-size: 16px;
  color: #fff;
  border-right: 1px solid #FFF;
  text-align:center;
  display: block;
  float: left;

}
.main h1{
  font-size: 24px;
  font-weight:bold;
  border-bottom: 1px solid #999;
}
.category {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}
.textarea {
  padding: 10px;
}
.side_menu h1 {
  font-size: 20px;
  font-weight:bold;
  color: #099;
}
.side_list li{
  border-bottom: 1px solid #999;
  padding:8px 0;

}
.side_menu {
  margin-bottom: 24px;
}
footer{
  padding: 24px 12px;
  background: #000;
  color: #fff;
}

タブレット用

@charset "utf-8";
body {
  font-family:
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
}
#container {
  width: 100%;
  height: auto;
}
header {
  width: 100%;
  height: auto;
}
#wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}
#content {
  width: 62.5%;
  height: auto;
  float: left;
}
#sidebar {
  width: 31.25%;
  height:auto;
  float: right;
  }
footer {
  width: 100%;
  height: auto;
}

その他PC用

@charset "utf-8";
body {
  font-family:
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
}
#container {
  width: 960px;
  height: auto;
  margin: 0 auto;
}
header {
  width: 960px;
  height: auto;
}
.toplogo {
  float: left;
}
.icon{
  float: right;
}
header ul li{
  display: inline;
  float:left;
  margin-left: 5px;
}
nav {
  width: 960px;
  height: 36px;
  margin: 0 auto 24px;
    background: #000;
}
nav ul {
  display: inline;
}
nav ul li {
  border-right: 1px solid #FFF;
  float: left;
  text-align:center;
  display: block;
  width: 100px;
  color: #fff;
}
#wrapper {
  width: 960px;
  height: auto;
  overflow: hidden;
}
#content {
  width: 600px;
  height: auto;
  margin:0 0 20px 20px;
  float:left;
}
.main {
  width: 580px;
  height:auto;
}
.main h1{
  font-size: 24px;
  font-weight:bold;
  border-bottom: 1px solid #999;
}
.category {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}
.main_photo {
  padding: 10px;
}
.textarea {
  padding: 10px;
}
#sidebar {
  width: 300px;
  height: auto;
    margin:0 0 20px 10px;
  float: left;
}
.side_menu h1 {
  font-size: 20px;
  font-weight:bold;
  color: #099;
}
.side_list li{
  border-bottom: 1px solid #999;
  padding:8px 0;

}
.side_menu {
  margin-bottom: 24px;
}
footer{
  width: 960px;
  height: auto;
  margin:0 auto;
  padding: 24px 12px;
  background: #000;
  color: #fff;
}

完成したサンプルサイトはこちら
http://portfolio.tank.jp/responsive4/