復習チャレンジ

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

チャレンジ

簡単

CSSのrelative、absolute、fixed、そしてz-indexを含む、さまざまな配置（ポジショニング）テクニックを学んだところで、総合的なチャレンジでその知識を試してみましょう。このチャレンジは、これらのプロパティを組み合わせて複雑でダイナミックなレイアウトを作成する方法についての理解を深めるのに役立ちます。学んだ各配置スキームを適用して、特定のデザインを再現してください。

ピザレストランのウェブサイトのHTMLドキュメントが用意されています。あなたのタスクは、CSSの配置プロパティを使用して以下の要素をスタイリングし、クリーンで整理されたレイアウトを作成することです。

以下の手順に従ってください：

ヘッダーのスタイリング：
- <header>要素をターゲットにします。
- ページの上部に固定されるように、positionをfixedに設定します。
- ページの全幅に広がるように、topを0、leftを0、widthを100%に設定します。
- ヘッダーがページ上の他の要素よりも上に表示されるように、10のz-indexを使用します。
メニューセクションのスタイリング：
- .menuクラスをターゲットにします。
- 通常のフローにおける位置を基準に配置できるように、positionをrelativeに設定します。
プロモーションボックスのスタイリング：
- .promotionsクラスをターゲットにします。
- .menuセクションを基準に配置するために、positionをabsoluteに設定します。
- メニューの右上に配置されるように、topを100px、rightを20pxに設定します。
- ヘッダーよりは下、かつメニュー内の他のコンテンツよりは上に表示されるように、5のz-indexを使用します。

チートシート

CSSの配置（positioning）プロパティを使用すると、要素の配置を制御できます。

固定配置 (Fixed positioning): スクロールしても要素がその場に留まります

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

相対配置 (Relative positioning): 要素が通常の配置位置を基準にして配置されます

.menu {
  position: relative;
}

絶対配置 (Absolute positioning): 要素が最も近い「配置済み（positioned）」の親要素を基準にして配置されます

.promotions {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 5;
}

Z-index: 配置された要素の重なり順を制御します（値が大きいほど上に表示されます）

自分で試してみよう

<html>
<head>
    <title>Pizza Restaurant</title>
    <style>
        /* Fixed Header */
        header {
            background-color: #ff6f61;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            color: white;
        }
        /* Menu Section (Relative) */
        .menu {
            margin-top: 70px; /* Space for fixed header */
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 18px;
        }
        /* Promotions Box (Absolute) */
        .promotions {
            background-color: #ffdf00;
            padding: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- 固定ヘッダー -->
    <header>
        Pizza Restaurant
    </header>
    <!-- メニューセクション -->
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>Margherita</li>
            <li>Pepperoni</li>
            <li>Veggie</li>
            <li>Hawaiian</li>
        </ul>       
        <p>Order now and enjoy!</p>
    </div>
    <!-- プロモーションボックス -->
    <div class="promotions">
        <p>Get 20% off your first order!</p>
    </div>
    <div class="pizza-info">
        <h2>About Pizza</h2>
        <p>Pizza, a dish with origins in Italy, is one of the world's most beloved foods. It was first made in Naples during the 18th century, with the classic Margherita pizza being named after Queen Margherita of Savoy. The traditional pizza is known for its simple ingredients: a thin crust, tomato sauce, mozzarella cheese, and fresh basil.</p>
        <p>Over the years, pizza has evolved into a variety of regional styles, from thin-crust New York-style pizza to deep-dish Chicago pizza. While the toppings have diversified, the tradition of sharing a pizza with family and friends remains an essential part of the pizza experience.</p>
        <p>In Italy, pizza is often enjoyed casually, typically paired with a glass of wine or soda. It is a symbol of Italian culture, and many believe that a good pizza is a representation of the country's culinary expertise and passion for food.</p>
        <p>Pizza's global reach has led to many variations and adaptations in different countries. In Japan, for example, toppings like teriyaki chicken and squid are popular, while in Brazil, green peas and corn are commonly found on pizzas. In the United States, pizza has become a staple of fast food, with different regions offering their unique twists, such as the deep-dish pizza from Chicago and the thin crust of New York City.</p>
    </div>
</body>
</html>