CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

HTMLとCSSでサインアップフォームを作成する方法【初心者向け】

HTMLとCSSを組み合わせることで、モダンで使いやすいサインアップ（新規登録）フォームを簡単に作成できます。この記事では、メールアドレスとパスワードの入力欄、「ログイン状態を保持」チェックボックス、さらに登録・キャンセルボタンを備えた実用的なフォームを、実際のコード例とともにわかりやすく解説します。

サインアップフォームの完全なコード例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {box-sizing: border-box}
input[type=text], input[type=password] {
    width: 100%;
    font-size: 28px;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}
label{
    font-size: 15px;
}
input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}
button {
    font-size: 18px;
    font-weight: bold;
    background-color: rgb(10, 119, 13);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}
button:hover {
    opacity:1;
}
.cancel {
    padding: 14px 20px;
    background-color: #ff3d2f;
}
.formContainer {
    padding: 16px;
}
.formContainer p{
    font-size: 28px;
}
</style>
</head>
<body>
<form>
<div class="formContainer">
<h1>サインアップフォーム</h1>
<hr>
<label for="email"><b>メールアドレス</b></label>
<input type="text" placeholder="メールアドレスを入力してください" name="email" required>
<label for="password"><b>パスワード</b></label>
<input type="password" placeholder="パスワードを入力してください" name="password" required>
<label for="repeatPassword"><b>パスワード（確認用）</b></label>
<input type="password" placeholder="パスワードを再入力してください" name="repeatPassword" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom: 15px"> ログイン状態を保持する
</label>
<p>アカウントを作成すると、<a href="#" style="color:dodgerblue">利用規約およびプライバシーポリシー</a>に同意したものとみなされます。</p>
<div>
<button type="button" class="cancel">キャンセル</button>
<button type="submit" class="signup">登録する</button>
</div>
</div>
</form>
</body>
</html>

コードのポイント解説

1. 入力フィールドのスタイリング

input[type=text] と input[type=password] セレクターに対して、幅100%・背景色 #f1f1f1 のフラットなデザインを適用しています。border: none で枠線を消し、padding で余白を確保することで、入力しやすい大きさのフィールドになります。

2. フォーカス時の視覚的フィードバック

:focus 疑似クラスを使うと、ユーザーが入力欄を選択した瞬間に背景色を #ddd へと変化させられます。あわせて outline: none を指定することで、デフォルトの青いアウトラインを消し、より洗練された印象に仕上げています。

3. ボタンの配色とホバーエフェクト

「登録する」ボタンには緑色（rgb(10, 119, 13)）、「キャンセル」ボタンには赤系の色（#ff3d2f）を割り当て、役割をひと目で区別できるようにしています。また、opacity プロパティを活用することで、マウスオーバー時にボタンが明るくなるエフェクトを実装しています。

4. 入力必須バリデーション

各 input 要素に required 属性を付けています。これにより、未入力のままフォームを送信しようとした際に、ブラウザが自動的に警告メッセージを表示してくれるため、JavaScript を書かなくても基本的な入力チェックが可能です。

実行結果

上記のコードをブラウザで開くと、次のようなサインアップフォームが表示されます。

HTMLとCSSでサインアップフォームを作成する方法【初心者向け】

  1. CSSとJavaScriptで作る名言スライドショー！前へ・次へボタン付きの実装方法を解説

    CSSとJavaScriptを組み合わせると、名言や引用文を順番に切り替えて表示できるスライドショーを手軽に作成できます。本記事では、「前へ」「次へ」ボタンとドット型ナビゲーションを備えた名言スライドショーの具体的な実装例を、コード付きでわかりやすく解説します。 実装例：完全なサンプルコード 以下のコードをそのままHTMLファイルとして保存すれば、ブラウザですぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=dev

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル