Chapter-01

Chapter-02

Chapter-03

Chapter-04

レフトナビ・フッターの設定

最後に残ったレフトのメニューと、フッターを設定しましょう。

レフトナビの設定

チャプター3の縦並びメニューで作成したのとほとんど同じです。

style.css
#left ul{
    margin:0 0 20px 0;
}
#left li a{
    border-bottom:1px dashed rgb(25%,25%,25%);
    color:rgb(25%,25%,25%);
    padding:2px 10px;
    text-decoration:none;
    display:block;
}
#left li a:hover{
    background:rgb(90%,90%,90%);
}

ライトボックスの画像の設定

右に並ぶバナーが縦に詰まっているので余白を設けましょう。

style.css
#right img{
    margin-bottom:10px;
}

メイン画像などにも余白がついてしまわないように、#right内のimgにだけ指定します。

フッターの設定

背景色や文字色などを設定します。

style.css
#footer{
    background:rgb(25%,25%,25%);
    color:rgb(100%,100%,100%);
    padding:15px 0;
    text-align:center;
}

確認

これで全てのスタイルの設定が終わりました。

見本ページを新しいタブで開く

上のように正しく表示できていますか？

ここまで作成できるようになれば、さまざまなデザイン・レイアウトのwebページを作成することができます。

より高度なweb制作に挑戦したい方は、応用講座へ進んでみましょう。

ここまでのソース

チャプター4で記述したCSSです。

ソースを表示

style.css
*{
    margin:0;
    padding:0;
    list-style:none;
}
body{
    background:rgb(100%,100%,100%);
    line-height:1.5em;
    color:rgb(25%,25%,25%);
}
img{
    display:block;
}
p{
    line-height:1.5em;
    margin:0 0 30px 0;
}
h1{
    padding:20px 0;
}
h2{
    border-bottom:3px solid rgb(20%,60%,80%);
    color:rgb(20%,60%,80%);
    padding:0 0 2px 0;
    margin:0 0 10px 0;
    font-size:18px;
}


#header{
    background:url(img/bg.png);
}
.box-in{
    width:960px;
    margin:0 auto;
}
#nav{
    background:rgb(25%,25%,25%);
    padding:3px 0 3px 0;
}
#nav ul{
    width:960px;
    margin:0 auto 0 auto;
}
#nav li{
    margin:0 1px 0 0;
    float:left;
}
#nav li a{
    width:159px;
    background:rgb(20%,60%,80%);
    display:block;
    padding:10px 0 10px 0;
    font-size:18px;
    color:rgb(100%,100%,100%);
    text-align:center;
    text-decoration:none;
}
#nav li a:hover{
    background:rgb(15%,45%,60%);
}
.clear{
    clear:both;
}


#container{
    width:960px;
    margin:20px auto 20px auto;
}
#left{
    width:200px;
    float:left;
}
#right{
    width:180px;
    float:right;
}
#main{
    margin:0 200px 0 220px;
}

#left ul{
    margin:0 0 20px 0;
}
#left li a{
    border-bottom:1px dashed rgb(25%,25%,25%);
    color:rgb(25%,25%,25%);
    padding:2px 10px;
    text-decoration:none;
    display:block;
}
#left li a:hover{
    background:rgb(90%,90%,90%);
}
#right img{
    margin-bottom:10px;
}

#footer{
    background:rgb(25%,25%,25%);
    color:rgb(100%,100%,100%);
    padding:15px 0;
    text-align:center;
}
PAGE TOP