Webページを作成するうえで便利なのがお問い合わせフォーム。その中でも、読者が自由にテキストを入力できるテキストエリアはとても便利ですよね！意見や、質問、要望などを自由に記載できるテキストエリア。
テキストエリアの設置方法とは？
今回は、textareaタグの
・基本的な使い方
・textareaタグの装飾方法
について説明します。さらにテキストエリアの範囲を広げたり、使いやすくしたり、CSSでの装飾方法をサンプルコード付きで解説します。
目次
textareaタグとは
textareaタグの読み方
textareaタグは「テキストエリアタグ」と読みます。
textareaタグの説明
texareaタグは複数行の入力欄を生成するタグで、Webサイトのフォームの部品の一種として利用されます。
textareaタグで利用できる属性
textareaタグではグローバル属性に加えて、以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| autocomplete | 要素に入力される内容をブラウザ側で自動補完するのを許可するかどうかを指定する属性です。 |
| autofocus | ブラウザが読み込みをしたときに、要素に自動でフォーカスをあてるかどうかを決める事ができる属性です。 |
| cols | テキストエリアの桁数 (水平方向の文字数) を指定する属性です。 |
| disabled | ユーザーによる操作を無効にするかどうかを指定する属性です。 |
| form | input要素が所属するform要素を指定する属性です。 |
| maxlength | 要素の最大文字数を指定する属性です。 |
| minlength | 要素の最小文字数を指定する属性です。 |
| name | 要素の名前を定義する属性です。 |
| placeholder | フォームの入力例や入力内容の説明を指定する属性です。 |
| readonly | 入力できる要素を読み取り専用にしてユーザーが入力できないようにする属性です。 |
| required | 入力が必須の要素かどうかを定義する属性です。 |
| rows | テキストエリアの行数 (垂直方向の文字数) を指定する属性です。 |
| spellcheck | 要素のスペルチェックを有効にするかどうかを指定する属性です。 |
| wrap | テキストの折り返しを指定する属性です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
textareaタグの基本的な使い方
textareaタグの使い方
textareaタグはフォーム内、つまりformタグの間で使用される要素です。そのため<form></form>の間に<textarea>を入れています。
textarea内に何を記入させるかの指示は、<textarea></textarea>の間に記載することができます。デフォルトでは記入欄が狭いので、rowsで高さを、colsで幅を広く設定しています。
高さと幅の設定は要素でサポートされていますので、別途CSSで装飾する必要はありません。
See the Pen
textarea基本 by rabbittyu (@rabbittyu)
on CodePen.
textareaタグの装飾方法
textareaタグ内でplaceholder属性を使用する
ここではtextareaタグ内で使用できる、placeholder属性を使用しました。見た目は基本編で紹介したテキストエリアと似ていますが、入力内容の指示はplaceholderで行う方が適しています。
実際に何か文字を入力してみてください。入力すると背景の文字が消えていく、最もよく見かけるテキストエリアが作成できましたね。
See the Pen
textarea装飾① by rabbittyu (@rabbittyu)
on CodePen.
デフォルトの見た目を変更する
テキストエリアのデフォルト時の設定を変更しました。枠線を太くし、角丸になるよう設定しています。さらに、テキストの大きさも見やすくなるように、少し大きくしました。
See the Pen
textarea装飾③ by rabbittyu (@rabbittyu)
on CodePen.
フォーカス時の見た目を変更する
textearea:focusでfocus時の見た目を変更しています。border: solidで枠線の設定を、outline: noneでデフォルトの設定を消去しています。さらにborder-radiusで枠線を角丸に表示するように設定しました。
こうすればフォーカスされていることが、ユーザーに伝わりやすくなりますね！
See the Pen
textarea装飾② by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はtextareaタグの使い方を解説しました。textareaタグはユーザーの意見や要望を直に取り入れられる、便利なフォームの部品です。
- textareaタグはフォームでの文字入力を情報するときの部品
- textareaタグの幅の設定はcols属性を、高さはrows属性で変更できる
- textarea内への指示はplaceholder属性で行う
以上3点さえ抑えておけば、textareaタグの使い方はマスターしたも同然！さらに使い心地をよくするのであれば、文字サイズやフォーカス時の見た目を変更するのが良いでしょう。
参考文献：
MDN web docs <textarea>
HTMLクイックリファレンス
CODE KITCHEN
