アイコン付きテキストボックスを作る方法
アイコン付きテキストボックスを作る方法を紹介します。入力欄の左側へ検索・ユーザー・メールなどのアイコンを配置することで、どのような内容を入力するフォームなのかを視覚的に分かりやすく表現できます。HTMLとCSSだけで実装できるため、JavaScriptを使わずに手軽に導入できます。
このサンプルでは、ラベル付きのテキストボックスにアイコンを配置し、入力文字と重ならないよう余白を調整したレイアウトを実装しています。お問い合わせ画面や会員登録画面、ログイン画面、検索フォームなど、さまざまなWebサイトでそのまま利用しやすい構成です。アイコンやラベル、プレースホルダーの内容も簡単に変更できます。
シンプルなコード構成なので初心者でも導入しやすく、入力欄の色や角丸、枠線、余白などもCSSから自由にカスタマイズできます。フォーム全体のデザインを統一したい場合や、入力内容を直感的に伝えたい場合にも活用しやすいサンプルです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
メールアドレスを入力
入力欄の左側にアイコンを表示したテキストボックスです。
✉️
アイコン付きテキストボックスの表示を確認できるデモです。入力すると通常のテキストボックスと同じように利用できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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="icon-textbox_wrap">
<!-- 入力エリアのタイトル -->
<div class="icon-textbox_title">
メールアドレスを入力
</div>
<!-- 入力欄の内容を案内する説明文 -->
<p class="icon-textbox_text">
入力欄の左側にアイコンを表示したテキストボックスです。
</p>
<!-- テキストボックスのラベル -->
<label
class="icon-textbox_label"
for="icon-textbox-email">
メールアドレス
</label>
<!-- アイコンとテキストボックスをまとめる要素 -->
<div class="icon-textbox_field">
<!-- メールアドレスを表すアイコン -->
<span
class="icon-textbox_icon"
aria-hidden="true">
✉️
</span>
<!-- メールアドレスを入力するテキストボックス -->
<input
class="icon-textbox_input"
id="icon-textbox-email"
name="email"
type="email"
placeholder="例：sample@example.com">
</div>
</div>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
background:#ffffff; /* ページ全体の背景色 */
color:#1e293b; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* アイコン付きテキストボックス全体 */
.icon-textbox_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:700px; /* 最大横幅。900pxにすると広く、500pxにするとコンパクトになる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 内側余白。40pxにすると広く、20pxにすると狭くなる */
border:1px solid #d8e2f0; /* 外枠の太さ・種類・色 */
border-radius:20px; /* 全体の角丸。30pxにすると丸く、0にすると四角くなる */
background:#f8fbff; /* 全体の背景色 */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
}
/* 入力エリアのタイトル */
.icon-textbox_title{
margin:0 0 16px; /* 下側16pxの余白。値を大きくすると説明文との間隔が広がる */
color:#1e293b; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ。28pxにすると大きく、18pxにすると小さくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.icon-textbox_text{
margin:0 0 28px; /* 下側28pxの余白。値を大きくするとラベルとの間隔が広がる */
color:#64748b; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ。18pxにすると大きくなる */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
text-align:center; /* 説明文を中央揃えにする */
}
/* テキストボックスのラベル */
.icon-textbox_label{
display:block; /* ラベルを1行で表示 */
margin-bottom:10px; /* 下側10pxの余白。値を大きくすると入力欄との間隔が広がる */
color:#1e293b; /* ラベルの文字色 */
font-size:16px; /* ラベルの文字サイズ。18pxにすると大きくなる */
font-weight:700; /* ラベルを太字にする */
line-height:1.5; /* ラベルの行間 */
}
/* アイコンとテキストボックスをまとめる要素 */
.icon-textbox_field{
position:relative; /* アイコンをこの要素を基準に配置 */
width:100%; /* 親要素の横幅いっぱいに表示 */
}
/* テキストボックス左側のアイコン */
.icon-textbox_icon{
position:absolute; /* テキストボックスの上へ重ねて配置 */
top:50%; /* アイコンの基準位置を縦方向の中央へ設定 */
left:18px; /* 左端から18px離して配置。値を大きくすると右へ移動する */
z-index:1; /* アイコンをテキストボックスより手前へ表示 */
display:flex; /* アイコンを中央配置するためflexを使用 */
align-items:center; /* アイコンを縦方向の中央へ配置 */
justify-content:center; /* アイコンを横方向の中央へ配置 */
width:24px; /* アイコン表示領域の横幅。32pxにすると広くなる */
height:24px; /* アイコン表示領域の高さ。32pxにすると高くなる */
font-size:20px; /* アイコンの大きさ。24pxにすると大きく、16pxにすると小さくなる */
line-height:1; /* アイコン周囲の余分な行間を抑える */
transform:translateY(-50%); /* アイコンを自身の高さの半分だけ上へ移動して中央配置 */
pointer-events:none; /* アイコンが入力欄のクリック操作を妨げないようにする */
}
/* テキストボックス本体 */
.icon-textbox_input{
width:100%; /* 親要素の横幅いっぱいに表示 */
padding:16px 18px 16px 52px; /* 上下16px・右18px・左52px。左側へアイコン用の余白を確保 */
border:2px solid #c7d4e8; /* 枠線の太さ・種類・色。2pxを大きくすると枠線が太くなる */
border-radius:12px; /* 入力欄の角丸。20pxにすると丸く、0にすると四角くなる */
background:#ffffff; /* 入力欄の背景色 */
color:#1e293b; /* 入力文字の色 */
font-size:16px; /* 入力文字のサイズ。18pxにすると大きく、14pxにすると小さくなる */
line-height:1.5; /* 入力文字の行間 */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
transition:border-color 0.3s,box-shadow 0.3s; /* 0.3秒で枠線と影を変化。0.6sにするとゆっくり、0.1sにすると速くなる */
}
/* プレースホルダーの文字 */
.icon-textbox_input::placeholder{
color:#94a3b8; /* プレースホルダーの文字色 */
opacity:1; /* ブラウザごとの透明度差をなくす */
}
/* テキストボックスへフォーカスした状態 */
.icon-textbox_input:focus{
border-color:#2563eb; /* フォーカス時の枠線色 */
outline:none; /* ブラウザ標準の外枠を非表示 */
box-shadow:0 0 0 4px rgba(37,99,235,0.15); /* 外側へ4pxの強調表示。4pxを大きくすると強調範囲が広がる */
}
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン表示時のページ全体 */
body{
padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
}
/* スマートフォン表示時の全体 */
.icon-textbox_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小 */
padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
}
/* スマートフォン表示時のタイトル */
.icon-textbox_title{
font-size:20px; /* タイトルの文字サイズを20pxへ縮小 */
}
/* スマートフォン表示時のアイコン */
.icon-textbox_icon{
left:15px; /* 左端から15px離して配置 */
font-size:18px; /* アイコンの大きさを18pxへ縮小 */
}
/* スマートフォン表示時のテキストボックス */
.icon-textbox_input{
padding:14px 14px 14px 48px; /* 上下14px・右14px・左48pxへ縮小し、アイコン用余白を確保 */
}
}
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSのみで構成された、アイコン付きテキストボックスです。使用ファイルは2つだけなので構成が分かりやすく、HTMLでフォームの内容を作成し、CSSでアイコンの配置やテキストボックスのデザインを設定しています。JavaScriptを使用していないため、そのままブラウザで開くだけで動作を確認できます。
sample
├── index.html
└── style.css
各ファイルの役割
index.htmlはアイコン付きテキストボックスのレイアウトを定義するファイルです。タイトル、説明文、ラベル、アイコン、入力欄の内容を編集できます。
style.cssはデザインを設定するファイルです。文字サイズ、余白、枠線、角丸、背景色、アイコンの位置、フォーカス時の見た目、レスポンシブ表示を変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置してください。その後、sample/index.htmlをブラウザで開くとアイコン付きテキストボックスを利用できます。サーバー環境は不要で、ローカル環境でもそのまま動作します。
カスタマイズできる内容
index.htmlではラベル名、アイコン、プレースホルダー、入力タイプを変更できます。style.cssでは入力欄の横幅、文字サイズ、背景色、枠線の色、角丸、アイコンの位置、余白、フォーカス時の色などを自由に調整できます。
数値調整
style.cssのmax-widthを変更するとフォーム全体の横幅を調整できます。paddingを変更すると入力欄や全体の余白が変わります。border-radiusを変更すると角丸の大きさを調整できます。transition:0.3sはフォーカス時の切り替え速度を表し、値を大きくするとゆっくり、小さくすると素早く変化します。leftやpadding-leftを変更するとアイコンの位置と入力開始位置を調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxでフォーム幅を制限し、width:100%で画面幅に応じて自動的に縮小します。また、media queryによりスマートフォンでは余白や文字サイズを調整しているため、PC・タブレット・スマートフォンでも見やすく利用できます。
コメント