• ベストアンサー

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

<textarea>で囲んだ文章を、部分的に ・色を変えたり ・太字にしたり ・大きさを変えたり etc... したいのですが、このエリアで囲まれた文章は <br>すら、htmlとして認識されませんよね? (素直に記述上で改行すれば、反映されますが) テキストエリア内で、htmlのように文字修飾をするには どうすればよいのでしょうか? ついでに、テキストエリアの背景なのも設定できる ものなのでしょうか? フレームとして、新たなページを1つ作るのは できるだけ避けたいのです。

  • HTML
  • 回答数5
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • Adams2001
  • ベストアンサー率67% (70/103)
回答No.3

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)
回答No.5

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

参考URL:
http://www.openspc2.org/reibun/javascript/
  • lmeelm
  • ベストアンサー率52% (18/34)
回答No.4

皆さんが言っているのとほとんど同じことを繰り返している感じですけどね。 ヘッダーで指定 <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)
回答No.2

テキストエリアとはテキストの入力ボックスですよね? (私が良く分かっていないので確認です。) スタイルシートを使用します。 <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も参考にしてください。

参考URL:
http://tohoho.wakusei.ne.jp/wwwcss.htm
bongo8
質問者

お礼

ありがとうございます そうですねぇ、エリア内一括でなら、何とかなりそう なのですが・・・ 部分的に強調したり、アンダーラインを引いたりetc. だいたい、そうゆうページって見たことないですよねぇ? 私は、以下のように作っています <FORM name="testform"> <TEXTAREA rows="5" cols="66" name="test" onFocus="javascript:document.testform.test.blur()"> ここに、色々文章を書きます この中は、タグによる装飾ができないようなのです そこを、なんとか可能にしたいのです。 </TEXTAREA> と、言った具合です。 どこかで見付けた、テンプレートの引用なので、不必要なタグも含まれている気がします。 (もし、そのへんもアドバイスいただけると感謝です)

  • Pagan
  • ベストアンサー率70% (101/143)
回答No.1

部分的な変更の仕方はわかりませんが、<textarea>内全体の変更ならスタイルシートを使えばできます。 <textarea style="background:blue;color:white;font:bolder 20pt"> あいうえお </textarea>

参考URL:
http://www03.u-page.so-net.ne.jp/sc4/ken_yuu/css/css3.html

関連するQ&A

  • テキストエリア内の改行

    <textarea cols=  rows= ></textarea> を使ってテキストエリアを作っています。 テキストエリア内に予めコメントを 入れておきたいのですが、そのコメントを 改行したい場合はどうすればいいのでしょうか? <BR>のタグが使えないので困っています。 どなたか教えてください、お願い致します。

  • テキストエリアの幅を10桁までにしてスクロールさせないようにしたい

    タイトルのままなんですが、可能でしょうか? <textarea name="textarea" cols="40" rows="10">テスト</textarea> あと、テキストエリアに<pre>タグをつけると改行が入ってしまい、 1行分テキストエリアから離れてしまいます・・・。 テストタイトル<br> <pre><textarea name="textarea" cols="40" rows="10">テスト</textarea></pre> すみません、どなたかわかる方いらっしゃいますか? 教えてください(^^

    • ベストアンサー
    • HTML
  • Javascriptで複数のテキストエリアの文字列を連結させたいです

    Javascriptで複数のテキストエリアの文字列を連結させたいです。 初めまして、 お世話になります。 ------------------------------------------------- <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="form1" method="post" action=""> いつ<br> <textarea name="when"></textarea> <br> <br> どこで<br> <textarea name="where"></textarea> <br> <br> だれが<br> <textarea name="who"></textarea> <br> <br> どうした<br> <textarea name="what"></textarea> <br> <input type="submit" name="submit" value="連結"> <input type="reset" name="submit" value="リセット"> <br> <br> いつどこでだれががどうした。<br> <textarea name="textfield"></textarea> </form> </body> </html> ------------------------------------------------- というHTMLがあったとして ボタンを押したら文字列を連結させたいのです。 その際、入力したテキストフィールドで文字列が改行をされてあった場合 それをそのまま反映して表示させたいのです。 ぜひよろしくお願いします。

  • テキストエリアの表示文字

    result の中身を以下のようにして、テキストエリアで表示させようと思いました。 結果は、表示はされるのですが、データとデータの間に数行の改行が入って表示されてしまいます。 <c:forEach item="${result}"> <textarea><c:out value="${result}"></textarea> </c:forEach> <textarea>、<c:out value="${result}">、</textarea>の位置を変えたりしてみたのですが、結果は同じでした。 同じ方法で、セレクトボックスには改行なく期待通りに表示されたので、テキストエリアでもできると思ったのですが・・・ アドバイスよろしくお願いします。

    • ベストアンサー
    • HTML
  • テキストエリアで改行する

    テキストエリア1の文章をテキストエリア2に追加 するときなどに、コード(テキストエリアにキーボードで 改行するのではなくて)で2,3行改行したいの ですが、どうすればよいでしょうか? setText()で文章を書くときの改行の仕方でもいいです。 教えてください!

    • ベストアンサー
    • Java
  • テキストエリア内の改行禁止

    テキストエリア内での改行を禁止するタグを教えてください。 wrap="off" は試したのですが、うまくいきません。 <TEXTAREA rows="1" cols="20" name="list1" class="min2"></TEXTAREA> どうか、よろしくお願いします。 表示上も、出来れば改行しないようにしたいのですが、 出来なければ、結果のみ改行しない形でも構いません。 どうか、よろしくお願いします!

    • ベストアンサー
    • HTML
  • Firefoxでのテキストエリアに入力した文字の改行

    Firefoxでのテキストエリアに入力した文字の改行について質問させてください。 http://oshiete1.goo.ne.jp/qa2691799.html ↑のページを参考にテキストエリアに入力したテキストがリアルタイムで確認できるページを作成しました。 IEではテキストエリア内の改行がちゃんと反映されたのですが、Firefoxではテキストエリア内の改行が反映されずに、エンターキーを押すと半角スペース?になるだけで一連の文として出力されてしまいます。 どなたかこの現象の解決策をお知りの方がいらっしゃいましたらご教授ください。 よろしくお願いします。

  • テキストエリア内の改行もそのままクリップボードへ

    テキストエリアをクリック→テキストエリア内の内容がコピーされる。 というページを作成しています。 <textarea cols="65" rows="6" onclick="this.select();clipboardData.setData('text',this.value);"> ○○○ ●●● △△△ 111111 222222 </textarea> この内容だと、テキストエリア内の改行が反映されず、コピーされたものを他の場所に貼り付けると、すべて横に繋がった1行の文になってしまいます。 これを、目に見えているまま、改行も含めてそのままコピーさせるには、どうすればいいですか? ちなみに、必要な情報な情報かどうかわかりませんが、同様のテキストエリアが同一ページ内に複数あります。 テキストエリアをクリックでコピーではなく、コピーボタンを押下でコピーでも構いませんが、コピーされるとテキストエリアの色が反転(?)するという動作がほしいと思っています。 説明が下手ですみません…よろしくお願いします。

  • テキストエリアの配置

    お世話になっています。 dreamweaverでサイトを作成しています。 更新情報などによくある スクロールさせることのできるテキストエリアを作成したいのですが、 今 <body> 更新情報<br> <form name="form1" method="post" action=""> <textarea name="textarea"></textarea> </form> という状態なのですが、 ブラウザで確認すると更新情報とテキストエリアの間がかなり空いてしまいます。 dreamweaver上ではぴったりくっついているのですが・・ これはなんとかなりますでしょうか?

  • オンマウスでテキストエリアにテキスト表示

    現在、「猫」という文字にカーソルを合わせると text1のテキストエリアに 「ニャンと鳴く」と表示されるスクリプトを作成しました。 記述の一部ですが下に示します。 <form name="form1"> <TEXTAREA name="text1" rows="5" cols="40"></TEXTAREA> </form> <span onmouseover="txt_dsp('text1','ニャンと鳴く');"onmouseout="txt_dsp('text1', '');">猫</span><br> 教えていただきたいのは'ニャンと鳴く'という部分を msg.txtというテキストファイルに書かれた'ニャンと鳴く' で表示したいのですが、どのような記述にしたらよろしいでしょうか? よろしくお願い致します。

専門家に質問してみよう