画像付きテキストボックスを作る方法
画像付きテキストボックスを作る方法を紹介します。このサンプルでは、画像と一行入力用のテキストボックスを組み合わせ、画像を確認しながら回答や文章を入力できるフォームを作成します。画像の内容について答える問題や、写真を見て名称を入力する問題など、画像と文字入力をセットで扱いたい場面に利用できます。
模擬テストやクイズ、学習教材では「この画像に写っているものの名前を入力してください」といった問題に活用できます。そのほか、画像を確認しながら説明や名称を入力するフォームにも利用できます。画像と入力欄をひとまとまりに配置することで、どの画像について入力するのかを視覚的に把握しやすくなります。
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="image-textbox_wrap">
<!-- タイトル -->
<div class="image-textbox_title">
画像を見て回答してください
</div>
<!-- 説明文 -->
<p class="image-textbox_text">
画像の人物名をテキストボックスへ入力してください。
</p>
<!-- 画像と入力欄 -->
<div class="image-textbox_content">
<!-- 問題画像 -->
<img
class="image-textbox_image"
src="images/image1.png"
alt="問題の人物画像">
<!-- 回答エリア -->
<div class="image-textbox_group">
<!-- 質問文 -->
<p class="image-textbox_question">
この画像の人物は誰でしょうか？
</p>
<!-- ラベル -->
<label
class="image-textbox_label"
for="answer">
回答
</label>
<!-- テキストボックス -->
<input
class="image-textbox_input"
id="answer"
name="answer"
type="text"
placeholder="人物名を入力してください">
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルと、問題として表示する1枚の画像で構成されています。HTMLでは画像、質問文、ラベル、テキストボックスを配置し、CSSでは画像と入力エリアを横並びにしたレイアウトや、入力欄の枠線、角丸、フォーカス時の表示などを設定します。JavaScriptは使用せず、画像を見ながら回答を入力するシンプルな構成です。
sample/
├── index.html
├── style.css
└── images/
└── image1.png
各ファイルの役割
index.htmlは画像付きテキストボックス全体を構成するファイルです。「画像を見て回答してください」のタイトル、「画像の人物名をテキストボックスへ入力してください。」の説明文、「この画像の人物は誰でしょうか？」の質問文、「回答」のラベル、「人物名を入力してください」のプレースホルダー、問題として表示する画像を変更できます。画像はimages/image1.pngを読み込む構成です。
style.cssは画像と入力欄のレイアウトやデザインを設定するファイルです。全体の横幅、余白、画像列の横幅、画像と回答エリアの間隔、質問文の文字サイズ、入力欄の枠線や角丸、フォーカス時の色や影などを変更できます。
imagesフォルダには問題として表示する画像を配置します。このサンプルではimage1.pngを使用します。画像ファイル自体は利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中にimagesフォルダを作成します。問題として使用する画像をimage1.pngのファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.htmlのsrc="images/image1.png"も実際のファイル名へ変更します。
配置が完了したらsample/index.htmlをブラウザで開きます。左側に問題画像、右側に質問文と回答用テキストボックスが表示されます。利用者は画像を確認しながら、回答欄へ人物名などの文字を入力できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、質問文、ラベル、プレースホルダー、問題画像を変更できます。問題の内容に合わせて表示する文章と画像を組み合わせて使用できます。
タイトルを変更する場合
画像を見て回答してください
この部分を書き換えると、フォーム上部に表示されるタイトルを変更できます。問題の種類に合わせて「写真を見て答えてください」などの文章へ変更できます。
説明文を変更する場合
画像の人物名をテキストボックスへ入力してください。
この部分を書き換えると、タイトルの下に表示される説明文を変更できます。回答方法や問題の内容に合わせた案内文を設定できます。
質問文を変更する場合
この画像の人物は誰でしょうか？
この部分を書き換えると、画像の横に表示される質問内容を変更できます。人物名だけでなく「この建物の名前は何でしょうか？」や「画像に写っている動物は何でしょうか？」など、使用する画像に合わせた質問へ変更できます。
ラベルを変更する場合
回答
この部分を書き換えると、テキストボックスの上に表示されるラベルを変更できます。「人物名」「名称」「答え」など、入力する内容に合わせて変更できます。
プレースホルダーを変更する場合
placeholder="人物名を入力してください"
placeholderの文章を書き換えると、テキストボックスが空のときに表示される案内文を変更できます。質問内容に合わせて「建物名を入力してください」「答えを入力してください」などへ変更できます。
画像を変更する場合
src="images/image1.png"
imagesフォルダへ使用したい画像を配置し、srcを画像のファイル名に合わせて変更します。画像の内容を変更した場合は、alt="問題の人物画像"も画像の内容に合わせて変更できます。
style.cssでは全体の最大横幅、画像の横幅、画像と入力欄の間隔、画像の角丸、質問文やラベルの文字サイズ、入力欄の内側余白、枠線、角丸、フォーカス時の色と影などを変更できます。
数値調整
style.css
max-width:760px;
画像付きテキストボックス全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
grid-template-columns:240px 1fr;
画像と回答エリアの横幅を設定しています。240pxが画像側の横幅で、残りのスペースを回答エリアとして使用します。240pxを大きくすると画像側が広くなります。
gap:28px;
画像と回答エリアの間隔です。値を大きくすると左右の間隔が広がり、小さくすると近くなります。
border-radius:12px;
問題画像の角丸です。値を大きくすると画像の丸みが強くなります。
gap:10px;
質問文、ラベル、テキストボックスの間隔です。値を大きくすると各要素の間隔が広がります。
font-size:18px;
質問文の文字サイズです。値を大きくすると質問文が大きく表示されます。
padding:14px 16px;
テキストボックスの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストボックスの通常時の枠線です。2pxを大きくすると枠線が太くなります。
border-radius:10px;
テキストボックスの角丸です。値を大きくすると丸みが強くなります。
transition:0.3s;
フォーカス時の枠線と影が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストボックスへフォーカスしたときの外側の強調範囲です。4pxを大きくすると影が広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは通常時にgrid-template-columns:240px 1fr;で画像と回答エリアを横並びにしています。画面幅640px以下ではgrid-template-columns:1fr;へ変更して縦並びにし、画像にはmax-width:280px;とmargin:0 auto;を指定して中央へ配置します。また、全体の内側余白も24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント