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