リンクタグも使えるテキストエリア

[新着] Webテンプレートを仮オープンしました

0   名前： men ： 2006/05/01（月） 00:43  ID:xGOZuLYH
はじめまして。
以前とあるサイトで、リンクタグ（＜a href=""＞＜/a＞）も
使えて改行は普通のテキストエリアのときと同じように
エンターキーのみで行えるというテキストエリア
を教えてもらいました。

しかし、そのソースを失ってしまって
そのサイトもわからなくなってしまいました。
どなたか、こんなテキストエリアのソース
持っていらっしゃいませんか？


追記
私の記憶では、大して長くないスタイルシートのタグが
ヘッダ内に一つと、＜div＞を使ったタグで
テキストをくくってテキストエリア化していたと
思うのですが・・・。おそらくJavaScriptや
通常のtextareaは使用していません。

ネットで検索しまくりましたが
どれもリンクはできても、改行も＜br＞で
しなければならなかったりなどのやつばかりで
見つけることができませんでした。
1   名前： 匿 ： 2006/05/01（月） 00:43  ID:UVv0eLq/
ソースは持ってないけどたぶんこんな感じでは？
<div style="white-space:pre;">
<a href="http://hoge.hoge/">hogehoge</a>
あいうえお
かきくけこ
</div>



「リンクタグ」ではなく「Aタグ」
「スタイルシートのタグ」はないです”style=”は属性です。
「＜div＞を使ったタグ」でなく「divタグ」
2   名前： Pid@Pidgin ： 2006/05/01（月） 00:43
>>0
スクロールバーは CSS でいくらでも出せますので，どんなタグか（つまり HTML）とは全く無関係です。両者の役割をきちんと覚えましょう。

<p style="overflow: auto; width: 20em; height: 5em; white-space: pre; ">
<a href="http://hoge.hoge/">あいうえお</a>
かきくけこ
</p>


>>1
細かいことを言えば，a タグではなく「a 要素」，div タグではなく「div 要素」です。各要素の範囲を示すものが「開始タグ」と「終了タグ」です。
3   名前： Pid ◆OAqVtOBqEm ： 2006/05/01（月） 00:43
トリップミスった...orz。
4   名前： 匿名 ： 2006/05/01（月） 00:43  ID:xGOZuLYH
どうも返信ありがとうございます。
いろいろ意味を教えていただいて感謝しています。

<div style="white-space:pre;">
<a href="http://hoge.hoge/">hogehoge</a>
あいうえお
かきくけこ
</div>

を試してみたところ、
hogehoge あいうえおかきくけこ、と
一列に表示されてしまったのですが
テキストエリアのときのように改行は
できないのでしょうか？
5   名前： men ： 2006/05/01（月） 00:43  ID:xGOZuLYH
名前を入れるのを忘れてしまいました。
上の記事はスレ主のmenです。
6   名前： Pid ◆OAqVtOBqEm ： 2006/05/01（月） 00:43
> 一列に表示されてしまった

打ち間違いか，何かの影響でしょう。

なお，div 要素直下には，原則としてブロック要素しか置けません（a 要素やテキストを直接置くことはできません）。
7   名前： men ： 2006/05/01（月） 00:43  ID:xGOZuLYH
すみません、上手く言えないのですが
そのa 要素やテキストをテキストエリアタグのときのように表示したいのです。
このとき、a 要素はちゃんとリンクされます。
8   名前： men ： 2006/05/01（月） 00:43  ID:xGOZuLYH
想像図はこんな感じです。
http://up.kabubu.net/cgi/img2/5817.jpg
このとき＜br＞による改行はしなくても
テキストエリアのときと同じようにできます。
9   名前： Pid ◆OAqVtOBqEm ： 2006/05/01（月） 00:43
ですから，私の環境では >>1 も >>2 でも men さんのお望みの形になりますので，何にお困りなのかイマイチ分からないのですが。

white-space: pre は，改行をそのまま反映させる指定です。スクロールバーを常に出したいならば overflow: scroll（あるいは CSS3 を先取りして overflow-y: scroll）です。

うまくいかないのであれば，お書きになった記述を「そのまま」ここに書いて下さい。
10   名前： men ： 2006/05/01（月） 00:43  ID:xGOZuLYH
毎回お手数かけてすみません。
下の画像のようにやってみましたが
改行は反映されておらず、スクロールバーも表示されません。
http://up.kabubu.net/cgi/img2/5825.jpg

ソースです。
<html>
<head>
<title>test</title>
</head>
<body>

<div style="white-space: pre;overflow: scroll;">
<a href="http://hoge.hoge/">hogehoge</a>
あいうえお
かきくけこ
</div>

</body>
</html>


どうもありがとうございます。
11   名前： Pid ◆OAqVtOBqEm ： 2006/05/01（月） 00:43
ああ，了解しました（スクリーンショット感謝です）。

スクロールバーが出ないことに関しては，幅と高さを明示して下さい（>>2 を参照）。ついでに border を引けば現ボックスの大きさが分かります。

改行されないことに関してですが，WinIE6 は標準モードでないと white-space: pre を解釈しません。標準モードにするには，文書型宣言を正確に書いて下さい（そもそも HTML には文書型宣言が必須なので，書いてないのはおかしいのですが (^^;)）。

あるいは，いっそ pre 要素を使った方が早いかもしれません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<title>???</title>
<style type="text/css">

pre.example {
  border: 1px solid #888;
  width: 10em;
  height: 4em;
  overflow: scroll;
  /* overflow-y: scroll; */
}

</style>

<pre class="example">
あいうえお
かきくけこ
<a href="sample">さしすせそ</a>
たちつてと
なにぬねの
</pre>

12   名前： 通りすがり ： 2006/05/01（月） 00:43  ID:78wX.Uap
IEだから、かな。（NNでは改行されました）
DOCTYPEの標準モード宣言で解決できる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html/40/loose.dtd">
<html lang="ja">
<head>
<title>test</title>
</head>
<body>
<div style="white-space:pre;overflow: scroll;">
<a href="http://hoge.hoge/">hogehoge</a>
あいうえお
かきくけこ
</div>
</body></html>
13   名前： men ： 2006/05/01（月） 00:43  ID:xGOZuLYH
Pidさん、通りすがりさん、本当にありがとうございます。
やっと、できました!!

文書型宣言がこんなに大切なものだなんて思ってませんでした。
ホームページビルダーで作ったときとかに追加される著作権とか
何とかのいらないものだと思ってました。
やっぱり、ちゃんと勉強しないと駄目ですね。今まで自分で独学で
いろいろなサイトのソース見てはコピペをしてトライアルアンドエラーで
やってきましたが、ちゃんとした意味を理解していませんでした。もっと勉強します。

ウェブページ作り頑張ります。

ソース１
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
	"http://www.w3.org/TR/REC-html/40/loose.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>

<div style="white-space: pre;overflow: scroll;width: 500px;height: 100px;">
あいうえお
かきくけこ
<a href="sample">さしすせそ</a>
たちつてと
なにぬねの
</div>

</body>
</html>


ソース２
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<title>タイトル</title>

<style type="text/css">
pre.example {  
  border: 1px solid #888;
  width: 10em;
  height: 4em;
  overflow: scroll;
  /* overflow-y: scroll; */
}
</style>

<pre class="example">
あいうえお
かきくけこ
<a href="sample">さしすせそ</a>
たちつてと
なにぬねの
</pre>


追記
この掲示板の入力フォームで「▼テンプレート読み込み」などのリストがありますが
マウススクロールで選択していたら、うっかり「[全消去]」までスクロールしてしまい
今、書いてたものがすべて消えてしまいました。でも元に戻すで戻ったのでラッキーでした…。
14   名前： えじ ◆HtEaXt.II9 ： 2006/05/01（月） 00:43  ID:WP1ytrfY
>>13
>マウススクロールで選択していたら、うっかり「[全消去]」までスクロールしてしまい
>今、書いてたものがすべて消えてしまいました。でも元に戻すで戻ったのでラッキ
ーでした…。

やっぱりそういう時ってありますよね…　心配していた部分でした。
［全消去］を取りやめるか、別ボタンとして用意するか、少し検討してみます。
15   名前： えじ ◆HtEaXt.II9 ： 2006/05/01（月） 00:43  ID:WP1ytrfY
［全消去］が選択された際に、確認ダイアログを表示させるようにしました。
どうもでした。
一覧へ戻る