最初から入力できる状態のテキストエリアを作る方法
最初から入力できる状態のテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのautofocus属性を使用し、ページを開いた時点でテキストエリアへ自動的にカーソルを入れます。利用者が入力欄をクリックしなくても、そのまま文章を入力できるため、入力操作をすぐに始められるフォームを作成できます。
お問い合わせフォーム、管理画面のメモ入力、会員サイトのコメント欄、ECサイトの注文備考欄など、ページを開いたあと最初に文章を入力してほしい場面に適しています。入力対象が明確になるため、利用者がどこへ入力すればよいか迷いにくく、入力開始までの操作も減らせます。
HTMLではタイトル、説明文、ラベル、プレースホルダーを変更でき、autofocus属性を付けたテキストエリアを最初から入力可能な状態にできます。CSSでは横幅、高さ、余白、文字サイズ、背景色、枠線、角丸、フォーカス時の色や影を調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くとすぐに文章を入力できます。
ページを開くとテキストエリアが最初から入力できる状態で表示されます。すぐに文字を入力して動作を確認できます。
コードをコピーして使おう！
<!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="autofocus-textarea_intro">
<!-- ページタイトル -->
<div class="autofocus-textarea_intro-title">
サンプルページ
</div>
<!-- 説明文 -->
<p class="autofocus-textarea_intro-text">
このエリアはページ上部のコンテンツを再現するためのサンプルです。
</p>
<!-- ダミーブロック -->
<div class="autofocus-textarea_guide">
<div class="autofocus-textarea_guide-title">
セクション1
</div>
<p class="autofocus-textarea_guide-text">
サンプルテキスト
</p>
</div>
<!-- ダミーブロック -->
<div class="autofocus-textarea_guide">
<div class="autofocus-textarea_guide-title">
セクション2
</div>
<p class="autofocus-textarea_guide-text">
サンプルテキスト
</p>
</div>
<!-- ダミーブロック -->
<div class="autofocus-textarea_guide">
<div class="autofocus-textarea_guide-title">
セクション3
</div>
<p class="autofocus-textarea_guide-text">
サンプルテキスト
</p>
</div>
</div>
<!-- テキストエリア全体 -->
<div class="autofocus-textarea_wrap">
<!-- タイトル -->
<div class="autofocus-textarea_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="autofocus-textarea_text">
ページを開くと入力欄が最初から入力できる状態になります。
</p>
<!-- 入力項目 -->
<div class="autofocus-textarea_group">
<!-- ラベル -->
<label
class="autofocus-textarea_label"
for="message">
内容
</label>
<!--
autofocus属性を付けると、
ページを開いた時点で入力できる状態になる
-->
<textarea
class="autofocus-textarea_input"
id="message"
name="message"
placeholder="お問い合わせ内容を入力してください。"
autofocus></textarea>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではページ上部の説明エリアとテキストエリアを配置し、autofocus属性によってページを開いた時点で入力できる状態にします。CSSでは説明エリア、案内ブロック、入力フォーム、フォーカス時の見た目を設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはページ全体を構成するファイルです。ページタイトル、説明文、案内ブロック、入力欄のタイトル、ラベル、プレースホルダーを編集できます。テキストエリアへautofocus属性を付けることで、ページを開いた時点で入力できる状態になります。
style.cssはページ全体のデザインを設定するファイルです。説明エリアや入力フォームの横幅、余白、背景色、文字サイズ、枠線、角丸、テキストエリアの高さ、フォーカス時の枠線や影を変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置してください。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開きます。ページを開くとautofocus属性が付いたテキストエリアへ自動的にフォーカスされ、そのまま文章を入力できます。
カスタマイズできる内容
index.htmlではページタイトル、説明文、案内ブロック、入力欄のタイトル、ラベル、プレースホルダーを変更できます。autofocus属性を削除すると、ページを開いた時点では入力欄へフォーカスされない通常のテキストエリアになります。
style.cssでは説明エリアと入力フォームの横幅、余白、文字サイズ、背景色、枠線、角丸、テキストエリアの高さ、入力文字の行間、フォーカス時の強調表示を調整できます。
数値調整
style.css
max-width:700px;
説明エリアと入力フォームの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto 80px;
説明エリアの外側余白です。40pxは上側、80pxは下側の余白です。値を大きくすると周囲との間隔が広がります。
padding:20px;
案内ブロックの内側余白です。値を大きくすると文章と枠線の間隔が広がります。
font-size:32px;
ページタイトルの文字サイズです。値を大きくすると文字が大きくなります。
padding:32px;
入力フォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
min-height:180px;
テキストエリアの初期高さです。値を大きくすると入力欄が高くなり、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxと左右の16pxを変更すると、文字と枠線の間隔が変わります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 0 0 4px ...
フォーカス時に表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて説明エリアと入力フォームが縮小されます。また、640px以下では余白とタイトルサイズを調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント