タイポグラフィの基礎
CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 30/76。
チャレンジ
簡単このプロジェクトでは、すでに学んだ CSS のスキルを活用して、カフェメニューを作成し、スタイルを設定します。異なるフォント、サイズ、配置を使ってテキストのスタイルを設定する練習をします。また、背景色とテキストの色を適用して、見た目のよいメニューに仕上げます。
このプロジェクトでは、外部 CSS ファイルを使って HTML ドキュメントのスタイルを設定します。ファイルは2つあり、HTML ファイルと、すでに接続されているリンク先の CSS ファイルを確認できます。
この課題では、フォントファミリーとテキストの配置を変更するためのスタイルを適用します。
以下の手順に従ってください。
<body>要素を対象にして、ページ全体にフォントファミリーTahoma, Geneva, sans-serifを適用します。- タイトルを中央揃えにするため、
<h1>要素にtext-align: center;を設定します。 - 導入テキストを中央揃えにするため、class
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>© 2025 Café Delight - All rights reserved</p>
</footer>
</body>
</html>CSSによるスタイリングのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド