３ヶ月目実践演習 - web-0127のブログ

CSS基礎演習

いままでの課題が提出できていない人
フォルダー名「cafe_自分の名前」を圧縮してメールに添付して提出

cafe67について
おいしいケーキでほっと一息

カフェロクナナのケーキは毎日手づくり。
季節ごとにいろんな味を楽しめます。
まるでリビングにいるような気分

あかるい光がさしこむ店内は、居心地バツグン。
じぶんの家にいるような気分でお過ごしください。

ホーム
おすすめメニュー
お店へのアクセス
お問い合わせ

Copyright &#169; 2015 cafe67

素材

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>cafe67</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#"><img src="img/logo.png" alt=""></a></h1>
</div><!-- /#header -->
<div id="wrapper">
<div id="content">
<h2><img src="img/h2.jpg" alt="cafe67について"></h2>
<h3>おいしいケーキでほっと一息</h3>
<p><img src="img/img_cake.jpg" alt="">
カフェロクナナのケーキは毎日手づくり。<br>
季節ごとにいろんな味を楽しめます。</p>
<h3>まるでリビングにいるような気分</h3>
<p><img src="img/img_living.jpg" alt="">
あかるい光がさしこむ店内は、居心地バツグン。<br>
じぶんの家にいるような気分でお過ごしください。</p>
</div><!-- /#content -->
<div id="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="menu.html">おすすめメニュー</a></li>
<li><a href="#">お店へのアクセス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#wrapper -->
<div id="footer">
<p><small>Copyright &#169; 2015 cafe67</small></p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

@charset "UTF-8";

/* reset */
body, div, h1, h2, h3, 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;
}
img{
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  background: #E2EDC2;
  font-size: 16px;
  color:#666;
}

/* layout */
#container {
  width:900px;
  margin: 0 auto;
}
#header{
height:140px;
margin: 20px 0;
background:url(img/bg_header.png) repeat;
border-radius: 10px;
}
#wrapper {
  overflow: hidden;
  background: #FFF;
}
#content{float:right;
width:635px;
margin: 20px 20px 0 0;

}
#nav{
  float:left;
  width: 200px;
  margin: 20px 0 0 20px;
}
#footer{
  text-align:center;
  padding: 20px 0;
  background: #FFF;
}

/* item */
#header h1 {
  padding: 28px 0 0 32px;
}
#content h2 {
  margin-bottom: 40px;
}
#content h3 {
  clear: right;
  padding-left:16px;
  margin: 20px 0 10px 15px;
  background:url(img/icon.png) no-repeat left 8px;
  color:#6A8125;
}
#content p {
  margin-left: 2em;
  line-height: 1.5;
}
#content p img {
  float:right;
  margin-bottom: 20px;
}
#nav li {
  height: 40px;
  margin-bottom: 16px;
}
#nav li a {
  display: block;
  line-height: 40px;
  padding-left: 16px;
  color: #86A331;
  font-weight: bold;
  border: 1px solid #86A331;
}
#nav li a:hover {
  border: 1px solid #F3A42C;
  background: #F3A42C;
  color: #FFF;
}

CSS実践演習

それぞれの記述をしなさい（画像・タイトルは、適宜）

<!DOCTYPE html>
<html lang="ja
<head>
<meta charset="utf-8">
<title>フォトギャラリー</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="imgbox">
<p class="thumbnail"><img src="img/ph01s.png" alt="" onmouseover="mainImg.src='img/01.png'"><img src="img/ph02s.png" alt="" onmouseover="mainImg.src='img/02.png'"><img src="img/ph03s.png" alt="" onmouseover="mainImg.src='img/03.png'"><img src="img/ph04s.png" alt=""  onmouseover="mainImg.src='img/04.png'"><img src="img/ph05s.png" alt="" onmouseover="mainImg.src='img/05.png'"></p>
<p><img src="img/01.png" alt="" id="mainImg"></p>
</div><!-- /#imgBox -->
</body>
</html>

@charset "utf-8";

html, body, div, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
img {
  border: none;
  vertical-align: bottom;
}
#imgbox {
  width: 620px;
  height: 620px;
  margin: 50px auto;
  text-align: center;
  background: url(../img/box_bg.png) no-repeat center 70px;
}
p.thumbnail {
  height: 70px;
  padding-bottom: 40px;
}
p.thumbnail img {
  margin-right: 10px;
  cursor: pointer;
}
p.thumbnail img:last-child {
  margin-right: 0;
}

jQuery版

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォトギャラリー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script>
$(function(){
  $('p.thumbnail a').hover(function(){
    $('p.mainImg img').attr('src', $(this).attr('href'));
     return false;
  });
});
</script>
</head>
<body>
<div id="imgbox">
<p class="thumbnail"><a href="img/01.png"><img src="img/ph01s.png" alt=""></a><a href="img/02.png"><img src="img/ph02s.png" alt=""></a><a href="img/03.png"><img src="img/ph03s.png" alt=""></a><a href="img/04.png"><img src="img/ph04s.png" alt=""></a><a href="img/05.png"><img src="img/ph05s.png" alt=""></a></p>
<p class="mainImg"><img src="img/01.png" alt=""></p>
</div><!-- /#imgBox -->
</body>
</html>

@charset "utf-8";

html, body, div, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
img {
  border: none;
  vertical-align: bottom;
}
#imgbox {
  width: 620px;
  height: 620px;
  margin: 50px auto;
  text-align: center;
  background: url(../img/box_bg.png) no-repeat center 70px;
}
p.thumbnail {
  height: 70px;
  padding-bottom: 40px;
}
p.thumbnail img {
  margin-right: 10px;
  cursor: pointer;
}
p.thumbnail img:last-child {
  margin-right: 0;
}