Menu
CoddyTech

復習チャレンジ

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 60/76。

challenge icon

チャレンジ

簡単

CSSのさまざまな配置方法(relative、absolute、fixed、z-indexなど)を学んだので、総合的な課題で知識を試してみましょう。この課題では、これらのプロパティを組み合わせて、複雑で動的なレイアウトを作成する方法への理解を深めます。それぞれの配置方法について学んだことを応用して、指定されたデザインを再現しましょう。

ピザレストランのウェブサイト用HTMLドキュメントが用意されています。CSSの配置プロパティを使って、次の要素をスタイルし、すっきりと整理されたレイアウトを作成してください。

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

  1. ヘッダーのスタイル設定:
    • <header>要素を対象にします。
    • ページの上部に固定されるように、positionをfixedに設定します。
    • ページの幅全体に広がるように、topを0、leftを0、widthを100%に設定します。
    • ヘッダーがページ上のほかの要素より前面に表示されるように、z-indexを10にします。
  2. メニューセクションのスタイル設定:
    • .menuクラスを対象にします。
    • 通常のフロー内での位置を基準に配置できるように、positionをrelativeに設定します。
  3. プロモーションボックスのスタイル設定:
    • .promotionsクラスを対象にします。
    • .menuセクションを基準に配置するため、positionをabsoluteに設定します。
    • メニューの右上付近に配置するため、topを100px、rightを20pxに設定します。
    • ヘッダーより下、メニュー内のほかのコンテンツより前面に表示されるように、z-indexを5にします。

自分で試してみよう

<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 class="promotions">
            <p>Get 20% off your first order!</p>
        </div>
    </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>

CSSによるスタイリングのすべてのレッスン

自分で練習してみよう: Webプレイグラウンド