基本のテキストボックスを作る方法
基本のテキストボックスを作る方法を紹介します。このサンプルでは、HTMLのinput要素を使用して、1行の文字を入力できるシンプルなテキストボックスを作成します。ラベル付きの入力フォームを見やすいレイアウトで配置し、クリックして入力すると枠線の色が変わるため、現在入力中の項目が分かりやすく表示されます。
お問い合わせ画面の氏名入力、会員サイトのプロフィール登録、ECサイトのお届け先入力、管理画面の検索フォームなど、1行の文字を入力するさまざまな場面で利用できます。シンプルな構成のため、そのまま導入しやすく、フォーム作成の基本としても活用できます。
タイトル、説明文、ラベルはHTMLから自由に変更でき、CSSでは横幅、余白、文字サイズ、背景色、枠線、角丸、フォーカス時の色などを用途に合わせて調整できます。また、レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも見やすく操作しやすい基本的なテキストボックスとして利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ラベルの下に表示されたテキストボックスへ、1行の文字を入力できます。
「お名前」の入力欄をクリックし、文字を入力できる基本のテキストボックスです。
コードをコピーして使おう！
<!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="basic-text-box_wrap">
<!-- 入力エリアのタイトル -->
<div class="basic-text-box_title">
お名前を入力
</div>
<!-- 入力方法を案内する説明文 -->
<p class="basic-text-box_text">
ラベルの下に表示されたテキストボックスへ、1行の文字を入力できます。
</p>
<!-- テキストボックスのラベル -->
<label
class="basic-text-box_label"
for="basic-text-box-name">
お名前
</label>
<!-- 1行の文字を入力するテキストボックス -->
<input
class="basic-text-box_input"
id="basic-text-box-name"
name="name"
type="text">
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではタイトル、説明文、ラベル、1行入力用のテキストボックスを配置し、名前などの文字を入力できるフォームを作成します。CSSではテキストボックス全体のレイアウトや配色、余白、枠線、フォーカス時の表示などを設定しており、シンプルで使いやすい基本的な入力フォームを作成できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテキストボックス全体を構成するファイルです。タイトル、説明文、ラベル、入力項目を編集できます。入力欄の用途に合わせて、お名前、会社名、メールアドレスなどへ変更できます。
style.cssはフォーム全体とテキストボックスのデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、枠線、角丸、フォーカス時の色などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたテキストボックスをクリックすると文字を入力でき、フォーカス時には枠線が強調表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、入力欄のname属性やid属性を変更できます。用途に合わせて氏名、会社名、電話番号、メールアドレスなどさまざまな入力フォームへ利用できます。
style.cssでは全体の横幅、背景色、余白、文字サイズ、枠線、角丸、入力欄の高さ、フォーカス時の枠線色や外側の強調表示などを用途に合わせて調整できます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容との間隔が広がり、小さくすると詰まった表示になります。
font-size:28px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 30px;
説明文の下側余白です。値を大きくすると入力欄との間隔が広がり、小さくすると狭くなります。
padding:14px 16px;
テキストボックスの内側余白です。上下の14pxを変更すると入力欄の高さが変わり、左右の16pxを変更すると文字との間隔が変わります。
border-radius:10px;
テキストボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
outline:3px solid rgba(...)
フォーカス時に表示する外側の強調表示です。3pxを大きくすると強調が太くなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせてフォーム全体が縮小表示されます。また、640px以下ではpaddingやタイトルサイズを調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント