結婚式の招待状

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

チャレンジ

簡単

このチャレンジでは、CSSを使用して招待状のスタイルを設定し、レイアウト、タイポグラフィ、および間隔に焦点を当てます。パディング、マージン、ボーダー、色などのプロパティを適用して、下の画像に示されているデザインを再現します。

.invitationクラスを持つdiv、h2見出し、およびいくつかの段落を含むHTMLドキュメントが提供されています。あなたのタスクは、CSSを使用してこの結婚式の招待状をステップバイステップでスタイリングすることです。

指示に注意深く従い、各スタイルを順番に適用してください。

ステップ 1: Bodyのスタイル設定

body要素を選択します。
フォントファミリーを"Times New Roman", serifに設定します。
Flexboxプロパティを使用して、招待状カードを完全に中央に配置します。
高さを100vhに設定します。
明るい背景色（#f8f5f0）を設定します。

ステップ 2: 招待状カードのスタイル設定

.invitationクラスをターゲットにします。
白色の背景色（#fff）を設定します。
2px solid goldのボーダーを追加します。
パディング（20px）を追加します。
幅を350pxに設定します。
テキストを中央揃えにします。
角を丸くするためにborder-radiusを追加します。
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1)を使用して、柔らかな影を追加します。

ステップ 3: テキストのスタイル設定

h2要素をターゲットにします。
- テキストの色をgoldenrodに設定します。
- フォントサイズを22pxにします。
.namesクラスを選択します。
- 筆記体フォント（"Dancing Script", cursive）を使用します。
- フォントサイズを26pxに設定します。
すべてのp要素をターゲットにします。
- フォントサイズを18pxに設定します。
- テキストの色を#5a4d3fに変更します。

自分で試してみよう

<html>
    <head>
        <title>Invitation Card</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="invitation">
            <h2>Wedding Invitation</h2>
            <p class="names">Emma & James</p>
            <p class="message">Together with their families, invite you to celebrate their wedding.</p>
            <p class="detail"><strong>Date:</strong> Saturday, June 15, 2025</p>
            <p class="detail"><strong>Time:</strong> 4:00 PM - Reception to follow</p>
            <p class="detail"><strong>Venue:</strong> Rosewood Garden, Lakeview</p>
            <p class="note">Please RSVP by May 20th</p>
            <p class="footer">We look forward to celebrating with you!</p>
        </div>
    </body>
</html>