Aboutセクション

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

チャレンジ

簡単

次に、流動的なレイアウトと柔軟な画像を使用して About セクションをスタイリングし、すべての画面サイズで美しく表示されるようにします。

あなたのタスクは、クラス about を持つセクションに流動的なレイアウト手法と柔軟な画像を適用して、レスポンシブにすることです。以下の手順に従ってください：

1. セクションコンテナのスタイリング

クラス about を持つ <section> 要素をターゲットにする CSS ルールを記述します。
内側にスペースを作るためにパディングを追加します。
セクションが広がりすぎないように max-width を設定します。

2. テキストのスタイリング

h2 要素をターゲットにする CSS ルールを記述し、その色を設定します。
p 要素をターゲットにする CSS ルールを記述し、読みやすいテキストの色を適用します。

3. 画像のスタイリング

img 要素をターゲットにする CSS ルールを記述します。
レスポンシブにするために、width を 40vw に設定します。
テキストの横に配置するために float: right; を使用します。
画像の周囲に間隔を作るために 10px のマージンを追加します。

自分で試してみよう

<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>