下線だけのテキストフィールドを作る方法
下線だけのテキストフィールドを作る方法を紹介します。このサンプルでは、HTMLのinput要素で1行入力用のテキストフィールドを作成し、上下左右を囲む枠線を表示せず、入力欄の下側だけに線を表示します。一般的な四角い入力欄とは異なり、必要な要素をすっきり見せたいフォームに使いやすいシンプルなデザインです。
通常時は薄いグレーの下線を表示し、マウスを重ねると下線を少し濃くします。さらに、テキストフィールドをクリックしたりキーボード操作で選択したりすると、下線が青色になり、通常時より少し太く表示されます。JavaScriptは使用せず、HTMLとCSSだけで状態に応じた下線の変化を実装できます。
お問い合わせフォームの名前入力、会員登録フォーム、プロフィール編集画面など、1行の文字入力が必要な場面で利用できます。ラベルや表示内容はHTMLから変更でき、CSSではフォーム全体の横幅や余白、下線の太さ、色、フォーカス時のデザインなどを調整できます。画面幅640px以下では余白や文字サイズも調整されるレスポンシブ対応です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力欄の下線だけを表示したシンプルなテキストフィールドです。
通常時は薄い下線だけが表示され、入力欄をクリックすると下線が青色で強調されます。
コードをコピーして使おう！
<!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="underline-text-field_wrap">
<!-- タイトル -->
<div class="underline-text-field_title">
お名前を入力
</div>
<!-- 説明文 -->
<p class="underline-text-field_text">
入力欄の下線だけを表示したシンプルなテキストフィールドです。
</p>
<!-- ラベル -->
<label class="underline-text-field_label" for="underline-text-field-name">
お名前
</label>
<!-- 下線だけのテキストフィールド -->
<input
class="underline-text-field_input"
id="underline-text-field-name"
name="name"
type="text">
</div>
</body>
</html>ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではinput要素を使用して1行入力できるテキストフィールドを作成し、CSSでは通常の入力欄に表示される上下左右の枠線をなくして、下線だけを表示するデザインにしています。通常時は薄いグレーの下線を表示し、マウスを重ねると下線が少し濃くなり、フォーカスすると青色で太い下線へ切り替わります。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテキストフィールド全体を構成するファイルです。「お名前を入力」のタイトル、説明文、「お名前」のラベル、1行入力用のinput要素を配置しています。タイトルや説明文、ラベルは用途に合わせて変更できます。
style.cssはテキストフィールドのデザインを設定するファイルです。フォーム全体の横幅や余白、背景色、角丸のほか、テキストフィールドの下線、文字サイズ、マウスオーバー時とフォーカス時の下線を設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示された「お名前」のテキストフィールドへ1行の文字を入力できます。通常時は薄いグレーの下線だけが表示され、マウスを重ねると下線が少し濃くなります。テキストフィールドをクリックするかキーボード操作でフォーカスすると、下線が青色で太く表示されます。
カスタマイズできる内容
index.htmlでは「お名前を入力」のタイトル、「入力欄の下線だけを表示したシンプルなテキストフィールドです。」の説明文、「お名前」のラベルを変更できます。名前以外の入力欄として使用する場合は、入力内容に合わせてこれらの文章を変更できます。
style.cssではフォーム全体の最大横幅、上下左右の余白、背景色、枠線、角丸、文字サイズを変更できます。テキストフィールドでは通常時の下線色と太さ、マウスオーバー時の下線色、フォーカス時の下線色と太さを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxが上下、20pxが左右の余白です。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:700px;
テキストフィールド全体を囲むエリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
テキストフィールド全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
テキストフィールド全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border:1px solid #e5e7eb;
テキストフィールド全体を囲む枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
テキストフィールド全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
margin:0 0 12px;
タイトルの下側余白です。12pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると説明文と入力部分の間隔が広がり、小さくすると狭くなります。
margin-bottom:10px;
ラベルとテキストフィールドの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:14px 0;
テキストフィールドの上下の内側余白です。14pxを大きくすると入力部分が高くなり、小さくすると低くなります。
border-bottom:2px solid #cbd5e1;
通常時に表示する下線です。2pxを大きくすると下線が太くなり、#cbd5e1を変更すると下線の色を変更できます。
font-size:16px;
テキストフィールドへ入力する文字のサイズです。値を大きくすると入力文字が大きくなり、小さくすると小さくなります。
transition:border-bottom-color .3s ease;
下線の色が切り替わる時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。
border-bottom:2px solid #94a3b8;
マウスを重ねたときの下線です。2pxで太さ、#94a3b8で色を変更できます。
border-bottom:3px solid #2563eb;
フォーカスしたときの下線です。3pxを大きくすると下線が太くなり、#2563ebを変更するとフォーカス時の色を変更できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;とmax-width:700px;によって、PCでは最大700pxで表示し、画面幅が狭くなると利用できる横幅に合わせて縮小します。
画面幅640px以下ではメディアクエリを使用し、bodyの余白を24px 12px、テキストフィールド全体の上下余白を24px、内側余白を24px 18pxへ変更します。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント