ステップ３〜左サイドを作る〜

ステップ３では左サイドを完成させます。

HTMLを書く

次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）

<!-- *************左サイド ****************-->
<DIV id="left">
<!-- 更新履歴 -->
<DIV id="new">
<IMG src="./img/whatnew.gif" width="137" height="23" alt="更新履歴">
<ul>
<li>公開開始</li>
<li>デザイン1つ追加</li>
<li>デザイン1つ追加もっともっと</li>
</ul>
</DIV>
<!-- アフリエイト -->
<DIV id="adver">
ここにはアフリエイト入れようかな？
</DIV>
</DIV>

CSSを書く

次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）

/* 更新履歴 */
#new{
    width:150px;
    height:145px;
    background-color:#ffffff;
    overflow:hidden;
}
#new ul{
    list-style:none;
    font-size:small;
    margin-top:5px;
    margin-left:0px;
    padding:0px 10px;
    line-height:1.2em;
}
#new li{
    list-style:none;
    padding-left:15px;
    background:url(./img/point-s.gif) no-repeat center left;
    text-align:left;
}
/* アフリエイト */
#adver{
    width:150px;
    height:150px;
    background-color:#BF6000;
    display:block;
}

ポイント

ここでのポイントは、

1. #new ulというID＋セレクタを利用したCSSの書き方を覚える
2. 内容が決まっていないボックスにはheightを指定しておく

の２つです。

#new ulはIDがnewのボックスの中にあるulタグのスタイルを指定しています。 このような書き方を覚えると、無駄なIDやクラスが減り、よりスマートなHTMLになります。 なれないうちは難しいかもしれませんが、徐々に慣れましょう。

まだ内容が確定していないボックスには、適当にheightを指定しておくことをおすすめします。 そうすることで全体のバランスや、色合いを確かめるのが楽になります。

確認

できたらブラウザーでどのように表示されるか見てみましょう

ステップ３終了時点

ヘッダーに続いて左サイドも完成しました。
後はメインコンテンツ部分を作成していくだけですね。