ナビゲーションメニュー

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 67/76。

チャレンジ

簡単

このプロジェクトでは、美しいポリネシアの島であるトンガについてのシンプルなウェブページを作成し、スタイリングします。

このプロジェクトは、実践的なスタイリング手法を適用することで、CSSの練習に役立ちます。その過程で、基本的なレイアウトとレスポンシブデザインの概念に焦点を当てます。このプロジェクトでは、外部CSSファイルを使用してHTMLドキュメントをスタイリングします。HTMLファイルと、すでに接続されているリンク済みのCSSファイルの2つのファイルを確認できます。このセクションの終わりまでに、ウェブページはおおよそ次のようになります。

以下の手順に従って、ナビゲーションメニューをスタイリングしてください。

.menu クラスを持つ要素を選択します。
ページの上部に fixed（固定）されるようにスタイルを適用します。
目立つように背景色を設定します。
メニューの内側にスペースを作るためにパディングを追加します。
スクロール中もメニューがページの上部に留まるように、top と left を 0 に設定します。
メニューがページの全幅を占めるようにします。
最前面に表示されるように、z-index プロパティを 100 に設定します。

メニュー内のリンク a をスタイリングします：

text-decoration: none; を使用して、リンクからデフォルトの下線を取り除きます。
リンクをはっきりと読みやすくするために、font-weight を bold に設定します。
リンクの間隔を均等にするためにマージンを追加します。
視認性を高めるために、背景とよく対比するテキストの色を設定します。

自分で試してみよう

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="menu">
            <a href="#">About</a>
            <a href="#">Experience</a>
            <a href="#">Contact</a>
        </nav>    
        <header class="welcome">
            <h1>Swim with Whales in Tonga</h1>
            <p>Experience the magic of swimming alongside majestic humpback whales.</p>
        </header>    
        <section class="about">
            <h2>About Tonga</h2>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
            <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
        </section>     
        <section class="contact">
            <h2>Plan Your Adventure</h2>
            <table>
                <tr>
                    <td>Phone Number</td>
                    <td>+676 123 4567</td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>info@tongawhales.com</td>
                </tr>
            </table>
    </section>
</body>
</html>