CSSのinput要素とは？役割やカスタマイズ方法を詳しく紹介

2023年11月7日

OnozawaMasahiro

Webサイトを見ていると、名前やメールアドレスを入力する場所や、好きな選択肢をクリックするチェックボックスなどをよく見かけますよね。

これらは、<input>タグというものが使用されています。ただ、デフォルトのままだと少し地味でサイトデザインに合わせにくいことも…。

この記事では、そんな<input>タグの見た目を、自分の好みに合わせて変える方法をご紹介します。難しいことはなるべくシンプルに解説していくので、プログラミング未経験の方でも安心して読み進めていけますよ。

input要素とは？

inputとはHTMLタグの一つで、Webサイトに設置する「入力フォーム」の作成時に使用するタグです。さらに詳しくinput要素を理解しておきましょう。

input要素はHTMLタグのひとつ

実はinput要素は、HTML（Hypertext Markup Language）の中でも特に重要な要素です。

先述したように、Webサイトに設置する入力フォームに使うタグなのですが、入力フォームは多くの企業やサービスにとって売上に直結することが多く、最もユーザーに訪れて欲しいページでもあります。

入力フォームに設置されたinput要素はテキスト入力フィールドやラジオボタン、チェックボックスなど、色々な形態に変化しながらユーザーの入力を受け取ります。それ以外にも、ログインフォームでユーザー名やパスワードを入力するためのテキストボックスやボタンにも使われているのです。

使用する機会が多いinput要素は、HTMLタグの中でも特に多くの属性を持っています。

それぞれの属性をしっかりと把握し、適切に設定できれば思い通りに外見や動作をカスタマイズできるでしょう。テキストボックスの初期値を設定したり、入力が必須であることを示したりすることも可能です。

HTMLを学ぶ初心者にとっては鬼門となりやすいinputですが、Web制作の実務においては不可欠で重要な機能を果たしています。

input要素を使いこなせるようになれば、クライアントが求める機能を盛り込みつつ、UI/UXにも優れた魅力的なWebサイトが作れるでしょう。

入力フォームの作成に使う

先ほども紹介したように、input要素は入力フォームの作成に使用することが多いです。例えば一般的なコンタクトフォームの場合、ユーザーは以下のような情報を入力します。

名前
メールアドレス
年齢
性別
社名や部署
問い合わせ内容

名前やメールアドレス、社名などはテキストボックスが設置されている一方、年齢や性別などは選択式のラジオボタンがおかれていることも少なくありません。

これらはできるだけ入力の手間を減らしてユーザーの負担を軽減しようというセオリーに則った慣習ですが、全てinput要素とCSSの組み合わせで出来ています。
最後に、送信ボタンをクリックしてメッセージを送信しますが、このボタンもinput要素で出来ています。こうして考えてみると、問い合わせページのほとんどがinput要素で成立していることが伺えるでしょう。
ユーザーに配慮した良質な入力フォームを作成するには、input要素のtype属性を適切に設定し、ユーザーに適切なフィールドを設計しなければなりません。

テキストボックスやラジオボタン、チェックボックス、ドロップダウンメニューなど、入力内容から逆算してinput要素のtype属性を設定することが大切です。

CSSと組み合わせて各部品を作成

CSS（Cascading Style Sheets）は、Webページの装飾や制御に不可欠な技術です。input要素と組み合わせて使えば、入力フォームの各部品を魅力的にカスタマイズできます。

例えば、テキストボックスのスタイルをコンセプトに合わせて変更したり、ラジオボタンやチェックボックスの見た目を調整したりといったデザイン面でのクオリティアップに活用できるでしょう。

さらに、CVにも関わるボタンのデザイン変更など、Webマーケティングの成果そのものにも直結しています。

CSSと組み合わせてinput要素を使いこなせるようになれば、コンセプトに合わせて入力フォームを装飾したり、ユーザーエクスペリエンス（UX）やコンバージョン（CV）を向上させたりできます。CSSを使用して各部品をカスタマイズする際には、適切なセレクタとプロパティを選び、デザインの指示を記述します。

例えば、テキストボックスの背景色やフォントサイズを指定することで、特定の要素を強調したり、統一感のあるデザインを実現したりできるでしょう。次の章で詳しく解説します。

CSSでinput要素をカスタマイズしよう

ここからは、CSSを用いてinput要素をカスタマイズする具体的な方法を解説します。

使用するCSSの属性は大きく3つ

input要素をカスタマイズするにあたって、使用する属性は大きく3つです。

type属性　text
type属性　checkbox
type属性　submit

それぞれ詳しく見ていきましょう。

type属性1．text

text属性を用いると、1行のテキストを入力するフォームが作成できます。

今回は、このテキストボックスの枠線の色や、テキストボックスにカーソルを合わせたとき（フォーカスしたとき）のデザインを変更します。

以下は、名前を入力するためのテキストボックスのコード例です。

<input type="text" name="name" placeholder="名前入力" class="textbox">

See the Pen
Untitled by 中川大輝 (@yywgumxg-the-typescripter)
on CodePen.

この例では、枠線の色を変更してフォーカスを示しています。

「outline: 0」は、通常ブラウザでテキストボックスをフォーカスすると現れるデフォルトの輪郭を消す指定です。この輪郭を非表示にする場合、ユーザーにフォーカスしていることを明示的に伝えるために、今回のように別の方法で目立たせる工夫が必要です。

type属性2．checkbox

checkbox属性を使用すると、項目を選択するためのチェックボックスを作成することができます。

今回は、標準のチェックボックスを表示しない方法として、疑似要素のbeforeとafterを利用して、独自のデザインのチェックボックスを作成します。この技術は、type="radio"のラジオボタンにも適用することができます。

以下はサンプルコードです。

<!-- テキストボックス -->
<input type="text" class="textbox" placeholder="テキストを入力してください">

<!-- チェックボックス -->
<label>
    <input type="checkbox" class="hidden-checkbox">
    <span class="checkbox">オプション1</span>
</label>

<label>
    <input type="checkbox" class="hidden-checkbox">
    <span class="checkbox">オプション2</span>
</label>

<!-- 送信ボタン -->
<button class="submit">送信</button>

See the Pen
Untitled by 中川大輝 (@yywgumxg-the-typescripter)
on CodePen.

before疑似要素では、チェックボックスの枠部分をデザインしており、after疑似要素では、チェックマークの部分をデザインしています。

チェックマークは、opacity: 0を設定して透明にし、チェックボックスがcheckedの状態になったときに、opacity: 1で表示されるようにしています。

type属性3．submit

「submit」は送信ボタンを設置する際に使用します。入力フォームの最後に必ず置かれる送信ボタンもinputタグで構成されているので、記述の方法を覚えておきましょう。

例えば以下のように記述することが多いです。下記のコードでは、デフォルトのスタイルにCSSを当てて、新しいスタイルを適用しています。

<input type="submit" value="送信" class="btn-submit">

See the Pen
Untitled by 中川大輝 (@yywgumxg-the-typescripter)
on CodePen.

input要素の具体例とサンプルコード

単なるinput要素のままでは、シンプルなデザインのみとなります。より魅力的なWebページを作成するために、CSSを活用してデザインを良くしていきましょう。

下記がサンプルのHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input 装飾デモ</title>
    <style>
        /* ここにCSSをコピペ */
    </style>
</head>
<body>

<!-- テキストボックス -->
<input type="text" class="textbox" placeholder="テキストを入力してください">

<!-- チェックボックス -->
<label>
    <input type="checkbox" class="hidden-checkbox">
    <span class="checkbox">オプション1</span>
</label>

<label>
    <input type="checkbox" class="hidden-checkbox">
    <span class="checkbox">オプション2</span>
</label>

<!-- 送信ボタン -->
<button class="submit">送信</button>

</body>
</html>

サンプルコードにCSSを当てていきます。

See the Pen
Untitled by 中川大輝 (@yywgumxg-the-typescripter)
on CodePen.

以上のように、ページのコンセプトや必要な機能に応じて、適切なマークアップとスタイリングを進めることが重要です。