HTMLとCSSを使ってWebページを作成する際、欠かせないのが「テキスト入力欄」です。お問い合わせフォームやログイン画面、検索バーなど、さまざまな場面で活用されており、ユーザーとのインタラクションを支える重要な要素です。
本記事では、HTMLでの基本的なテキスト入力欄の作成方法から、CSSを用いたスタイリング、さらに使いやすさやデザイン性を高めるテクニックまでを丁寧に解説します。初心者でも理解しやすいコード例を交えながら、実務でも役立つ知識を紹介します。
HTMLでは、<input>タグを使ってテキスト入力欄を作成します。最も基本的な入力欄は以下のようなコードです。
<input type="text" name="username" placeholder="ユーザー名を入力してください">
このコードの各要素の意味は以下の通りです。
type="text"：テキスト入力欄であることを指定name="username"：送信時のデータの名前placeholder="..."：ヒントとして表示されるテキスト実際にブラウザで表示すると、ユーザーが文字を入力できるボックスが表示されます。HTMLだけで簡単に実装できますが、見た目はブラウザごとのデフォルトデザインになります。
HTMLだけでもテキスト入力欄は動作しますが、見た目や使いやすさを考慮すると、CSSでの装飾が重要です。
以下は、シンプルで見やすいテキストボックスの例です。
input[type="text"] {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
このスタイルをHTMLに適用すると、次のように美しく整ったテキスト入力欄が完成します。
<input type="text" name="username" placeholder="ユーザー名" />
CSSで調整できる主な項目には以下があります：
width：横幅padding：内側の余白border：枠線の太さ・色・スタイルborder-radius：角の丸みfont-size：文字サイズユーザーが入力欄をクリックした時（フォーカス時）に視覚的な変化があると、ユーザー体験が向上します。以下のように:focus擬似クラスを使ってスタイルを追加できます。
input[type="text"]:focus {
border-color: #007BFF;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
outline: none;
}
このようにすることで、ユーザーが「どこを操作しているのか」が直感的に伝わるようになります。
テキスト入力欄には、<label>タグをセットで使うとアクセシビリティが向上します。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="you@example.com">
for属性とid属性を一致させることで、ラベルをクリックしても入力欄が選択されるようになります。これにより、スマホなどの小さい画面でも操作性が高まります。
<input>タグのtype属性にはさまざまな種類があります。
| タイプ | 用途 |
|---|---|
text | 一般的なテキスト |
email | メールアドレス入力 |
password | パスワード入力（非表示） |
search | 検索ボックス風 |
url | URL専用 |
HTML5により入力チェック機能も付与され、たとえばtype="email"ならメールアドレスの形式チェックが自動で行われます。
初心者がよく混乱するのがplaceholderとvalueの違いです。
placeholder：ヒントとして薄く表示されるが送信されないvalue：初期値として入力され、送信される<input type="text" name="name" placeholder="名前を入力してください">
<input type="text" name="name" value="山田太郎">
前者は未入力時にヒントとして見えるだけで、後者は最初から「山田太郎」と表示されます。
複数行の入力には<textarea>タグを使います。
<label for="message">メッセージ</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="ご意見をお聞かせください"></textarea>
CSSを適用して見た目を調整することもできます。
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
resize: vertical;
}
スマホでの入力体験をよくするには、以下の工夫も必要です。
<input type="email" inputmode="email" autocomplete="on">
inputmodeで入力モード（数字・メールなど）を指定autocompleteで候補を自動表示maxlengthやrequiredで入力制限を設定これにより、ミスタイプ防止やUX向上に繋がります。
実際に使用できるフォームテンプレートの例です。
<form>
<label for="name">お名前</label>
<input type="text" id="name" name="name" placeholder="山田 太郎">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5" placeholder="お問い合わせ内容を入力してください"></textarea>
<button type="submit">送信</button>
</form>
スタイルは以下のようにします。
form {
max-width: 500px;
margin: auto;
}
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
box-sizing: border-box;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
テキスト入力欄は、Webフォームの中でももっとも使用頻度が高く、ユーザー体験を左右する要素です。基本のHTML構造を理解し、CSSで適切にデザインすることで、視認性・操作性の高いUIを提供できます。
特に重要なのは：
これらを押さえることで、実務で活かせる高品質な入力フォームを作成できるようになります。初歩的なフォームから一歩進んだ応用まで、この記事を参考にぜひ実践してみてください。