ボディ

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

チャレンジ

簡単

このプロジェクトでは、シンプルなログインフォームを作成し、スタイリングを行います。このプロジェクトは、以下を含む主要なCSSの概念を練習するのに役立ちます。
✅ ウェブページ上で要素を完全に中央に配置する
✅ 入力フィールドやボタンなどのフォーム要素をスタイリングする
✅ ボーダー、シャドウ、スペーシング（余白）を扱う
✅ デザインにおける創造性の発揮

プロジェクトの終わりには、下の画像のような、モダンで洗練されたスタイルのログインフォームが完成します。

<body>タグにスタイルを適用します。以下の手順に従ってください。

背景色（background color）を、お好みの明るい色に設定します。
Flexboxを使用して、フォームを水平方向と垂直方向の両方で中央に配置します。
ページの高さ（height）を100vhに設定し、サイズを変更してもフォームが中央に配置されたままになるようにします。

自分で試してみよう

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>