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

CSSでinputフォームを美しくスタイリングする方法を徹底解説

ウェブフォームは多くのウェブサイトに欠かせない要素であり、サイト運営者がユーザーから情報を受け取るための重要な手段です。例えば、メルマガに登録したいユーザーのメールアドレスを受け付けるフォームなどがその代表例です。

CSSを活用すれば、ウェブページ上のフォーム入力フィールドに独自のスタイルを適用できます。これにより、訪問者が快適に情報を入力できる、見た目の美しいフォームを作成することが可能になります。

本記事では、具体例を交えながらHTMLのinput要素の基本と、CSSを使って入力フィールドをスタイリングする方法を詳しく解説します。読み終える頃には、CSSでinputフィールドをプロのようにデザインできるようになっているでしょう。

HTMLとCSSによる入力フォームの基本

ウェブページにフォームを定義するには、HTMLを使用します。HTMLでフォームの構造（どの入力フィールドを、どこに配置するか）を定義し、その後CSSを使ってフォーム内の要素に独自のスタイルを適用します。

HTMLでは、<input>タグを使ってフォーム内のユーザー入力を受け付けます。基本的な構文は以下のとおりです。

<input type="typeOfInput">

HTMLのinput要素についてさらに詳しく学びたい方は、初心者向けガイドをご覧ください。ここでは、ユーザーの名前を受け付ける基本的なフォームフィールドの例を紹介します。

<label for="userName">Name</label>
<input type="text" name="userName">

この入力フィールドは、<input>タグのデフォルトのHTMLスタイルを使用しており、かなりシンプルな見た目です。また、<label>タグを使ってフォームにラベルを追加しています。独自のデザインを加えるには、CSSを使用します。

CSSでinputをスタイリングする

それでは、CSSを使ってフォーム要素をスタイリングする方法を、いくつかの例を通じて見ていきましょう。

入力フィールドの幅を設定する

例として、地元の切手クラブがフォーム送信者の名前を収集するためのフォームフィールドをデザインするとします。このフォームは、ウェブページの幅の50%を占めるようにしたいと考えています。以下のコードでこのフォームを作成できます。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	width: 50%;
}

この例では、ウェブページの幅の50%に相当するフォームフィールドを作成しました。

HTMLコードでは、<label>タグを使ってフォームに「Name」というラベルを追加し、<input>タグでフォームを定義しています。そしてCSSコードでは、すべての<input>タグの幅を親コンテナの50%に設定しています。この場合、親コンテナはウェブページそのものなので、inputタグはサイトの幅の50%を占めることになります。

枠線（ボーダー）を追加する

シアトル切手クラブから、クラブのカラーであるライトブルーの枠線を各フォームフィールドに追加してほしいという依頼がありました。枠線の太さは3pxです。このような場合は、borderプロパティを使って各入力フィールドに枠線を追加できます。

入力フィールドに枠線を追加するためのコードは以下のとおりです。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightblue;
}

このコードでは、borderスタイルを使って入力フィールドに枠線を追加しています。枠線の太さは3pxで、フォームフィールドにライトブルーの枠線が表示されているのがわかります。

CSSのボーダーについてさらに詳しく知りたい方は、CSSボーダーの完全ガイドをご参照ください。

下側のみに枠線を追加する

また、フォームの特定の辺にだけ枠線を追加することも可能です。フィールドの下側にのみ枠線を表示したい場合は、border-bottomプロパティを使用します。コードは以下のとおりです。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border-bottom: 3px solid lightblue;
}

このコードでは、border-bottomプロパティを使って、入力フィールドの下側にのみ枠線を追加しています。

パディング（余白）を追加する

次に、シアトル切手クラブから、フォームの内容（ユーザーが情報を入力する領域）とフォームの枠線の間に余白を設けてほしいという依頼がありました。

クラブの要望では、上下の枠線とフォームの内容の間に10pxのパディングを、左右の枠線とフォームの内容の間に15pxのパディングを設けるとのことです。

このタスクは、以下のコードで実現できます。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	padding: 10px 15px;
	box-sizing: border-box;
}

この例では、paddingスタイルを使って、フォームフィールドの内容と枠線の間に余白を適用しています。1つ目の値（10px）が上下の余白を、2つ目の値（15px）が左右の余白を設定します。

さらに、box-sizingプロパティの値をborder-boxに設定しています。これにより、パディングが要素の合計幅に含まれるようになります。

CSSのpaddingプロパティについて詳しく学びたい方は、CSSパディングのガイドをご覧ください。

フォーカス時のスタイルを設定する

ほとんどのブラウザでは、フォームフィールドをクリックすると、フィールドに青いアウトラインが表示されます。これは、現在フォーカスしているフォームをハイライト表示するための機能です。

しかし、CSSの:focusセレクタを使えば、この動作をカスタマイズできます。シアトル切手クラブから、ユーザーがフォームをクリックしたときに、フォームの下側にライトグレーの枠線を表示してほしいという依頼がありました。以下のコードで実現できます。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input:focus {
	outline: none;
	border-bottom: 3px solid lightgray;
}

ウェブフォームはデフォルトのHTMLスタイルで表示されますが、フォームをクリックすると、幅3pxの実線のライトグレーの枠線がフォームの下側に適用されます。

これは、:focusセレクタを使用しているためです。:focusセレクタを使うと、ユーザーが入力フィールドをクリックしたときにスタイルを適用できます。また、outline: noneルールを使用することで、ユーザーがフォーム入力フィールドをクリックした際にデフォルトの青いアウトラインが表示されるのを防いでいます。

focusセレクタについて詳しく知りたい方は、CSSの:focusセレクタに関するガイドをご参照ください。

角丸の入力フィールドを作成する

シアトル切手クラブから、入力フィールドのすべての辺にライトグレーの枠線を追加し、さらにフィールドの角を丸くしてほしいという依頼がありました。これには、CSSで角丸効果を作成できるborder-radiusプロパティを使用します。

角丸のフォームフィールドを作成するコードは以下のとおりです。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	border-radius: 10px;
}

この例では、まず入力フィールドの周囲に幅3pxの実線のライトグレーの枠線を定義し、次にborder-radiusプロパティを使ってフォームフィールドの角を丸くしています。

ウェブページ上のHTML要素に角丸を適用する方法について詳しく知りたい方は、CSS角丸のガイドをご覧ください。

背景色を設定する

最後に、シアトル切手クラブからもうひとつフォームフィールドを作成するよう依頼がありました。このフォームフィールドは、幅3pxの実線のライトグレーの枠線を持ち、ライトブルーの背景色を持つものです。

このフォームフィールドを作成するには、以下のコードを使用します。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	background-color: lightblue;
}

このコードでは、borderプロパティを使って入力フィールドの周囲に幅3pxの実線のライトグレーの枠線を定義し、次にbackground-colorプロパティを使ってフォームフィールドの背景色をライトブルーに設定しています。

特定のinputフィールドにスタイルを適用する

ここまで、<input>フィールド全般にスタイルを適用する方法を解説してきました。しかし、特定の入力タイプにのみスタイルを適用したい場合もあるでしょう。

そんなときに役立つのが属性セレクタです。スタイルでinputを使用する代わりに、特定の入力フィールドにのみスタイルを適用したい場合は、以下のようなセレクタを使用できます。

  • input[type=text]：すべてのテキストフィールドにスタイルを適用します。
  • input[type=email]：すべてのメールアドレスフィールドにスタイルを適用します。
  • input[type=password]：すべてのパスワードフィールドにスタイルを適用します。
  • input[id=userName]：IDがuserNameである要素にスタイルを適用します。

属性セレクタの仕組みについて詳しく知りたい方は、CSS属性セレクタのガイドをご参照ください。

まとめ

CSSを活用すれば、見た目が美しく、かつ機能的な独自デザインのウェブフォームを作成できます。まずHTMLでフォームの構造を設計し、次にCSSのスタイルを使ってフォームにデザインを適用します。

本記事では、具体例を交えながら、HTMLのinput要素の基本と、CSSを使って入力フィールドをスタイリングする方法を解説しました。これで、CSSを使ってinputフィールドをプロのようにデザインするための知識が身についたはずです。

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

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

  2. HTMLフォームの作り方｜input要素の種類とフォームデザインの基礎

    HTMLフォームとは？ サイト訪問者からデータを収集したい場合、HTMLフォームが必要になります。たとえばユーザー登録の際には、名前・メールアドレス・クレジットカード情報などを入力してもらうことになりますよね。 フォームは訪問者からの入力を受け取り、CGI、ASPスクリプト、PHPスクリプトといったバックエンドアプリケーションへデータを送信（ポスト）します。バックエンド側では、アプリケーション内に定義されたビジネスロジックに基づいて、受け取ったデータに対して必要な処理が実行されます。 フォームの基本構文 HTMLでは<form>タグを使ってフォームを作成し、その中にinputや