読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

レスポンシブWebデザイン - 実践

レスポンシブWebデザイン

レスポンシブWebデザイン - 実践

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CASA BLANCA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<header class="header">
<h1 class="logo">家具のカサブランカ</h1>
<p class="copy">家具・インテリアなら家具通販のカサブランカ。<br>北欧デザインのベッドなどのインテリアをお選びいただけます。</p>
<p class="main_photo"><img src="img/header.jpg" alt="カサブランカの家具"></p>
</header><!-- /.header -->

<nav class="global_nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
</nav><!-- /navr -->

<div id="wrapper">

<main class="main_content">
<h2>くつろぎの空間を演出</h2>
<p>インテリアショップカサブランカへようこそ!<br>
ヨーロッパ家具・インテリアをイタリア・スペインより直輸入。<br>
居心地の良いダイニングルーム、心安らぐリビング、ベッドルーム・・・・<br>
今、求められる快適空間をカサブランカはご提供します。</p>
<p class="photo"><img src="img/bed.jpg" alt="ふかふかのベッド。今すぐコーディングを終わらせて飛び込みたい。"></p>
<p>まるでフランス映画に出てくるようなスタイルのアイアンベッドです。こんなベッドに横たわるあなたはヒロインです。 プリンセスなハウススタイリングを演出するお道具として、お使いください。</p>
<p>素材は質量感のあるロートアイアンを使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。</p>
</main><!-- /main.main_content -->

<aside class="sidebar">
<p id="banner"><a href="#"><img src="img/banner01.png" alt="バナー"></a></p>
<h2>CATEGORIES</h2>
<ul class="side_nav">
<li><a href="#">ソファー</a></li>
<li><a href="#">ベッド</a></li>
<li><a href="#">テーブル</a></li>
<li><a href="#">キッチン</a></li>
</ul>
</aside><!--/aside.sidebar-->

</div><!--/#wrapper-->

<article class="infoShop">
<h2>お店からのお知らせ</h2>
<dl>
<a href="#">
<dt>2017-2-21</dt>
<dd>春の大型送料無料キャンペーン中!ベッド、デスクなど新生活の必需品も!今なら10%OFFクーポンプレゼント</dd>
</a>
<a href="#">
<dt>2017-2-14</dt>
<dd>ご利用可能エリアが全国に拡大!【不要家具引取りサービス】大型家具の買い替えに便利な不要家具の引取サービスのご利用方法・対象商品をご紹介!</dd>
</a>
<a href="#">
<dt>2017-1-6</dt>
<dd>新春セール★家具・収納アウトレット★お買い求めやすい価格になりました!この機会をお見逃し無く!!</dd>
</a>
<a href="#">
<dt>2016-12-14</dt>
<dd>年末年始の営業について</dd>
</a>
</dl>
</article><!-- /article -->

<footer class="footer">
<div class="footer_contain">
<div id="footer_txt">
<p>CASA BLANCA</p>
<p><small>Copyright &copy; CASA BLANCA, all rights reserved.</small></p>
</div>
<ul class="footer_nav">
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
</div><!-- /.footer_nav -->
</footer>

</body>
</html>



@charset "UTF-8";

/* reset
------------------------------------------*/
html, body, h1, h2, h2, p, 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;
  color: inherit;
}
img {
  border: none;
  vertical-align: bottom;
  max-width:100%;
}

/* body
------------------------------------------*/
body {
  font-size: 16px;
  color: #222;
}

/* PC
------------------------------------------*/

/* header */
.header {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}
.header h1.logo {
  float:left;
  background: url(img/logo.png) no-repeat;
  width:180px;
  height:46px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin: 20px 0 10px 0;
}
.header p.copy {
  float:right;
  width:29em;
  font-size: 0.875em;
  line-height:1.5;
  margin-top: 26px;
}

/* nav */
.global_nav {
  width: 100%;
  height:40px;
  margin-bottom:40px;
  background-color:#900;
}
.global_nav ul {
  width: 960px;
  margin: 0 auto;
  background:#B30002;
  overflow: hidden;
}
.global_nav li {
  float:left;
  width:120px;
  text-align:center;
}
.global_nav li a {
  display:block;
  color:#fff;
  height:40px;
  line-height:40px;
  border-right: 1px solid #F90;
}
.global_nav li:first-child a{
  border-left:1px solid #F90;
}
.global_nav li a:hover {
  background: #570000;
}

/* content */
#wrapper {
  width: 960px;
  overflow: hidden;
  margin: 0 auto 20px auto;
}
.main_content {
  width:630px;
  float:left;
}
.main_content h2 {
  border-left: 20px solid #999;
  border-bottom: 1px solid #999;
  padding:0 0 5px 10px;
  margin-bottom:10px;
  color:#900;
  font-size: 1.6em;
}
.main_content p{
  line-height:1.7;
  margin-bottom: 10px;
}

/* sidebar */
.sidebar {
  width:300px;
  float:right;
}
.sidebar h2 {
  font-family: 'Roboto Slab', serif;
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  margin-top:40px;
  color: #900;
  font-size: 1.4em;
}
.sidebar li {
  font-size: 0.875em;
  border-bottom: 1px solid #999;
}
.sidebar li a {
  display: block;
  padding: 18px 0 16px 2.6em;
  background: url(img/listmark.png) no-repeat 1em center;
  color: #666;
}
.sidebar li a:hover {
  background-color: #FFC4C4;
}

/* .infoShop */
.infoShop {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}
.infoShop h2 {
  font-size: 1.4em;
  font-family:
    "Hiragino Mincho ProN",
    serif;
  color:#900;
  border-bottom: 1px solid #666;
  margin-bottom: 16px;
  padding-bottom: 10px;
}
.infoShop dl {
  margin-left: 3em;
}
.infoShop dt {
  float: left;
  width: 7em;
  font-weight: bold;
  text-align: right;
}
.infoShop dd {
padding-left: 6em;
}
.infoShop dt, .infoShop dd {
margin-bottom: 20px;
line-height: 1.4;
}

/* footer */
.footer {
  background:#900;
  color:#FFF;
  padding:20px 0;
  box-sizing: border-box;
}
.footer_contain {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}
.footer #footer_txt {
  float: left;
  width:60%;
}
.footer ul {
  float:right;
  width:30%;
  overflow:hidden;
}
.footer li {
  float: left;
}
.footer li a {
  color:#FFF;
  font-size:50px;
  margin-right:20px;
}
.footer li:hover a {
color:#D8D8D8;
}
.footer li:last-child {
  margin-right:0;
}

@media screen and (max-width:959px) {
.header, #wrapper, .global_nav ul, #infoShop, .footer_contain {
  width:90%;
  margin: 0 auto;
}
.header h1 {
  margin-left:10px;
}
.global_nav li:first-child a{
  border-left:none;
}
#wrapper {
  margin-bottom: 20px;
}
.main_content {
  width:65.625%; /*630px÷960px=65.625%*/
  font-size: 0.875em;
}
.sidebar {
 width:31.25%;
}
#infoShop {
padding: 0;
font-size: 0.875em;
}
#infoShop dl {
  margin: 0;
  padding: 0;
}
footer {
  width:100%;
}
}

@media screen and (max-width:767px) {
.header {
  width:100%;
}
.header h1.logo {
  float: none;
  width: 180px;
  margin: 20px auto 10px auto;
}
.header p.copy {
  width:100%;
  margin: 0 0 10px 0;
  padding: 0 10px 0 20px;
  box-sizing: border-box;
}
#wrapper {
  width: 100%;
  margin: 0 0 30px 0;
}
.main_content {
  float: none;
  width: 100%;
  padding: 0 1em;
  box-sizing: border-box;
  font-size: 0.875em;
}
.sidebar {
  float:none;
  width:90%;
  margin: 0 auto;
}
.sidebar p#banner {
  margin-top: 20px;
  text-align:center;
}

.global_nav {
  height:80px;
  margin-bottom:40px;
  background: #D50000;
}
.global_nav ul {
    width: 100%;
}
.global_nav li{
  width:50%;
}
.global_nav li a {
  border-top:1px solid #F90;
  box-sizing: border-box;
}
.global_nav li:nth-child(even) a {
  border-right:none;
}

.infoShop {
  width: 90%;
  margin: 0 auto 0 auto;
}
.infoShop dl {
  margin-left: 10px;
}
.infoShop dt {
  float: none;
  margin-bottom: 4px;
  text-align: left;
}
.infoShop dd {
  margin-left: 1em;
  padding-left: 0;
}
.footer_contain {
  width: 100%;
  overflow: hidden;
  padding-left: 2em;
  box-sizing: border-box;
}
.footer #footer_txt {
  float: none;
  width:100%;
}
.footer ul {
  margin-top:20px;
  float: none;
  width:100%;
}

}