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

CSSでフォームの入力フィールドをスタイリングする方法

Webフォームの入力フィールド（<input>要素）は、CSSを使って自由にデザインできます。幅や余白、枠線、背景色などを指定することで、サイトのデザインに合わせた見やすいフォームを作成できます。

CSSでinput要素をスタイリングする基本

最もシンプルな例として、入力フィールドの幅を親要素いっぱい（100%）に広げるスタイルを紹介します。以下のコードを参考に、実際にブラウザで動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         input {
            width: 100%;
         }
      </style>
   </head>
   <body>
      <p>下記のフォームに入力してください。</p>
      <form>
         <label for = "subject">科目</label>
         <input type = "text" id = "subject" name = "sub">
         <label for = "student">学生名</label>
         <input type = "text" id = "student" name = "stu">
      </form>
   </body>
</html>

コードの解説

1. CSSの指定

<style>タグ内でinputセレクターに対してwidth: 100%を指定しています。これにより、すべてのテキスト入力フィールドがフォームの横幅いっぱいに表示されます。

2. label要素との関連付け

<label>要素のfor属性と、<input>要素のid属性を同じ値にすることで、ラベルと入力フィールドが関連付けられます。これにより、ラベルをクリックしたときにも対応する入力欄がアクティブになり、アクセシビリティの向上にもつながります。

さらにスタイルを追加するには

基本的な幅の指定に加えて、以下のようなプロパティを組み合わせると、より洗練されたフォームになります。

  • padding：入力欄内の余白を調整し、文字を見やすくします
  • border / border-radius：枠線の色や太さ、角丸を設定できます
  • margin-bottom：複数の入力欄の間隔を空けてレイアウトを整えます
  • :focus疑似クラス：入力中のフィールドだけ枠色を変えるなど、ユーザーへの視覚的なフィードバックを追加できます

まずは上記のサンプルコードを実行し、CSSの各プロパティを少しずつ変更しながら、フォームの見た目がどう変わるか試してみることをおすすめします。

  1. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

  2. フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選

    CSSには、フォームやテキスト入力に関連する便利でありながら、意外と知られていないプロパティがいくつか存在します。その代表例が caret-color、pointer-events、tab-size の3つです。 caret-color: テキスト入力時に点滅するキャレット(テキストカーソル)の色を自由に指定できます。 pointer-events: 要素へのマウス操作を無効化し、ユーザーがその要素をクリックしたり選択したりできないようにできます。 tab-size: タブ文字によって挿入される空白(ホワイトスペース)の幅を設定します。 以下に、これらのプロパティを使用した具体的なコード例