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

CSSで登録フォームを作成する方法を徹底解説！初心者向けサンプルコード付き

Webサイトのユーザー登録ページにおいて、見やすく使いやすいフォームデザインは非常に重要です。本記事では、HTMLとCSSを組み合わせて実用的な登録フォームを作成する方法を、サンプルコード付きでわかりやすく解説します。レスポンシブ対応も盛り込んでいるので、スマートフォンでも崩れずに表示されます。

登録フォームのサンプルコード

以下は、CSSでスタイリングした登録フォームの完全なコード例です。そのままHTMLファイルにコピー＆ペーストすれば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}
h1 {
  text-align: center;
}
* {
  box-sizing: border-box;
}
form {
  padding: 16px;
  max-width: 800px;
  margin-left: 20%;
  background-color: rgb(255, 254, 195);
}
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
.registerbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.registerbtn:hover {
  opacity: 1;
}
a {
  color: dodgerblue;
  text-decoration: none;
}
.signin {
  background-color: #f1f1f1;
  text-align: center;
}
@media (max-width: 800px) {
  form {
    width: 100%;
    margin-left: 0px;
  }
}
</style>
</head>
<body>
<h1>Registration Form Example</h1>
<form>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
<div class="signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>

コードのポイント解説

フォーム全体のレイアウト

form要素には淡い黄色系の背景色（rgb(255, 254, 195)）とパディングを設定し、max-width: 800pxでフォームの最大幅を制限しています。また、* { box-sizing: border-box; }を指定することで、パディングやボーダーを含めたサイズ計算になり、レイアウト崩れを防げます。

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

input[type=text]とinput[type=password]には、幅100%・パディング15pxを指定し、border: noneで枠線を消して柔らかい印象にしています。さらに:focus疑似クラスを使うことで、入力中のフィールドの背景色が#dddに変化し、ユーザーが現在どの項目を入力しているのかひと目でわかるようになっています。

登録ボタンのデザイン

.registerbtnクラスには緑色（#4CAF50）の背景と白い文字色を設定。通常時はopacity: 0.9とし、:hover時に1へ変更することで、マウスオーバーした際にボタンが明るくなるエフェクトを実現しています。cursor: pointerでカーソル形状も変えており、クリックできることを直感的に伝えられます。

レスポンシブ対応

@media (max-width: 800px)のメディアクエリを利用し、画面幅が800px以下のデバイスではフォームを画面いっぱいに広げ、左余白（margin-left）を0にしています。これにより、スマートフォンやタブレットでも快適に操作できるフォームになります。

実行結果

上記のコードをブラウザで開くと、次のような登録フォームが表示されます。

CSSで登録フォームを作成する方法を徹底解説！初心者向けサンプルコード付き

まとめ

CSSを活用すれば、シンプルなHTML構造からでも視認性が高く洗練された登録フォームを作成できます。背景色・余白・フォーカス時のエフェクトなどを調整すれば、自分のサイトのデザインに合わせたカスタマイズも自由自在です。ぜひ実際のプロジェクトでも活用してみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>