以下の図と同じように作る

WS000041.JPG

手順

  1. footerタグを書く

  2. footerタグの内側にulタグ、liタグ、aタグでメニューを書く

  3. ulタグの下にsmallタグでコピーライト表記を書く

  4. bodyタグに以下のCSSを付加する

    1. セレクタ：body
    margin 0

  5. footerタグに以下のCSSを付加する

    1. セレクタ：footer
    background-color #f77237
    padding 20px 0

  6. aタグに以下のCSSを付加する

    1. セレクタ：a
    text-decoration none
    color #fff;

  7. aタグにマウスが乗った時に以下のCSSを付加する

    1. セレクタ：a:hover
    opacity 0.6

  8. ulタグに以下のCSSを付加する

    1. セレクタ：ul
    list-style none
    text-align center

  9. ulタグの中のliタグに以下のCSSを付加する

    1. セレクタ：ul li
    display inline
    margin 0 20px

  10. smallタグに以下のCSSを付加する

    1. セレクタ：small
    color #fff
    display block
    text-align center

解答例

https://www.youtube.com/embed/MI54a9ttlhE?si=NJeF2v8MLvkfZ31K

作成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <footer>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">会社概要</a></li>
            <li><a href="#">アクセス</a></li>
        </ul>
        <small>&copy; xxx Corporation</small>
    </footer>
</body>

</html>

body {
    margin: 0;
}

footer {
    background-color: #f77237;
    padding: 20px 0;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    opacity: 0.6;
}

ul {
    list-style: none;
    text-align: center;
}

ul li {
    display: inline;
    margin: 0 20px;
}

small {
    color: #fff;
    text-align: center;
    display: block;
}