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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

2カラムの演習素材

http://yachin29.webcrow.jp/test_05.zip


ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムの演習</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>インテリアショップ・カサブランカ</h1>
<p class="txt">家具・インテリアなら家具通販のカサブランカ。<br>北欧デザインのベッドなどのインテリアをお選びいただけます。</p>
<p class="photo"><img src="img/header.jpg" alt="#"></p>
</header>
<nav id="top_menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

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

<p>まるでフランス映画に出てくるようなスタイルのアイアンベッドです。こんなベッドに横たわるあなたはヒロインです。 プリンセスなハウススタイリングを演出するお道具として、お使いください。<br>
素材は質量感のあるロートアイアンを使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。</p>
</div>
<div id="sidebar">
<p><img src="img/ad.jpg" alt="#"></p>
<h2>CATEGORIES</h2>
<nav id="side_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>
</div>
<footer>
<div class="inner">
<p>CASA BLANCA</p>
<p><small>Copyright &copy; CASA BLANCA, all rights reserved.</small></p>
</div>
</footer>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,p,ul,li,small {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}


header {
  width:960px;
  margin:0 auto;
  padding-top:10px;
}
h1 {
  width:180px;
  height:46px;
  background:url(../img/logo.png) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  float:left;
  margin-bottom:20px;
}
.txt {
  float:right;
  line-height:1.5;
  font-size:14px;
}
#top_menu {
  width:100%;
  height:50px;
  background:#CC0000;
}
#top_menu ul {
  width:960px;
  margin:0 auto;
  overflow:hidden;
  background:#993333;
}
#top_menu li {
  width:120px;
  height:50px;
  float:left;
}
#top_menu li a {
  display:block;
  text-align:center;
  line-height:50px;
  border-right:1px solid #FFFF99;
  color:#FFFFFF;
} 
#top_menu li a:hover {
  background:#CC0000;
}
#wrapper {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
#content {
  width:640px;
  float:left;
}
#content h2 {
  padding:40px 0 10px;
  color:#990000;
  border-bottom:1px solid #000000;
  margin-bottom:30px;
}
#content p {
  line-height:1.6;
  margin-bottom:20px;
}
#sidebar {
  width:300px;
  float:right;
}
#sidebar h2 {
  color:#990000;
  padding:40px 0 10px 0;
}
#sidebar p {
  margin:40px 0 10px;
}
#side_nav ul {
  height:200px;
}
#side_nav li {
  height:50px;
}
#side_nav li a {
  display:block;
  padding-left:30px;
  line-height:50px;
  color:#222;
  border-top: 1px solid #333333;
  background:url(../img/listmark.png) no-repeat left 50%;
}
#side_nav li:last-child a {
  border-bottom: 1px solid #333333;
}
#side_nav li a:hover {
  background:#FFF0F8 url(../img/listmark.png) no-repeat left 50%;
  }
footer {
  width:100%;
  height:100px;
  background:#CC0000;
}
.inner {
  width:960px;
  margin:0 auto;
  padding-top:20px;
}
footer p {
  color:#FFFFFF;
  padding:10px 0 10px 0;
}
広告を非表示にする