画像付きテキストエリアを作る方法
画像付きテキストエリアを作る方法を紹介します。このサンプルでは、画像と質問文、複数行入力できるtextarea要素を組み合わせ、画像を確認しながら文章を入力できるフォームを作成します。画像と入力欄を同じエリアへ配置することで、画像を参考にした回答や説明文を入力しやすい構成にできます。
模擬テストやクイズの記述式問題、画像について説明する学習コンテンツ、写真を見ながら内容を入力するフォームなどに利用できます。サンプルでは人物画像を左側、質問文と回答用テキストエリアを右側に配置しています。テキストエリアは複数行入力に対応しているため、人物名だけではなく、人物についての説明や画像から読み取った内容など、まとまった文章を入力する用途にも適しています。
質問文、ラベル、プレースホルダー、表示する画像は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-textarea_wrap">
<!-- タイトル -->
<div class="image-textarea_title">
画像を見て回答してください
</div>
<!-- 説明文 -->
<p class="image-textarea_text">
画像を確認して、質問への回答を入力してください。
</p>
<!-- 画像と回答エリア -->
<div class="image-textarea_content">
<!-- 問題画像 -->
<div class="image-textarea_image">
<img
src="images/image1.png"
alt="問題として表示する人物の画像">
</div>
<!-- 回答エリア -->
<div class="image-textarea_group">
<!-- 質問文 -->
<p class="image-textarea_question">
この画像の人物について説明してください。
</p>
<!-- ラベル -->
<label
class="image-textarea_label"
for="answer">
回答
</label>
<!-- 複数行入力できるテキストエリア -->
<textarea
class="image-textarea_input"
id="answer"
name="answer"
placeholder="この人物について入力してください"></textarea>
</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をブラウザで開きます。PCなど画面幅に余裕がある場合は左側に画像、右側に質問文と回答用テキストエリアが表示されます。利用者は画像を確認しながら、回答欄へ改行を含む複数行の文章を入力できます。テキストエリアの右下を上下へドラッグすると高さを変更できます。
質問内容を変更する場合はindex.htmlのimage-textarea_question内にある「この画像の人物について説明してください。」を書き換えます。回答欄の案内を変更する場合は、textarea要素のplaceholder="この人物について入力してください"を書き換えてください。「回答」の表示はlabel要素、上部のタイトルと説明文もindex.htmlから変更できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、質問文、「回答」のラベル、プレースホルダー、画像のsrcとaltを変更できます。人物について説明する問題だけでなく、画像に写っている物や場所について文章で回答する内容へ変更できます。
style.cssではフォーム全体の最大横幅、画像側の横幅、画像と回答エリアの間隔、画像の角丸、質問文やラベルの文字サイズ、テキストエリアの高さ、内側余白、枠線、角丸、入力文字の行間、フォーカス時の色と影などを変更できます。resize:vertical;を変更すると、利用者による高さ変更の許可方法も調整できます。
数値調整
style.css
max-width:760px;
画像付きテキストエリア全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくすると画像と回答エリアまでの間隔が広がり、小さくすると狭くなります。
grid-template-columns:240px 1fr;
画像と回答エリアの横幅を設定しています。240pxが画像側の横幅で、残りのスペースを回答エリアとして使用します。240pxを大きくすると画像側が広くなります。
gap:28px;
画像と回答エリアの間隔です。値を大きくすると左右の間隔が広がり、小さくすると近くなります。
border-radius:12px;
問題画像の角丸です。値を大きくすると画像の丸みが強くなります。
gap:10px;
質問文、ラベル、テキストエリアの間隔です。値を大きくすると各要素の間隔が広がります。
font-size:18px;
質問文の文字サイズです。値を大きくすると質問文が大きく表示されます。
min-height:160px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxを大きくすると入力欄の上下余白が広がり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの通常時の枠線です。2pxを大きくすると枠線が太くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
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で利用できます。
コメント