入力欄がくぼんで見える立体テキストエリアを作る方法
入力欄がくぼんで見える立体テキストエリアを作る方法を紹介します。このサンプルでは、テキストエリアの内側へ影を付けることで、入力部分が奥へくぼんでいるように見えるデザインを作成します。外側には厚みと影を付け、通常のフラットなテキストエリアとは異なる立体感のある入力フォームに仕上げています。
テキストエリアをクリックすると、くぼんだ見た目を保ったまま入力欄全体が少し上方向へ浮き上がります。フォーカス中は内側の色や影も変化するため、現在入力している場所を視覚的に確認できます。お問い合わせフォームやコメント欄、備考欄など、複数行の文章を入力するフォームへ利用できます。
タイトル、説明文、ラベル、プレースホルダーは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-textarea_wrap">
<!-- タイトル -->
<div class="three-dimensional-textarea_title">
立体的なくぼみがあるテキストエリア
</div>
<!-- 説明文 -->
<p class="three-dimensional-textarea_text">
内側へ深くくぼんで見える立体的な入力欄です。
</p>
<!-- 入力項目 -->
<div class="three-dimensional-textarea_group">
<!-- ラベル -->
<label
class="three-dimensional-textarea_label"
for="three-dimensional-textarea-message">
お問い合わせ内容
</label>
<!-- 立体フレーム -->
<div class="three-dimensional-textarea_frame">
<!-- テキストエリア -->
<textarea
id="three-dimensional-textarea-message"
class="three-dimensional-textarea_input"
name="message"
placeholder="お問い合わせ内容を入力してください。"></textarea>
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではtextarea要素を使用して複数行の文章を入力できるテキストエリアを作成し、その外側に立体感を付けるためのフレームを配置します。CSSではグラデーションや内側の影、外側の影を組み合わせ、入力欄が奥へくぼんで見える立体的なデザインを作成します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテキストエリア全体を構成するファイルです。「立体的なくぼみがあるテキストエリア」のタイトル、説明文、「お問い合わせ内容」のラベル、入力欄のプレースホルダーを変更できます。textarea要素を使用しているため、改行を含む複数行の文章を入力できます。
style.cssはテキストエリア全体と立体デザインを設定するファイルです。フォーム全体の横幅や余白、背景色、角丸のほか、立体フレームのグラデーションや影、入力欄の内側の影を変更できます。また、入力欄をフォーカスしたときの浮き上がる距離や影の変化も設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたテキストエリアへ文章を入力できます。入力欄をクリックしてフォーカスすると、くぼんだ見た目を保ったままフレーム全体が少し上へ浮き上がります。テキストエリアの右下を上下へドラッグすると、高さを変更できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダーの文章を変更できます。用途に合わせて、お問い合わせ内容、コメント、備考、メモなどの入力欄として表示内容を変更できます。
style.cssではフォーム全体の最大横幅、余白、背景色、角丸を変更できます。立体フレームではグラデーションの色、枠線、角丸、下側の厚みや影を調整できます。テキストエリアでは初期高さ、内側余白、角丸、背景のグラデーション、内側の影、入力文字の行間を変更できます。フォーカス時のtransformやbox-shadowを調整すると、浮き上がる距離や立体感の強さも変更できます。
数値調整
style.css
max-width:700px;
テキストエリア全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:36px 32px 44px;
全体の内側余白です。上36px、左右32px、下44pxを指定しています。それぞれの値を変更すると内容と外枠の間隔が変わります。
border-radius:18px;
全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
gap:10px;
ラベルと立体フレームの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:7px 7px 11px;
立体フレームの内側余白です。上と左右を7px、下を11pxにすることで、入力欄の周囲にフレーム部分を表示しています。値を変更するとフレームの見える幅が変わります。
border-radius:14px;
立体フレームの角丸です。値を大きくすると丸みが強くなり、小さくすると角張った形になります。
box-shadow:0 7px 0 #60a5fa, 0 12px 18px rgba(37,99,235,.18);
立体フレームの下側の厚みと影です。7pxを大きくすると厚みが強調され、12pxや18pxを変更すると外側へ広がる影の位置やぼかし具合が変わります。
transition:.25s;
フォーカス時に位置や影が変化する時間です。0.25秒で切り替わります。値を大きくするとゆっくり、小さくすると速く変化します。
min-height:190px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:16px 18px;
テキストエリアの内側余白です。上下16px、左右18pxを指定しています。値を大きくすると入力文字と入力欄の端との間隔が広がります。
border-radius:9px;
テキストエリア自体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
inset 0 7px 10px rgba(15,23,42,.22)
テキストエリア上部から内側へ付けている影です。7pxを変更すると影の位置が変わり、10pxを変更するとぼかし具合が変わるため、入力欄のくぼみ方を調整できます。
transform:translateY(-3px);
入力欄をフォーカスしたときに立体フレームを上へ移動する距離です。現在は3px上へ移動します。負の値を大きくすると、より大きく上へ浮き上がります。
box-shadow:0 10px 0 #3b82f6, 0 17px 22px rgba(37,99,235,.22);
フォーカス時の立体フレームの厚みと影です。通常時より影を大きくすることで、入力欄全体が浮き上がったように表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体の横幅が縮小されます。また、画面幅640px以下では全体の内側余白をpadding:28px 18px 36px;へ変更し、テキストエリアの初期高さをmin-height:170px;へ調整しています。スマートフォン・タブレット・PCで利用できます。
コメント