HTMLタグ・CSS｜HTML辞典｜テキストエリア <textarea>

Home≫HTML辞典≫テキストエリア <textarea>

テキストエリア <textarea>

≪ セレクトメニュー <select>	【 HOME 】	送信、リセット <input type="submit"> ≫

枠内に文章を収めるテキストエリア
タグ	<textarea rows="縦" cols="横">ここに文字</textarea>
結果	ここに文字
見本	<textarea rows="4" cols="30"> 01/01 元旦 01/15 成人の日 02/11 建国記念の日 04/29 みどりの日 05/03 憲法記念日 05/04 国民の休日 05/05 子供の日 05/20 海の日 09/15 敬老の日 10/10 体育の日 11/03 文化の日 11/23 勤労感謝の日 12/23 天皇誕生日 </textarea>
結果	01/01 元旦 01/15 成人の日 02/11 建国記念の日 04/29 みどりの日 05/03 憲法記念日 05/04 国民の休日 05/05 子供の日 05/20 海の日 09/15 敬老の日 10/10 体育の日 11/03 文化の日 11/23 勤労感謝の日 12/23 天皇誕生日
解説	白い部分（テキストエリア）に好きなだけ文字を書くことができます。長い文章を書くと、右のスライドバーで下にずらして見ることが可能です。 rows="縦" cols="横" の「縦」と「横」に数字を入れて長さを指定します。 rows="縦" はプラス１増やすごとに１段増えます。 cols="横" はプラス１増やすごとに半角１文字分伸びていきます。

スタイルシートを使って、色や字の大きさ変える

タグ

<textarea rows="縦" cols="横" style="font-size:13px; background-color:#ffeeee; color:#880000;">ここに文字</textarea>

結果

解説

スタイルシートはhtmlタグとは書き方が全然違います。
style="font-size:19px; background-color:#ffeeee; color:#880000;"
◆ font-size:13px; が、文字の大きさの指定です（参考）
◆ background-color:#ffeeee; が、背景の色の指定です
◆ color:#880000; が、文字の色の指定です。
スタイルシートは大体のhtmlタグに使用できるので便利です。

タグ

<textarea rows="縦" cols="横" style="border-style:solid; border-width:4px; border-color:#ffaaaa; padding:10px;">ここに文字</textarea>

結果

解説

枠線の種類、色、太さなどを変更しました。
style="border-style:solid; border-width:4px; border-color:#ffaaaa;"
◆ border-style:solid; が、枠線の種類の指定です（参考）

　・ none ＝線なし
　・ solid ＝ 1本線
　・ double ＝２本線
　・ dashed ＝点線
　・ dotted ＝点々

　・ groove ＝立体線
　・ ridge ＝立体線
　・ inset ＝立体線
　・ outset ＝立体線

◆ border-width:4px; が、枠線の太さの指定です（参考）
◆ border-color:#ffaaaa; が、枠線の色の指定です（参考）
◆ padding:10px; が、内側の余白の量です（参考）

≪ セレクトメニュー <select>	【 HOME 】	送信、リセット <input type="submit"> ≫

練習用書き込みフォーム（サンプル表示）
<textarea rows="4" cols="30"> 01/01 元旦 01/15 成人の日 02/11 建国記念の日 04/29 みどりの日 05/03 憲法記念日 05/04 国民の休日 05/05 子供の日 05/20 海の日 09/15 敬老の日 10/10 体育の日 11/03 文化の日 11/23 勤労感謝の日 12/23 天皇誕生日 </textarea>

テキストエリア <textarea>｜HTML辞典｜HTMLタグ・CSS

テキストエリア <textarea>