【HTML/CSS】 DIVをあまり使わない文章構造に書き直す。

DIVタグを使わなくても、他のブロック要素でスタイルを指定できる場合、DIVを使わないように構文を書き直すこととができます。
DIVを使うときは、フロートさせたり、レイアウト上必要な場合のみ囲むと良い。

今回書き直しに使ったソース：

【HTML】２カラムレイアウトのページを作る - PCゲーマーのWebデザイン備忘録

HTML

前回書いたHTMLもDIVを少なめに書いたつもりでしたが、content・footerのそれぞれのDIVも、DIVで囲うこと無くスタイリングできるので削りました。他にも装飾を入れるためにナビゲーションのところに現在ページを示すためのクラス、値段のところにspanタグを入れています。

<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="#" class="this">今月のおすすめ</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>
  
  <h3>きのこのオムライス</h3>
  <p><img src="img/photo01.jpg" alt="きのこのオムライス">
  ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：<span class="price">800円</span>
  </p>
  
  <h3>シーフードスパゲッティシーフードスパゲッティ<br>
  バルサミコ風味</h3>
  <p><img src="img/photo02.jpg" alt="シーフードスパゲッティシーフードスパゲッティ バルサミコ風味">
  エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：<span class="price">900円</span>
  </p>
  
  <p id="footer"><small>(c)2014  卵料理カフェ Cockeyolly</small></p>
  
  </div><!--main-->
</div><!--container-->

CSS

DIVを減らしたので、それにあわせて直します。あまり修正する必要も無かったのですが、他のスタイルを変更しているのでもう一度載せます。

html, body, div, ul, li, h1, h2, h3, p{
  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;
  color: #333;
}

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


/* sub */

#sub{
  width: 160px;
  float: left;
  margin-right: 20px;
}
#sub h1{
  padding: 30px;
  margin-bottom: 20px;
}
#sub li{
  margin-bottom: 10px;
}

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

#sub li a:hover{
  color: #FEFF95;
}

#sub li a.this{
  color: #FEFF95;
}


/* main */

#main{
  width: 460px;
  float: left;
  margin-top: 30px;
}

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

#main h3{
  border-left: solid 8px #D98200;
  color: #826047;
  line-height: 1.3;
  padding-left:0.5em;
  margin-bottom: 16px;
}

#main p{
  
  line-height: 1.6;
  overflow: hidden;
  margin-bottom: 60px;
}
#main p img{
  float: right;
  margin: 0 0 10px 10px;
}

span.price{
  font-weight: bold;
}

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