WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

レスポンシブデザインの復習

http://yachin29.html.xdomain.jp/test6.zip


1、試験データ(zipファイル)をダウンロードし解凍する
2、新規にフォルダーを作成し、自分の苗字(半角英数字)をつける。
3、完成イメージ(kansei.jpg)を基に以下の様に制作する事。指示の無い箇所は適宜各自で判断する事
4、画像制作(サイドバーのバナー)※photoshop,Illustrator等を使用
5、画像はlistmark.png以外は全てimg要素で配置する事
6、提出フォルダーをzip圧縮してメールで送ること。

HTMLソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CASA BLANCA</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div id="container">
<header>
<h1 id="logo"><img src="img/logo.png" alt="カサブランカ"></h1>
<p><img src="img/header.jpg" alt="ベッダー用リビング画像"></p>
<nav id="main-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>

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

<p class="photo"><img src="img/bed.jpg" alt="ふかふかのベッド。今すぐコーディングを終わらせて飛び込みたい。"></p>
<p>まるでフランス映画に出てくるようなスタイルのアイアンベッドです。こんなベッドに横たわるあなたはヒロインです。 プリンセスなハウススタイリングを演出するお道具として、お使いください。</p>

<p>素材は質量感のあるロートアイアンを使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。</p>
</section><!--content-->

<aside id="sidebar">
<p  id="banner"><a href="#"><img src="img/ad-2.jpg" alt="バナー"></a></p>
<h3>CATEGORIES</h3>
<nav>
<ul>
<li><a href="#">ソファー</a></li>
<li><a href="#">ベッド</a></li>
<li><a href="#">テーブル</a></li>
<li><a href="#">キッチン</a></li>
</ul>
</nav>
</aside><!--sidebar-->
</div>

<footer>
<p>CASA BLANCA</p>
<p><small>Copyright &copy; CASA BLANCA, all rights reserved.</small></p>
</footer>
</div><!--conteiner-->
</body>
</html>


スタイルシート

@charset "UTF-8";
/*リセット*/
html,body,div,section,nav,h1,h2,h3,p,ul,li,a,img,small {
  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 {
  border: none;
  vertical-align: bottom;
}
article, aside, dialog, figure, footer, header, menu, nav, section {
  display: block;
}
/*スタイルーPC*/
#container {
	width:960px;
	margin:0 auto;
	overflow:hidden;
}
header {
	margin-bottom:40px;
}
#logo {
	margin-bottom:10px;
}
#main-nav {
  width: 100%;
  height:40px;
	background-color: #FF0000;
	background: -webkit-linear-gradient(bottom, #570000, #D50000);
	background: linear-gradient(to top, #570000, #D50000);
}
#main-nav li {
	float:left;
	width:120px;
	text-align:center;
}
#main-nav a {
  display:block;
	color:#fff;
	height:40px;
	line-height:40px;
  border-right: 1px solid #F90;
}
#main-nav a:hover {
  background: #570000;
}
#wrapper {
  overflow: hidden;
  margin-bottom:20px;
}
#content {
	width:630px;
	float:left;
}
#content h2 {
  color:#900;
	border-bottom: 1px solid #999;
	padding-bottom:5px;
	margin-bottom:10px;
}
#content p{
	line-height:1.7;
  margin-bottom: 10px;
}
#sidebar {
	width:300px;
	float:right;
}
h3 {
	border-bottom: 1px solid #999;
  padding-bottom: 10px;
	margin-top:40px;
	color: #F39;
}
#sidebar li {
  font-size: 14px;
  border-bottom: 1px solid #999;
}
#sidebar li a {
  display: block;
  padding: 12px 0 12px 18px;
  background: url(img/listmark.png) no-repeat left center;
  color: #666;
}
#sidebar li a:hover {
  background-color: #FFC4C4;
}

footer {
	background-color:#900;
	color:#FFF;
	padding:20px;
}

@media screen and (max-width:979px) {
#container {
	width:97.92%;/*20px÷960=2.08%*/
  margin: 0 auto;
}
header {
	width:100%;
}
footer {
	width:100%;
}
#content {
	width:65.625%; /*630px÷960px=65.625%*/
}
#sidebar {
 width:31.25% /*300px÷960px=31.25%*/
}
img {
	max-width:100%;
}
}
@media screen and (max-width:640px) {
#content {
	float:none;
	width:100%;
}
#content p.photo {
  text-align: center;
}
#sidebar {
	float:none;
	width:300px;
	margin:0 auto;
}
#main-nav li{
	width:33.33%;
  box-sizing: border-box;
}
#main-nav li:last-child a {
  border-right: none;
}
}