テキストエリア内の文字の装飾

解決済

質問者：bongo8
質問日時：2002/06/28 14:29
回答数：5件

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Adams2001
回答日時：2002/06/28 22:22

TEXTAREAってのは、あくまでも複数行入力可能な「入力用」の要素ですからね。

あまり色々書ける方が不都合なんです。そのままサーバのプログラム（cgiとか）にテキスト・データとして渡したりしますので。

#入力用以外に使うこともできますけど、あまりいい方法ではないです、色んな面で。

入力用ではなくて、表示用に右にスクロールバーのついた領域が欲しいということなら、IE5.5とNetscape6以上でしたらスタイルシートだけで可能です。

<html>
<head>
<title>TEXTAREAみたいなスタイルシート</title>
<style>

</style>
<body>
<div class="ScrollBox">
<p>
ここに、色々文章を書きます。<br>
この中は、タグによる<em>マークアップができます</em>のでお好きなように。<br>
DIV要素を大きさ固定にして、そこからはみ出すようだったら<strong>スクロールバーがでる</strong>ようにしてるだけなんですけどね。
</p>
</div>
</body>
</html>

この方法ですとDIV要素の中も普通のHTMLですので、まぁ何でも書けます。DIV要素のスタイル設定の方に背景を指定すれば当然背景も設定できます。

- 0
- 件

通報する

No.5

回答者： onimotsu
回答日時：2002/06/29 17:42

javascriptを使って装飾したいんですね。

それでは下記のＵＲＬを参考にしてください。
（ご希望が叶うかは不明です。）

参考URL：http://www.openspc2.org/reibun/javascript/

- 0
- 件

通報する

No.4

回答者： lmeelm
回答日時：2002/06/29 05:10

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

ヘッダーで指定

<HTML>
<HEAD>
<TITLE>テキストエリアスタイルシート</TITLE>
<STYLE type="text/css">

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

- 0
- 件

通報する

No.2

回答者： onimotsu
回答日時：2002/06/28 19:09

テキストエリアとはテキストの入力ボックスですよね？

（私が良く分かっていないので確認です。）

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

<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も参考にしてください。

参考URL：http://tohoho.wakusei.ne.jp/wwwcss.htm

- 0
- 件

通報する

この回答へのお礼

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

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

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

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