PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザインの勉強と備忘録。Webサイト制作系の職業訓練を受けてます。

【HTML】2カラムレイアウトのページを作る

課題であがっていた2カラムレイアウトを参考に、作って見ました。

ブラウザレビュー(演習結果)

f:id:game-web-design:20140910173211p:plain

ポイント

  • 必要のないDIVを使わない。
  • 画像を右側へフロートさせている。
  • フロートさせた画像の高さを保持したいので、overflow:hiddenを使っています。これで、p内の文章が少なくても、画像の下辺がpの下辺になってくれます。文章が多くなった場合でも画像の下に文章が回りこみます。回り込みさせたくない場合はまた別な方法があるかもしれません。

f:id:game-web-design:20140910175833p:plain

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>卵料理カフェ Cockeyolly</title>
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<div id="container">
<div id="sub">

<h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</div><!--sub-->


<div id="main">
<h2><img src="img/title.gif" alt="今月のおすすめ"></h2>

<div class="content">
<h3>きのこのオムライス</h3>
<p><img src="img/photo01.jpg" alt="きのこのオムライス">
ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円
</p>
</div><!--content-->

<div class="content">
<h3>シーフードスパゲッティシーフードスパゲッティ<br>
バルサミコ風味</h3>
<p><img src="img/photo02.jpg" alt="シーフードスパゲッティシーフードスパゲッティ バルサミコ風味">
エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円
</p>
</div><!--content-->

<div id="footer">
<small>(c)2014  卵料理カフェ Cockeyolly</small>
</div>

</div><!--main-->
</div><!--container-->

</body>
</html>

CSS

@charset "utf-8";

html, body, div, ul, li, h1, h2, h3, p, 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{
  vertical-align: bottom;
  border: none;
}

/* body */

body{
  background:url(../img/bg_img.gif) repeat-y;
  font-size: 16px;
}

#container{
  overflow: hidden;
  width: 660px;
}


/* sub */

#sub{
  width: 160px;
  float: left;
}
h1{
  padding: 30px;
  margin-bottom: 20px;
}
li{
  line-height: 2.0;
}

li a{
  display: block;
  color: #FFF;
  font-weight: bold;
  padding: 0 0 0 16px;
}

li a:hover{
  color: #FEFF95;
}


/* main */

#main{
  width: 480px;
  float: left;
  margin: 30px 0 0 20px;
}

#main h2{
  text-align: center;
  margin-bottom: 85px;
}

.content{
  margin-bottom: 60px;
}

.content h3{
  border-left: solid 7px #D98200;
  color: #826047;
  line-height: 1.3;
  padding-left:0.5em;
  margin-bottom: 20px;
}

.content p{
  line-height: 1.6;
  overflow: hidden;
}
.content p img{
  float: right;
  margin: 0 0 10px 10px;
}

#footer{
  text-align: center;
  color: #AAA;
  font-weight: bold;
  border-top: 2px #AAA solid;
  padding: 10px;
}