WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

レスポンシブウェブデザインの練習

仕様書を元にレスポンシブデザインのWEBサイトを制作する。
仕様書と素材はこちら
http://yachin29.hatenablog.com/entry/2015/09/01/042053yachin29.hatenablog.com


f:id:mmmmofu:20150901183916p:plain

980px~
全体横幅960pxの中央寄せ
navのli幅120px

641px~979px
ヘッダー、フッターは100%で推移
content,sidebarはpc幅に応じて推移
画像もボックス幅に応じて推移

~640px
2カラムの部分が1カラムになる
navを画面の3等分にする

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CASABLANCA</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<style>
article, aside, dialog, figure, footer, header, main, menu, nav, section {
  display: block;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1><img src="img/logo.png" alt="ロゴ"></h1>
<p><img src="img/header.jpg" alt="header画像"></p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</header>
<div id="wrapper">
<div id="content">
<h2>くつろぎの空間を演出</h2>

<p>インテリアショップカサブランカへようこそ!<br>
ヨーロッパ家具・インテリアをイタリア・スペインより直輸入。<br>
居心地の良いダイニングルーム、心安らぐリビング、ベッドルーム・・・・今、求められる快適空間をカサブランカはご提供します。</p>

<p><img src="img/bed.jpg" alt="ベッド"></p>
<p>まるでフランス映画に出てくるようなスタイルのアイアンベッドです。こんなベッドに横たわるあなたはヒロインです。 プリンセスなハウススタイリングを演出するお道具として、お使いください。</p>

<p>素材は質量感のあるロートアイアンを使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。</p>
</div><!-- /#content -->
<div id="sidebar">
<p><a href="#"><img src="img/banner.png" alt="バナー"></a></p>
<h2>CATEGORIES</h2>
<nav>
<ul>
<li><a href="#">ソファー</a></li>
<li><a href="#">ベッド</a></li>
<li><a href="#">テーブル</a></li>
<li><a href="#">キッチン</a></li>
</ul>
</nav>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->
<footer>
<p class="casa">CASA BLANCA</p>
<p><small>&copy; CASA BLANCA, all rights reserved.</small></p>
</footer>
</div><!-- /#container -->
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
html, body, div, h1, h2, p, small, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    'Hiragino Kaku Gothic ProN',
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
#container {
  width: 960px;
  margin: 0 auto;
}
header {
  overflow: hidden;
  margin-bottom: 20px;
}
header h1 {
  margin-bottom: 20px;
}
header ul {
  overflow: hidden;
  background: -webkit-linear-gradient(top, #ba0001, #5c0001 100%);
  background: linear-gradient(top, #ba0001, #5c0001 100%);
}
header li {
  float: left;
  width: 120px;
}
header li a {
  display: block;
  background: -webkit-linear-gradient(botoom, #ba0001, #5c0001);
  background: linear-gradient(to top, #5c0001, #ba0001);
  text-align: center;
  padding: 20px 0;
  color: #FFF;
  border-right: 1px solid #de7862;
}
header li a:hover {
  background: #540000;
}
#content {
  width: 630px;
  float: left;
}
#content h2 {
  color: #870203;
  margin-bottom: 10px;
  border-bottom: 1px solid #999;
}
#content p {
  margin-bottom: 10px;
}
#content p {
  line-height: 1.4;
}
#sidebar {
  width: 300px;
  float: right;
}
#sidebar h2 {
  color: #ff343f;
  margin-bottom: 10px;
}
#sidebar p {
  margin-bottom: 20px;
}
#sidebar li a {
  display: block;
  padding: 10px;
  padding-left:20px;
  border-bottom: 1px solid #999;
  color: #999;
  background: url(img/listmark.png)no-repeat;
  background-position:0 10px;
}
#sidebar li a:hover {
  background-color: #ffdccc;
}
#sidebar li:first-child {
  border-top: 1px solid #999;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}
footer {
  width: 960px;
  height: 100px;
  background: #990100;
}
footer p {
  color: #FFF;
}
footer p {
  padding: 10px 0 0 10px;
}

@media screen and (max-width: 979px){
#container, header, #wrapper, footer {
  width: 100%;
}
#content {
  width: 65.62%;
}
#sidebar {
  width: 31.25%;
}
}
@media screen and (max-width: 640px){
header li {
  width: 33.33%;
}
header li:last-child a {
  border-right: none;
}
#content, #sidebar {
  float: none;
}
#wrapper {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
}
#sidebar {
  width: 300px;
  margin: 0 auto;
}
#content {
  width: 100%;
}
}