メディアクエリ

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

チャレンジ

簡単

このレッスンでは、ウェブページがさまざまな画面サイズで適切に表示されるようにします。画面の幅に基づいて異なるスタイルを適用できるメディアクエリを使用します。

幅が400px未満の画面用のメディアクエリを作成します。以下の手順に従ってください。

画面幅が400px以下の場合にスタイルを適用するために、@media (max-width: 400px)を使用してCSSルールを記述します。
.menuをターゲットにし、そのpaddingを10pxに設定して、よりコンパクトにします。
imgをターゲットにし、そのfloatプロパティをnoneに設定して、小さな画面ではテキストの上に移動するようにします。
.about内のimgのwidthを80vwに設定し、小さな画面に適応するようにします。
.contactセクションをターゲットにし、そのheightをautoに設定して、コンテンツに基づいてセクションが拡大または縮小できるようにします。これにより、すべての要素がさまざまな画面サイズで適切に表示され、整列された状態が維持されます。

これらの変更を適用した後、ブラウザのウィンドウサイズを変更して、レイアウトがどのように調整されるかを確認し、ページをテストしてください。

自分で試してみよう

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">  
    </head>
<body>
    <nav class="menu">
        <a href="#about">About</a>
        <a href="#experience">Experience</a>
        <a href="#contact">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>