フッターを作ろう

ヘッダーができればフッターもできる

ヘッダーとフッターの関係

まず準備です
飯田いいとこ最初はこんなところから（コピーして準備）
a7.zip へのリンク←これを解凍しても準備完了

ヘッダーが最初にあれば、フッターは下にある。
フッターも同じようにできます。

こんな風にフッターを作ってみましょう。

まずHTMLに

リストが縦になっているだけですね。他は同じです。
そこでまずヘッダーと同じようにフッターを作ります。
ヘッダーの中身を、フッターの中にコピーし
クラス名をlogo2にして、CSSで変更を加えられるようにします。
<div class="logo2">です。

HTML index.html

こんな風になります。

    <footer>
        <div class="logo2">
        <a href="index.html"><img src="title-logo.png" width="154" "28" alt="いいだにおいで"></a>
        </div>
        <div class="nav2">
        <ul>      
            <li><a href="index.html">春の桜</a></li>
            <li><a href="#1">夏の山</a></li>
            <li><a href="#2">秋の祭り</a></li>                
            <li><a href="#3">冬の・・</a></li>
        </ul>
        </div>
    </footer>

CSS main.cxx

次はCSSで整えます。
まず、これまで書いた部分を下にコピーします。
次に、headerをfooter と名前を変え
高さの指定を外します。

footer{
width: 100%;
background-color: black;
}
次に真ん中寄せを左寄せにする。 リストを横にそろえる部分も外しましょう。 

.logo2{
    text-align: left;
}
/*リストを横にそろえる部分を省略します*/
次に、navの名前をnav2にして

.nav2 li a{
    ここは同じ
}
.nav2 li a:hover{
    ここも同じです
}

これでフッターもできあがりです。
おや、フッターの幅が少し少ないので指定が必要ですね。
あとは、中身を書くだけ。
飯田いいとこ←できあがり

次の問題へ進む