タイポグラフィの基本

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

チャレンジ

簡単

このプロジェクトでは、これまでに学んだCSSのスキルを応用して、カフェメニューの作成とスタイリングを行います。さまざまなフォント、サイズ、配置を使用してテキストをスタイリングする練習をします。また、背景色やテキストの色を適用して、視覚的に魅力的なメニューを作成し、デザインを強化します。

このプロジェクトでは、外部CSSファイルを使用してHTMLドキュメントをスタイリングします。HTMLファイルと、あらかじめリンクされているCSSファイルの2つのファイルを確認できます。

このタスクでは、フォントファミリーとテキストの配置を変更するためのスタイルを適用します。

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

<body>要素をターゲットにして、ページ全体にfont-family Tahoma, Geneva, sans-serifを適用します。
タイトルを中央揃えにするために、<h1>要素にtext-align: center;を設定します。
紹介文を中央揃えにするために、クラス名がwelcomeである<p>要素にtext-align: center;を設定します。

自分で試してみよう

<html>
<head>
    <title>Café Menu</title>  
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Café Delight</h1>
        <p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
    </header>
    <div class="menu-category">
        <h2>Appetizers</h2>
        <ul>
            <li>
                <p class="dish-name">Bruschetta $5.99</p>
            </li>
            <li>
                <p class="dish-name">Garlic Bread $3.50</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Main Courses</h2>
        <ul>
            <li>
                <p class="dish-name">Spaghetti Carbonara $12.99</p>
            </li>
            <li>
                <p class="dish-name">Grilled Chicken Salad $9.99</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Desserts</h2>
        <ul>
            <li>
                <p class="dish-name">Chocolate Cake $4.99</p>
            </li>
            <li>
                <p class="dish-name">Cheesecake $5.49</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>&copy; 2025 Café Delight - All rights reserved</p>
    </footer>
</body>
</html>