- ベストアンサー
テキストエリア内の文字の装飾
<textarea>で囲んだ文章を、部分的に ・色を変えたり ・太字にしたり ・大きさを変えたり etc... したいのですが、このエリアで囲まれた文章は <br>すら、htmlとして認識されませんよね？ （素直に記述上で改行すれば、反映されますが） テキストエリア内で、htmlのように文字修飾をするには どうすればよいのでしょうか？ ついでに、テキストエリアの背景なのも設定できる ものなのでしょうか？ フレームとして、新たなページを１つ作るのは できるだけ避けたいのです。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
TEXTAREAってのは、あくまでも複数行入力可能な「入力用」の要素ですからね。あまり色々書ける方が不都合なんです。そのままサーバのプログラム（cgiとか）にテキスト・データとして渡したりしますので。 #入力用以外に使うこともできますけど、あまりいい方法ではないです、色んな面で。 入力用ではなくて、表示用に右にスクロールバーのついた領域が欲しいということなら、IE5.5とNetscape6以上でしたらスタイルシートだけで可能です。 <html> <head> <title>TEXTAREAみたいなスタイルシート</title> <style> <!-- div.ScrollBox {overflow:auto;width:300px;height:50px;border:1px black solid;margin:0px} --> </style> <body> <div class="ScrollBox"> <p> ここに、色々文章を書きます。<br> この中は、タグによる<em>マークアップができます</em>のでお好きなように。<br> DIV要素を大きさ固定にして、そこからはみ出すようだったら<strong>スクロールバーがでる</strong>ようにしてるだけなんですけどね。 </p> </div> </body> </html> この方法ですとDIV要素の中も普通のHTMLですので、まぁ何でも書けます。DIV要素のスタイル設定の方に背景を指定すれば当然背景も設定できます。
その他の回答 (4)
- onimotsu
- ベストアンサー率36% (279/758)
javascriptを使って装飾したいんですね。 それでは下記のＵＲＬを参考にしてください。 （ご希望が叶うかは不明です。）
- lmeelm
- ベストアンサー率52% (18/34)
皆さんが言っているのとほとんど同じことを繰り返している感じですけどね。 ヘッダーで指定 <HTML> <HEAD> <TITLE>テキストエリアスタイルシート</TITLE> <STYLE type="text/css"> <!-- TEXTAREA{ font-size:14px; font-family:Arial; font-weight:bold; font-style:italic; text-decoration:underline; color:yellow; background-color:blue; border:5px double aqua; scrollbar-3dlight-color:blue; scrollbar-face-color:deepskyblue; scrollbar-arrow-color:yellow; scrollbar-highlight-color:aqua; scrollbar-shadow-color:aqua; scrollbar-darkshadow-color:blue; scrollbar-track-color:dodgerblue; } --> </STYLE> </HEAD> <BODY> <TEXTAREA rows="5" cols="50"></TEXTAREA> </BODY> </HTML> BODY内で指定 <HTML> <HEAD> <TITLE>テキストエリアスタイルシート</TITLE> </HEAD> <BODY> <TEXTAREA rows="5" cols="50" style="font-size:14px;font-family:Arial;font-weight:bold;font-style:italic;color:yellow;background-color:blue;text-decoration:underline;border:5px double aqua;scrollbar-3dlight-color:blue;scrollbar-face-color:deepskyblue;scrollbar-arrow-color:yellow;scrollbar-highlight-color:aqua;scrollbar-shadow-color:aqua;scrollbar-darkshadow-color:blue;scrollbar-track-color:dodgerblue;'"> </TEXTAREA> </BODY> </HTML>
- onimotsu
- ベストアンサー率36% (279/758)
テキストエリアとはテキストの入力ボックスですよね？ （私が良く分かっていないので確認です。） スタイルシートを使用します。 <INPUT size="20" type="text" name="1" style='font-size : 11px;font-family : "ＭＳ Ｐゴシック";color : aqua;background-color : fuchsia;vertical-align : top;text-align : right;font-weight : bold;'> size="20" 入力ボックスの幅 type="text" テキストエリアを表す name="1" 任意に名前を付けましょう style= スタイルシートのこと font-size : 11px; フォントのサイズ font-family : "ＭＳ Ｐゴシック"; フォントの種類 color : aqua; 文字色 background-color : fuchsia; 背景色 vertical-align : top; 表示位置が上 text-align : right 表示位置が右 font-weight : bold; 文字が太い 下記URLも参考にしてください。
- Pagan
- ベストアンサー率70% (101/143)
部分的な変更の仕方はわかりませんが、<textarea>内全体の変更ならスタイルシートを使えばできます。 <textarea style="background:blue;color:white;font:bolder 20pt"> あいうえお </textarea>
お礼
ありがとうございます そうですねぇ、エリア内一括でなら、何とかなりそう なのですが・・・ 部分的に強調したり、アンダーラインを引いたりetc. だいたい、そうゆうページって見たことないですよねぇ？ 私は、以下のように作っています <FORM name="testform"> <TEXTAREA rows="5" cols="66" name="test" onFocus="javascript:document.testform.test.blur()"> ここに、色々文章を書きます この中は、タグによる装飾ができないようなのです そこを、なんとか可能にしたいのです。 </TEXTAREA> と、言った具合です。 どこかで見付けた、テンプレートの引用なので、不必要なタグも含まれている気がします。 （もし、そのへんもアドバイスいただけると感謝です）