HTMLとCSSを使って、入力欄が内側にくぼんで見える立体的なテキストボックスを作成します。青いフレームに厚みを持たせ、入力欄の内側に影を付けることで、表面から一段奥まったようなデザインに仕上げています。
今回は、1行入力できるテキストフィールドと、複数行入力できるテキストエリアの2種類を紹介します。どちらも同じ立体デザインを使用し、入力する文字数や文章の長さに合わせて使い分けられます。
入力欄をクリックすると、青いフレームが少し浮き上がり、内側の影と背景色が変化します。文字を入力している間もくぼんだ見た目は維持され、立体的な動きをCSSだけで表現しています。
以下のデモでは、2種類の入力欄に実際に文字を入力し、フォーカス時の変化を確認できます。入力した文字は通常のテキストボックスと同じように取得でき、フォームの入力値として利用できます。
デモ
1行入力できる、くぼみのある立体的なテキストフィールドです。
複数行入力できる、くぼみのある立体的なテキストエリアです。
①は1行入力のテキストフィールド、②は複数行入力のテキストエリアです。どちらも入力欄をクリックすると、青い立体フレームが少し浮き上がり、内側のくぼみの陰影が変化します。文字を入力すると、各入力欄の下に取得した値・変数の内容・データ型が表示されます。
コードをコピーして使おう！
① 立体的なくぼみのあるテキストフィールド
<!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="recessed-textbox_container">
<!-- 入力欄のラベル -->
<div class="recessed-textbox_group">
<label class="recessed-textbox_label" for="recessed-textbox-name">
お名前
</label>
<!-- 青い立体フレーム -->
<div class="recessed-textbox_frame">
<!-- 内側にくぼんだ1行入力欄 -->
<input class="recessed-textbox_input recessed-textbox_field" id="recessed-textbox-name" name="name" type="text" placeholder="例：山田 太郎" autocomplete="off">
</div>
</div>
</div>
</body>
</html>② 立体的なくぼみのあるテキストエリア
<!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="recessed-textbox_container">
<!-- 入力欄のラベル -->
<div class="recessed-textbox_group">
<label class="recessed-textbox_label" for="recessed-textbox-message">
お問い合わせ内容
</label>
<!-- 青い立体フレーム -->
<div class="recessed-textbox_frame">
<!-- 内側にくぼんだ複数行入力欄 -->
<textarea class="recessed-textbox_input recessed-textbox_area" id="recessed-textbox-message" name="message" placeholder="お問い合わせ内容を入力してください。" rows="5"></textarea>
</div>
</div>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、HTMLとCSSを使って、入力欄が内側にくぼんで見える立体的なテキストボックスを作成しています。1行入力用のテキストフィールドと、複数行入力用のテキストエリアをそれぞれ用意しており、どちらも青いフレームと内側の影を組み合わせたデザインです。コードは2種類に分かれているため、使用したい入力欄の「サンプル一式をダウンロード」から個別に取得できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlには、入力欄のラベル、青い立体フレーム、テキストフィールドまたはテキストエリアを配置しています。style.cssには、フレームのグラデーション、入力欄の内側の影、フォーカス時の浮き上がる動き、スマートフォン向けの表示調整を記述しています。2種類ともファイル構成は同じですが、index.htmlの入力要素と、style.cssの高さ設定が異なります。
設置方法・使い方
1行入力欄を使用する場合は「① 立体的なくぼみのあるテキストフィールド」、複数行入力欄を使用する場合は「② 立体的なくぼみのあるテキストエリア」からZIPファイルをダウンロードしてください。ZIPを展開するとsampleフォルダ内にindex.htmlとstyle.cssが入っています。2つのファイルを同じ階層に配置し、index.htmlをブラウザで開くと入力欄が表示されます。入力欄をクリックすると青いフレームが少し浮き上がり、フォーカスを外すと元の状態に戻ります。テキストエリアは右下のつまみをドラッグして高さを変更することもできます。
入力欄が内側にくぼんで見える仕組み
立体的なくぼみは、style.cssの.recessed-textbox_inputに設定したbackgroundとbox-shadowで表現しています。背景の上側を暗くし、insetを指定した影を入力欄の内側に重ねることで、表面より奥まって見えるようにしています。
background: linear-gradient(
180deg,
#e2e8f0 0%,
#f1f5f9 18%,
#ffffff 55%,
#ffffff 100%
); /* 上側を暗くして奥行きを表現 */
box-shadow:
inset 0 7px 12px rgba(15, 23, 42, 0.22), /* 上側の内向きの影 */
inset 0 2px 4px rgba(15, 23, 42, 0.10), /* くぼみの奥行きを補強する影 */
inset 0 -2px 3px rgba(255, 255, 255, 0.95); /* 下側の明るい反射 */
insetは影を要素の内側に表示する指定です。例えば、inset 0 7px 12pxの7pxを大きくすると影が下方向へ広がり、12pxを大きくすると影のぼかしが強くなります。また、rgba()の最後の数値を大きくすると影が濃くなるため、くぼみの深さを調整できます。背景の色を変更する場合は、linear-gradient()内のカラーコードを編集してください。
フォーカス時にフレームが浮き上がる仕組み
入力欄をクリックすると、:focus-withinによって青いフレーム全体の位置と影が変化します。同時に、:focusによって入力欄の背景と内側の影が青みを帯び、くぼみが強調されます。
.recessed-textbox_frame:focus-within {
transform: translateY(-3px); /* フレーム全体を上へ3px移動 */
border-color: #3b82f6; /* フォーカス時の枠線色 */
box-shadow:
0 10px 0 #3b82f6, /* 浮き上がった状態の厚み */
0 18px 26px rgba(37, 99, 235, 0.22), /* 下方向の影 */
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
translateY(-3px)はフレームを上方向へ3px移動する指定です。例えば、-5pxに変更すると浮き上がる距離が大きくなり、-1pxにすると控えめな動きになります。フレームの影も移動後の位置に合わせて変化するため、浮き上がったように見えます。動きの速さは.recessed-textbox_frameのtransitionで設定しており、0.25sを大きくするとゆっくり、小さくすると素早く切り替わります。
テキストフィールドとテキストエリアの違い
2種類の入力欄は同じ立体デザインを使用していますが、HTMLの入力要素とCSSの高さ設定が異なります。テキストフィールドはinput要素を使用して1行の文字を入力し、テキストエリアはtextarea要素を使用して複数行の文章を入力します。
<!-- テキストフィールド -->
<input class="recessed-textbox_input recessed-textbox_field" id="recessed-textbox-name" name="name" type="text" placeholder="例：山田 太郎" autocomplete="off">
<!-- テキストエリア -->
<textarea class="recessed-textbox_input recessed-textbox_area" id="recessed-textbox-message" name="message" placeholder="お問い合わせ内容を入力してください。" rows="5"></textarea>
入力欄に表示する案内文は、それぞれのplaceholder属性で変更できます。高さを変更する場合はstyle.cssを編集し、テキストフィールドでは.recessed-textbox_fieldのheight: 58px;、テキストエリアでは.recessed-textbox_areaのmin-height: 190px;を調整してください。テキストエリアのresize: vertical;は、利用者が縦方向にサイズを変更できるようにする指定です。
入力した文字の取得
テキストフィールドとテキストエリアに入力した文字は、それぞれのvalueプロパティに保持されます。どちらもstring（文字列）として取得でき、JavaScriptで自由に利用できます。
レスポンシブ対応
style.cssでは、.recessed-textbox_containerにwidth: 100%;とmax-width: 700px;を指定し、画面幅に合わせて縮小できるようにしています。また、画面幅が640px以下になると、メディアクエリによって全体の余白や角丸、青いフレームの厚みを小さくしています。テキストフィールドの高さは58pxから54px、テキストエリアの最小の高さは190pxから170pxに変更されます。スマートフォンで余白や入力欄の高さを調整したい場合は、@media (max-width: 640px)内の数値を編集してください。
コメント