CSS フォーム

CSSを使ってフォームをデザインし、見た目を整えることで、より使いやすく魅力的なフォームを作成できます。

基本構造
スタイル

基本構造

まず、HTMLでフォームの基本構造を作成します。

以下は、簡単なフォームの例です。

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  
  <label for="message">メッセージ:</label>
  <textarea id="message" name="message"></textarea>
  
  <input type="submit" value="送信">
</form>

スタイル

CSSを使って、フォームの要素をスタイリングしましょう。

label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 2px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

form {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  margin: 0 auto;
}

これでサンプルのフォームを作れると思います。