質問

<textarea>で囲んだ文章を、部分的に
・色を変えたり
・太字にしたり
・大きさを変えたり
etc...
したいのですが、このエリアで囲まれた文章は
<br>すら、htmlとして認識されませんよね?
(素直に記述上で改行すれば、反映されますが)

テキストエリア内で、htmlのように文字修飾をするには
どうすればよいのでしょうか?
ついでに、テキストエリアの背景なのも設定できる
ものなのでしょうか?

フレームとして、新たなページを1つ作るのは
できるだけ避けたいのです。

通報する

回答 (5件)

javascriptを使って装飾したいんですね。
それでは下記のURLを参考にしてください。
(ご希望が叶うかは不明です。)

皆さんが言っているのとほとんど同じことを繰り返している感じですけどね。


ヘッダーで指定

<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>

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要素のスタイル設定の方に背景を指定すれば当然背景も設定できます。

テキストエリアとはテキストの入力ボックスですよね?
(私が良く分かっていないので確認です。)

スタイルシートを使用します。

<INPUT size="20" type="text" name="1" style='font-size : 11px;font-family : "MS Pゴシック";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 : "MS Pゴシック"; フォントの種類
color : aqua; 文字色
background-color : fuchsia; 背景色
vertical-align : top; 表示位置が上
text-align : right 表示位置が右
font-weight : bold; 文字が太い

下記URLも参考にしてください。

この回答へのお礼

ありがとうございます
そうですねぇ、エリア内一括でなら、何とかなりそう
なのですが・・・
部分的に強調したり、アンダーラインを引いたりetc.
だいたい、そうゆうページって見たことないですよねぇ?

私は、以下のように作っています

<FORM name="testform">
<TEXTAREA rows="5" cols="66" name="test" onFocus="javascript:document.testform.test.blur()">
ここに、色々文章を書きます
この中は、タグによる装飾ができないようなのです
そこを、なんとか可能にしたいのです。
</TEXTAREA>

と、言った具合です。
どこかで見付けた、テンプレートの引用なので、不必要なタグも含まれている気がします。
(もし、そのへんもアドバイスいただけると感謝です)

部分的な変更の仕方はわかりませんが、<textarea>内全体の変更ならスタイルシートを使えばできます。

<textarea style="background:blue;color:white;font:bolder 20pt">
あいうえお
</textarea>

このQ&Aは役に立ちましたか?1 件

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

新しく質問する

注目の記事

フリーアナウンサー長谷川豊氏の新コーナー「このニュースどう思います?」がスタート!

元フジテレビのフリーアナウンサー長谷川豊氏から気になるニュースについておしトピの皆さんに質問します! 皆さんの意見をもとに長谷川豊氏がコラムを執筆します! アプリリリース記念として最大1万分のアマゾンギフト券プレゼントキャンペーンも実施中!

このQ&Aを見た人が検索しているワード


新しく質問する

このカテゴリの人気Q&Aランキング

毎日見よう!教えて!gooトゥディ