プレースホルダー付きテキストボックスを作る方法
プレースホルダー付きテキストボックスを作る方法を紹介します。入力欄の中へ案内文を表示できるため、ユーザーに「何を入力すればよいか」を分かりやすく伝えられます。HTMLとCSSだけで実装できるシンプルなサンプルなので、フォームの基本構成としてそのまま利用できます。
プレースホルダーは入力前だけ表示され、文字を入力すると自動的に消えるため、名前・メールアドレス・電話番号・検索キーワードなど、入力内容を自然に案内できます。お問い合わせフォームや会員登録画面、ログイン画面、検索フォームなど、さまざまなWebサイトで利用しやすいデザインです。
サンプルではテキストボックスの横幅や余白、文字サイズ、枠線、角丸、プレースホルダーの文字色などをCSSから自由に変更できます。スマートフォン・タブレット・PCでも利用しやすいレスポンシブ対応となっており、初心者でもコピペで導入しやすく、用途に合わせて簡単にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力欄にはプレースホルダーが表示され、文字を入力すると自動で消えます。
プレースホルダー付きテキストボックスのデモです。入力前は案内文が表示され、文字を入力すると自動的にプレースホルダーが消える動作を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<meta charset="UTF-8">
<!-- スマートフォン・タブレット表示へ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するページタイトル -->
<title>プレースホルダー付きテキストボックス</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- プレースホルダー付きテキストボックス全体 -->
<div class="placeholder-textbox_wrap">
<!-- 入力エリアのタイトル -->
<div class="placeholder-textbox_title">
お名前を入力
</div>
<!-- プレースホルダーの動作を案内する説明文 -->
<p class="placeholder-textbox_text">
入力欄には案内文が表示され、文字を入力すると自動で消えます。
</p>
<!-- テキストボックスのラベル -->
<label
class="placeholder-textbox_label"
for="placeholder-textbox-name">
お名前
</label>
<!-- プレースホルダー付きテキストボックス -->
<input
class="placeholder-textbox_input"
id="placeholder-textbox-name"
name="name"
type="text"
placeholder="例：山田 太郎">
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでプレースホルダー付きテキストボックスを配置し、CSSでレイアウトや文字サイズ、枠線、フォーカス時のデザインを設定しています。JavaScriptを使用しないため、ブラウザで開くだけですぐに利用できるシンプルなサンプルです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はプレースホルダー付きテキストボックスを配置するファイルです。ラベル・タイトル・説明文・placeholder属性へ設定する案内文などを変更できます。
style.css はテキストボックス全体のデザインを設定するファイルです。横幅・余白・背景色・枠線・角丸・文字サイズ・プレースホルダーの文字色・フォーカス時の表示などを変更できます。
設置方法・使い方
sampleフォルダへ index.html と style.css を配置し、index.html をブラウザで開くだけで利用できます。サーバーや外部ライブラリは必要ありません。
カスタマイズできる内容
index.html ではタイトル・説明文・ラベル・placeholder属性の案内文を変更できます。style.css では入力欄の横幅・高さ・余白・文字サイズ・背景色・枠線・角丸・プレースホルダーの文字色・フォーカス時の色などを自由に調整できます。
数値調整
style.css の max-width:700px; を 900px に変更すると入力フォーム全体が広くなり、500px にするとコンパクトになります。
padding:40px; を 60px に変更するとカード内の余白が広くなり、24px にするとコンパクトなレイアウトになります。
padding:14px 16px; を 18px 20px に変更すると入力欄が高くなり、入力しやすくなります。逆に小さくすると高さが低くなります。
border-radius:10px; を 20px に変更すると入力欄の角がより丸くなり、0 にすると四角いデザインになります。
font-size:16px; を 18px に変更すると入力文字が大きくなり、14px にすると小さく表示されます。
transition:border-color 0.3s; の 0.3s を 0.6s に変更するとフォーカス時の色変化がゆっくりになり、0.1s にすると素早く切り替わります。
outline:3px solid ... の 3px を 5px に変更するとフォーカス時の外枠が太くなり、1px にすると控えめな表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%; と max-width によって画面幅に応じて自動で縮小表示されます。また、640px以下ではmedia queryで余白・タイトルサイズ・入力欄の余白を調整しているため、スマートフォン・タブレット・PCでも快適に利用できます。
コメント