会社のホームページの整理(CSS化)

買ったテンプレートはデザインはとても良いですが、HTMLは最悪で 1pxの画像を使ったレイアウト、テーブルレイアウト、CSSレイアウトのごちゃ混ぜでした ^^);

現在、ある計画にそなえ EY-Officeホームページの大改造を考えています。しかし、このごちゃごちゃHTMLでは大変なので最初にHTMLを整理する事にしました。当然 CSS レイアウトにしました。

高度な CSS の使い方は不慣れなので、検索し http://desperadoes.biz/style/dan/ を参考にさせて頂きました。
また、Firefox の Firebug は CSS の継承関係も見れるのでデバックに大活躍でした。

整理前

<tr>
  <td height="470" valign="top">
  <table width="100%" style="height:100% " border="0" cellspacing="0" cellpadding="0">
    
      <tr>
        <td width="228" valign="top" style="background-color:#FFFFFF;"><img border="0" src="images/bg_head2.jpg"></td>
        <td width="512"  valign="top">
        <div class="contents_title">事業案内</div>
        <DIV class="contents_body">
        <div class="biz_title">■ Java/Ruby/オブジェクト指向の教育</div>
        <div class="biz_body">
        プロジェクのメンバーやスケジュール、使用する技術に合わせた効果的な教育を行います。&nbsp;&nbsp;&nbsp;&nbsp;
	  <img src="images/a3.gif" alt="" align="middle">   <a href="biz_education.html"  class="link">詳細</a>
        </div>
	<br>
        <div class="biz_title">■ ソフトウェア開発</div>
	<div class="biz_body">
	  JavaやRuby, Perlによる Webアプリケーションの開発 。&nbsp;&nbsp;&nbsp;&nbsp;
	  <img src="images/a3.gif" alt="" align="middle">   <a href="biz_development.html"  class="link">事例</a>
	  
        </div>
        </DIV>
        </td>
      </tr>
     </table>
  </td>
</tr>

整理後

<div class="contents">
  <h1>事業案内</h1>
  <h2>Java/Ruby/オブジェクト指向の教育</h2>
    プロジェクのメンバーやスケジュール、使用する技術に合わせた効果的な教育を行います。
    <a href="biz_education.html" class="detail_link">詳細</a>
  <h2>ソフトウェア開発</h2>
    JavaやRuby, Perlによる Webアプリケーションの開発 。
    <a href="biz_development.html" class="detail_link">事例</a>
</div>

すっきりしました (＾ニ＾）