入力欄がくぼんで見える立体テキストボックスを作る方法
入力欄が内側へくぼんで見える立体テキストボックスを作る方法を紹介します。このサンプルでは、HTMLのinput要素とCSSを使用し、枠の内側に影を付けることで、入力部分が奥へ沈み込んでいるように見えるテキストボックスを作成します。一般的なフラットな入力欄とは異なり、入力する場所を立体的に強調できるデザインです。
お問い合わせフォーム、会員登録、ログイン画面、検索フォームなど、一行の文字を入力するさまざまな場面で利用できます。通常時は内側の影によってくぼみを表現し、入力欄をクリックしてフォーカスすると枠線や影の表示が変化するため、現在入力している場所も分かりやすく確認できます。
ラベルやプレースホルダーは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="three-dimensional-textbox_wrap">
<!-- タイトル -->
<div class="three-dimensional-textbox_title">
立体的なくぼみがあるテキストボックス
</div>
<!-- 説明文 -->
<p class="three-dimensional-textbox_text">
入力欄が内側へ深くくぼんで見える立体的なテキストボックスです。
</p>
<!-- 入力項目 -->
<div class="three-dimensional-textbox_group">
<!-- ラベル -->
<label
class="three-dimensional-textbox_label"
for="three-dimensional-textbox-name">
お名前
</label>
<!-- 立体フレーム -->
<div class="three-dimensional-textbox_frame">
<!-- テキストボックス -->
<input
class="three-dimensional-textbox_input"
type="text"
id="three-dimensional-textbox-name"
name="name"
placeholder="例）山田 太郎">
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではinput要素を使用して一行の文字を入力できるテキストボックスを作成し、その外側に立体感を付けるフレームを配置します。CSSではグラデーションや内側の影、外側の影を組み合わせ、入力欄が内側へくぼんで見える立体的なデザインに仕上げています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテキストボックス全体を構成するファイルです。「立体的なくぼみがあるテキストボックス」のタイトル、説明文、「お名前」のラベル、入力欄のプレースホルダーを変更できます。input要素のtype="text"を使用しているため、一行の文字を入力できます。
style.cssはテキストボックス全体と立体的なデザインを設定するファイルです。全体の横幅や余白、背景色、角丸のほか、入力欄を囲むフレームのグラデーションや影、入力欄の内側の影を設定しています。フォーカス時には枠線と影を変化させ、入力中のテキストボックスを分かりやすく表示します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「お名前」と表示された入力項目のテキストボックスへ一行の文字を入力できます。入力欄をクリックしてフォーカスすると、枠線と内側の影が変化して現在入力している場所が強調されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、「お名前」のラベル、placeholder="例）山田 太郎"の文章を変更できます。用途に合わせて、名前、メールアドレス、検索キーワードなどの一行入力欄として表示内容を変更できます。
style.cssでは全体の最大横幅、余白、背景色、角丸を変更できます。立体フレームではグラデーションの色、枠線、角丸、下側の厚みや影を調整できます。テキストボックスでは高さ、左右の余白、背景色、文字色、角丸、内側の影を変更でき、くぼみの深さや立体感を調整できます。フォーカス時の枠線色や影も変更できます。
数値調整
style.css
max-width:700px;
テキストボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:36px 32px 42px;
全体の内側余白です。上36px、左右32px、下42pxを指定しています。それぞれの値を変更すると内容と外枠の間隔が変わります。
border-radius:18px;
全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
gap:10px;
ラベルと立体フレームの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:8px;
立体フレームの内側余白です。値を大きくすると入力欄の周囲に見えるフレーム部分が広くなり、小さくすると細くなります。
border-radius:14px;
立体フレームの角丸です。値を大きくすると丸みが強くなり、小さくすると角張った形になります。
box-shadow:0 7px 0 #3b82f6, 0 12px 18px rgba(37,99,235,.16);
立体フレームの下側の厚みと影です。7pxを大きくすると下側の厚みが強調され、12pxや18pxを変更すると外側の影の位置やぼかし具合が変わります。
height:56px;
テキストボックスの高さです。値を大きくすると入力欄が高くなり、小さくすると低くなります。
padding:0 16px;
テキストボックスの左右の内側余白です。16pxを大きくすると入力文字と左右の端との間隔が広がります。
border-radius:9px;
テキストボックス自体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
テキストボックスへ入力する文字のサイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
inset 0 8px 12px rgba(15,23,42,.18)
テキストボックスの内側上部に付けている影です。8pxを変更すると影の位置が変わり、12pxを変更するとぼかし具合が変わるため、入力欄のくぼみ方を調整できます。
transition:.3s;
フォーカス時に枠線と影が変化する時間です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く変化します。
0 0 0 3px rgba(37,99,235,.12)
フォーカス時に入力欄の外側へ表示する強調用の影です。3pxを大きくすると強調範囲が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてテキストボックス全体が縮小されます。また、画面幅640px以下では全体の内側余白をpadding:28px 18px 34px;へ変更し、テキストボックスの高さをheight:52px;へ調整しています。スマートフォン・タブレット・PCで利用できます。
コメント