PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

トップ > HTML/CSS > 【RWD】 固定＋可変レイアウト演習

【RWD】 固定＋可変レイアウト演習

HTML/CSS

以下のテキストを使い、レスポンシブウェブデザインの固定＋可変レイアウトの演習を行いました。

スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)

スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)

サイドバーの大きさは変えたくないけど、メインコンテンツは可変させたい場合に使える手法です。
他のレイアウトと違うことは、サイドバーの大きさを固定化させるためにメインコンテンツの中にインナー要素を入れて、インナー要素にサイドバーの大きさ分ネガティブマージンを入れることで、メインコンテンツの幅を可変させることが出来ます。


960px 以上
f:id:game-web-design:20141205091252p:plain


959px~650px
f:id:game-web-design:20141205091237p:plain

649px 以下
f:id:game-web-design:20141205091314p:plain

続きからソースです。



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.css">
<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>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CATEGORY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div id="site">
<h1>PICKUP<span>STREAM</span></h1>
<p>Comfort, Delightful, Refreshing, Time Produce</p>
</div>
</header>
<div id="content">
<div id="content-innner">

<section class="post">
<a href="#">
<div class="date"><span>1</span> AUG</div>
<h2>風車と風の関係</h2>
<p><img alt="" src="img/windmill_thumb.jpg">
風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上の向かって真正面をむかなければなりません。そのため、風車は首が回るようになっており、常に真正面から風を受けることができるようになっています。この･･･</p>
<p class="more">READ MORE</p>
</a>
</section>
<section class="post">
<a href="#">
<div class="date"><span>28</span> JUL</div>
<h2>風車と風の関係</h2>
<p><img alt="" src="img/sand_thumb.jpg">
海岸には砂や貝殻しかないように思ってしまいますが、良く見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。･･･</p>
<p class="more">READ MORE</p>
</a>
</section>
<section class="post">
<a href="#">
<div class="date"><span>12</span> JUL</div>
<h2>ツルを伸ばしてどこまでも</h2>
<p><img alt="" src="img/leaf_thumb.jpg">
ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていくたくましさは見習いたいものです。遠くから見ると細く見えるツルも、近くで見ると意外と太く、簡単に切ることは･･･</p>
<p class="more">READ MORE</p>
</a>
</section>
<section class="post">
<a href="#">
<div class="date"><span>1</span> AUG</div>
<h2>色とりどりの絨毯</h2>
<p><img alt="" src="img/flower_thumb.jpg">
原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には多くの人が訪れ、花を楽しんでいます、花の見ごろは来週半ばごろまで続くそうですので、時間を作って行ってみ･･･</p>
<p class="more">READ MORE</p>
</a>
</section>
</div><!--/#content-inner-->
</div><!--/#content-->
<div id="sidebar">
<div class="ad">
<img alt="広告" src="img/ad.jpg">
</div>
<div class="menu">
<h3>CATEGORIES</h3>
<ul>
<li><a href="">山と森林</a></li>
<li><a href="">海と海岸と空</a></li>
<li><a href="">都市と建築</a></li>
<li><a href="">地下</a></li>
</ul>
</div>
<div class="menu">
<h3>RECENT POSTS</h3>
<ul>
<li><a href="">海岸のデコレーション</a></li>
<li><a href="">風車と海風の関係</a></li>
<li><a href="">ツルを伸ばしてどこまでも</a></li>
<li><a href="">色とりどりの絨毯</a></li>
<li><a href="">休日に買い物に行くなら</a></li>
<li><a href="">構想ビルと風の関係</a></li>
</ul>
</div>
</div><!--/#sidebar-->
<footer>
<p>PICKUP STREAM</p>
<small>Copyright &copy; PICKUP STRAM, all rights reserved.</small>
</footer>

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

CSS：

@charset "utf-8";

/* 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;}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}

/* layout */
body{
  margin: 0 10px;
  font-family: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
}
#container{
  width: 960px;
  margin: auto;
}
header{
  margin-bottom: 30px;
}
nav{
  font-size: 14px;
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  overflow: hidden;
  background: #000;
}
nav li{
  float: left;
  width: 120px;
}
nav li a{
  display: block;
  padding: 5px 0;
  border-right: solid 1px #fff;
  color: #fff;
  text-align: center;
}
nav li a:hover{
  background: #63a2c6;
}
header{
  width: 960px;
  height: 280px;
  background:url(../img/seagull.jpg) left bottom;
}
#site{
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  background: rgba(255,255,255,0.5);
  display: inline-block;
  padding: 10px 20px;
  margin-top: 30px;
}
#site h1{
  font-size: 50px;
  line-height: 1;
}
#site h1 span{
  font-weight: normal;
}
#content{
  width: 630px;
  float: left;
}
.date{
  float: left;
  background: #537685;
  padding: 5px 15px 8px;
  margin: 0 10px 5px 0;
  text-align: center;
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}
.date span{
  display: block;
  font-size: 20px;
  line-height: 1;
}
.post{
  border: solid 1px #aaa;
  margin-bottom: 20px;
}
.post a{
  display: block;
  padding: 10px;
  overflow: hidden;
  color: #000;
}
.post a:hover{
  background: #ddd;
  background: -webkit-gradient(linear,left top, left bottom, from(#333), to(#ddd));
  background: -webkit-linear-gradient(#fff 0%, #ddd 100%);
  background: -moz-linear-gradient(#fff 0%, #ddd 100%);
  background: -o-linear-gradient(#fff 0%, #ddd 100%);
  background: -ms-linear-gradient(#fff 0%, #ddd 100%);
  background: linear-gradient(#fff 0%, #ddd 100%);
}
.post h2{
  font-size: 22px;
  border-bottom: solid 1px #aaa;
  margin: 6px 0 15px;
  padding-bottom: 3px;
}
.post p img{
  float: left;
  margin-right: 10px;
  clear:left;
}
.post p{
  font-size: 14px;
  line-height: 1.6;
  clear: left;
}
.post #sidebar{
  width: 300px;
  float: right;
}
.post .more{
  background: url(../img/more_gray.png) no-repeat center right;
  text-align: right;
  padding-right: 30px;
  color: #888;
  clear: none;
}
#sidebar{
  width: 300px;
  float: right;
}
.ad::before{
  content: 'PROMOTION';
  display: block;
  color: #fff;
  background: #537685;
  margin-bottom: 10px;
}
.ad{
  text-align: center;
}
.ad img{
  width: 300px;
  margin-bottom: 20px;
}
.menu{
  background: #537685;
  padding: 15px;
  margin-bottom: 20px;
}
.menu h3{
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  color: #fff;
  margin-bottom: 25px;
}
.menu ul{
  border-top: solid 1px #aaa;
}
.menu li{
  border-bottom: solid 1px #aaa;
}
.menu li a{
  display: block;
  font-size: 14px;
  color: #fff;
  padding: 10px 0;
}
.menu li a:hover{
  background:#63a2c6;
}
footer{
  clear:both;
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  background-color: #333;
  padding: 10px 10px 20px;
}

footer small{
  font-size: 12px;
  font-weight: bold;
  display: block;
}
  
@media screen and (min-width:650px) and (max-width:979px) {
#container{
  width: 100%;
}
header{
  width: 100%;
  height: 280px;
  background-size: 100% auto;
}
#content{
  width: 100%;
  margin-right: -330px;
}
#content-innner{
  margin-right: 330px;
}
.post img{
  max-width: 35%;
}
}
@media screen and (max-width:649px){
#container{
  width: 100%
}
header{
  margin-bottom: 15px;
  width: 100%;
  height: 140px;
  background-size: 100% auto;
}
nav{
  font-size: 12px;
}
nav ul li{
  width: 25%;
}
nav ul li:last-child a{
  border: none;
}
#site{
  display: block;
  text-align: center;
}
#site h1{
  font-size: 30px;
}
#site p{
  font-size: 12px;
}
#content{
  width: 100%;
  float: none;
}
.post img{
  max-width: 35%
}
.date {
  font-size: 12px;
}
.date span{
  font-size: 12px;
}
.post h2{
  font-size: 18px;
}
#sidebar{
  width: 100%;
  float: none;
}
}