プレースホルダー付きテキストエリアを作る方法
プレースホルダー付きテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのtextarea要素を使用し、入力前に案内文を表示できるテキストエリアを作成します。入力を開始するとプレースホルダーは自動で消えるため、入力例や説明文を分かりやすく表示したいフォームに適しています。
お問い合わせフォーム、会員サイトの自己紹介欄、ECサイトの注文時に利用する備考欄、管理画面のメモ入力など、入力内容を事前に案内したい場面で活用できます。プレースホルダーによって入力内容のイメージを伝えられるため、利用者が迷わず入力でき、入力ミスの防止にも役立ちます。また、クリック時には枠線の色が変化し、現在入力している場所も分かりやすく表示されます。
タイトル、説明文、ラベル、プレースホルダーの文章はHTMLから変更できます。CSSではフォーム全体の横幅、高さ、余白、文字サイズ、背景色、枠線、角丸、プレースホルダーの文字色などを用途に合わせて調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすく、初心者でも導入しやすいテキストエリアのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
プレースホルダー付きのテキストエリアです。
入力前はプレースホルダーが表示されます。文字を入力するとプレースホルダーは自動で非表示になります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<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="textarea-placeholder_wrap">
<!-- タイトル -->
<div class="textarea-placeholder_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="textarea-placeholder_text">
プレースホルダー付きのテキストエリアです。
</p>
<!-- 入力項目 -->
<div class="textarea-placeholder_group">
<!-- ラベル -->
<label
class="textarea-placeholder_label"
for="message">
内容
</label>
<!-- プレースホルダー付きテキストエリア -->
<textarea
class="textarea-placeholder_input"
id="message"
name="message"
placeholder="お問い合わせ内容を入力してください。"></textarea>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではtextarea要素のplaceholder属性を使用し、入力前に案内文を表示できるテキストエリアを作成します。CSSではフォーム全体の横幅や余白、テキストエリアの高さ、枠線、角丸、プレースホルダーの文字色、フォーカス時の表示などを設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。ページタイトル、「お問い合わせ内容」のタイトル、説明文、「内容」のラベル、テキストエリアへ表示するプレースホルダーを編集できます。placeholder="お問い合わせ内容を入力してください。"によって、入力前の案内文を表示します。文字を入力するとプレースホルダーは自動で見えなくなり、入力内容を削除すると再び表示されます。
style.cssはページ全体、フォーム、タイトル、説明文、ラベル、テキストエリアのデザインを設定するファイルです。フォームの最大横幅、背景色、余白、角丸、テキストエリアの高さ、枠線、入力文字とプレースホルダーの色、フォーカス時の色や影を変更できます。
設置方法・使い方
sampleフォルダを作成し、その中へindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。テキストエリアが未入力の状態では「お問い合わせ内容を入力してください。」と表示され、文字を入力するとプレースホルダーが非表示になります。入力欄の右下を上下へドラッグすると、高さを変更できます。
カスタマイズできる内容
index.htmlではページタイトル、フォーム内のタイトル、説明文、ラベル、プレースホルダーを変更できます。入力してほしい内容に合わせて、「ご質問を入力してください。」「備考がある場合は入力してください。」などの案内文へ編集できます。
style.cssではページ全体の背景色や余白、フォームの最大横幅、背景色、角丸、タイトルの文字サイズ、テキストエリアの高さ、内側余白、枠線色、入力文字の行間、プレースホルダーの文字色、フォーカス時の強調表示を変更できます。resize:vertical;により、利用者はテキストエリアの高さだけを上下方向へ変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによってフォームを左右中央へ配置します。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
gap:10px;
ラベルとテキストエリアの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
font-size:16px;
ラベルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
min-height:180px;
テキストエリアの初期の最低高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:0.3s;
枠線と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストエリアを選択したときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
padding:24px 18px;
画面幅640px以下で使用するフォームの内側余白です。24pxは上下、18pxは左右の余白を表します。値を小さくするとスマートフォン画面で表示できる入力欄の横幅が広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてフォーム全体が縮小されます。また、画面幅640px以下ではメディアクエリによってフォームの内側余白をpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント