概要 #
テキストエリアは、ユーザーからの自由入力を受け付けるための入力フィールドです。
お問い合わせフォームやアンケートなど、長文入力が必要なシーンで活用されます。
プレースホルダーの設定やデザインの変更、サイズ調整、カラー指定なども可能で、目的やページのトーンに合わせたカスタマイズが柔軟に行えます。
また、文字数制限やフォームカラーとの連動も設定できるため、UIの統一感を保ちつつ、ユーザーにとってわかりやすい入力欄を設計できます。
テキストエリアの設定項目説明 #
テキストエリアは、複数行の文章を入力させたいときに使用するフォームコンポーネントです。設定できる主な項目は以下の通りです。
- ① デザイン：
表示スタイル（枠線のデザインやフォントなど）を選択できます。
「デザインを選択する」ボタンをクリックすると、スタイル選択画面が表示されます。 - ② カラー選択：
枠線やフォーカス時の色を自由に変更できます。カラーコードで直接指定することも可能です。
「フォームカラーを使用」スイッチをONにすると、フォーム全体で設定した共通カラーが自動で適用されます。 - ③ サイズ：
テキストエリアの幅を%指定で調整できます。
デフォルトは100%（親要素いっぱい）ですが、必要に応じて80%や60%などに変更することでバランスを取れます。
入力欄には最大文字数（5000文字）が設定されており、残り文字数は右下に表示されます。
テキスト入力欄と同様に、ページの目的に応じたスタイルを選ぶことで、よりわかりやすく操作しやすいフォームが作成できます。
テキストエリアスタイル選択画面の説明 #
左側のカテゴリ選択と、中央のスタイル一覧から構成されています。
- カテゴリ（左カラム）
現在は「テキストエリア」のスタイルのみが対象ですが、今後オブジェクトごとのスタイル選択にも拡張される可能性があります。 - スタイル一覧（中央）
デフォルト、ベーシック、フローティング、アイコン付き、アンダーライン付きなど様々なスタイルが用意されています。
サムネイルをクリックすることで、該当スタイルを即時適用できます。 - スタイルの特徴
– デフォルト：標準的なプレースホルダー付きテキストエリア
– フローティング：入力時にラベルが浮き上がるアニメーション効果付き
– アンダーライン：シンプルでスリムな印象にしたいときに最適
– スタイリッシュ：装飾が強めで印象に残る見た目
「閉じる」ボタンでこの画面を終了し、元の編集画面に戻ります。