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

アートボード 2-50.jpg

手順

  1. navタグでulタグをくくる。ナビの各項目は、liタグとaタグで作る。
  2. ulタグのmargin、paddingを0にし、リストマークを非表示にする。
  3. ulタグを、1000pxでセンタリングする。
  4. ulタグに、display:flex;を指定して、liを横並びにする。
  5. liの横幅を300pxにし、テキストを中央ぞろえにする。
  6. aタグにdisplay:block;を指定して、背景色などを設定し、ボタン状のデザインにする。
  7. aタグをhoverしたときに、透明になるようにする。

回答例

https://www.youtube.com/embed/ku5AOEhmJfQ?si=Qagb0dUjlyfc4z7R

作成したコード

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

<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>
    <nav>
        <ul>
            <li><a href="#">ナビ1</a></li>
            <li><a href="#">ナビ2</a></li>
            <li><a href="#">ナビ3</a></li>
        </ul>
    </nav>
</body>

</html>

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}

ul li {
    width: 300px;
    text-align: center;
}

ul li a {
    text-decoration: none;
    background-color: burlywood;
    display: block;
    color: #fff;
    line-height: 60px;
    transition: 0.3s;
}

ul li a:hover {
    opacity: 0.5;
}