CSS フォーム (Forms)

Volardev 編集部 April 12, 2026

1. 入力フィールドのスタイリング (Styling Input Fields)

width プロパティを使用して、入力フィールド（input）の幅を決定します。

以下の例では、すべての <input> 要素の幅を 100% に設定しています。

input {
  width: 100%;
}

この例は、特定の入力タイプにのみ適用されます：

input[type=text] - テキスト入力フィールドを選択
input[type=password] - パスワードフィールドを選択
input[type=number] - 数値フィールドを選択
など...

2. パディング (Padding)

padding プロパティを使用して、入力フィールド内のテキストとボーダーの間にスペースを作成します。

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Note:box-sizing: border-box; を指定していることに注目してください。これにより、パディングとボーダーが要素の総幅（width）と高さ（height）に含まれるようになります。

3. ボーダーのスタイリング (Border Styling)

border プロパティを使用して、ボーダーのサイズや色を変更したり、border-radius プロパティで角を丸くしたりできます。

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

下側のボーダーのみを表示したい場合は、border-bottom プロパティを使用します：

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

4. フォーカス時のスタイリング (Focus Styling)

デフォルトでは、一部のブラウザは入力フィールドがフォーカス（クリック）されたときに、要素の周囲に青いアウトラインを表示します。この挙動を削除するには、outline: none; を input:focus セレクタに追加します。

:focus セレクタを使用して、入力フィールドがフォーカスされている時のスタイルを定義できます。

input[type=text]:focus {
  background-color: lightblue;
}

フォーカス時にボーダーの色を変更する例：

input[type=text]:focus {
  border: 3px solid #555;
}

5. アイコン付きの入力フィールド (Input with Icon)

入力フィールド内にアイコンを表示したい場合は、background-image プロパティを使用し、background-position プロパティで配置を調整します。また、アイコンと重ならないように、大きな左パディング（padding-left）を追加してください。

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

6. アニメーション付きの検索入力 (Animated Search Input)

この例では、CSS の transition プロパティを使用して、検索入力フィールドがフォーカスされた時に幅を動的に変化（アニメーション）させます。

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

7. テキストエリアのスタイリング (Styling Textareas)

Note: resize プロパティを使用して、テキストエリア（textarea）のリサイズを無効化したり、制限したりできます（右下隅の「ハンドル」を消すことができます）。

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none; /* リサイズを禁止する */
}

8. セレクトメニューのスタイリング (Styling Select Menus)

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

9. 入力ボタンのスタイリング (Styling Input Buttons)

input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* マウスホバー時の色変更 */
input[type=button]:hover {
  background-color: #45a049;
}

10. レスポンシブなフォーム (Responsive Form)

float または flexbox、そして media queries（メディアクエリ）を組み合わせることで、レスポンシブなレイアウトを作成できます。画面の幅に応じて、要素を横並びにしたり、縦に積み上げたりすることが可能です。

10.1 レスポンシブフォームのコード例

* {
  box-sizing: border-box;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* 行のフロートをクリア */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 画面幅が 600px 以下のとき、2つのカラムを縦に並べる */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}