どうしても、テキストエリアの縦のスクロールバーが
出来てしまします。
これを消すタグをご存じの方、教えてくださいませ。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

残念ながらテキストエリアを使った際に出てくる


スクロールバーは消すことができませんです。

参考程度にですが。
私の場合はもっぱらスタイルシートを使って
スクロールバーに色の変化をつけてます。

詳しくは、参考URLに載せたサイトへ。
スタイルシート自体がわからなければ、解説している
サイトがたくさんあるので参考にしてみてください。

参考URL:http://msdn.microsoft.com/workshop/samples/autho …
    • good
    • 0
この回答へのお礼

そうですか、やっぱり、消せないのですね。。。
スタイルシートや、JavaScriptなどを利用してみます。
ありがとうございました。

お礼日時:2002/01/20 21:32

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

このQ&Aと関連する良く見られている質問

Q「HTML(縦スクロールバー付)テキストエリア」内の編集可能状態の文字

「HTML(縦スクロールバー付)テキストエリア」内の編集可能状態の文字列に対して、1文字単位で文字色を変更して初期表示させたいのですが、何か良い方法をご存じの方がいらっしゃいましたら、ヒントだけでも構いませんので、ぜひアドバイスをお願い致します。いつも皆様にはお世話になっております。ありがとうございます。

Aベストアンサー

こんにちは。

別の質問で、divにcontenteditable="true"を指定して、疑似テキストエリアまでは上手く行ったのですよね?
ついでに
style="overflow:auto;height:100px;"
とかって指定すれば、縦スクロールバーは出てきますが?

QIE6で横スクロールバーを消すとIE7では方向キーでのスクロールができなくなります。直し方を教えてください。

ホームページでインラインフレームを使ってるんですが。

IE6だと無意味な所に横スクロールバーがでます。
調べるとoverflow-x: hidden;を追加すれば消えるとあったのでやってみると今度はIE7でキーボードの方向キーでのスクロールができなくなりました。

これはIE7の仕様なのでしょうか?
仕様なら直し方を教えていただきたいのです。

お願いします。

Aベストアンサー

今IEが手元にない環境から見ているので、実際の結果を検証できませんが…推測だけしてみます。

インラインフレームで表示される方のHTMLファイル(http://minatukiryu.blog60.fc2.com/index.php)(以下便宜上(a)ファイルとします)のコードと適用されているCSSを拝見しました。
おそらく、ですが(a)ファイルから参照しているCSS:
http://minatukiryu.blog60.fc2.com/template/a_memo_1/style.css
で、メインのコンテンツを納めるtableに対して設定されている以下のスタイルの
.tb {
(省略)
margin-left : auto;
margin-right : auto;
width : 100%;
(省略)
}
これらの部分がインラインフレーム側((以下便宜上(b)ファイルとします))に横スクロールを出させているのではないかと思います。本来、インラインフレームのwidth属性で820pxという値が決められており、インラインフレーム内のコンテンツ幅がそれより少なければスクロールに関しては初期値の"auto"が適用されますのでこの場合820pxの中での100%という様に解釈されていれば横スクロールは発生しない筈です。IE6以外のモダン・ブラウザではその様にきちんと表示されているのではありませんか?ちなみに今Safariで見ていますが、Safariでは横スクロールは出ていません。
IE6は何かとW3Cの仕様に準拠しない挙動をする問題の多いブラウザですので、本件でも100%や左右マージンの解釈が異なってしまい、インラインフレームの幅よりも内部で表示されるHTMLファイルのコンテンツ幅の方が広い様に勘違いしている為に、本来不要な筈の横スクロールバーが(b)ファイル上で出てしまっているのかもしれません。

(a)ファイルの構成を見る限り、上記の(IE6で不具合を引き起こす原因と仮定している)スタイル部分は削除してしまってもレイアウトにほぼ影響はしないと思われます。一度この部分を削除(あるいは隠す)して、再度IE6での表示を確認されてみてはいかがでしょう。

ちなみに、
> 調べるとoverflow-x: hidden;を追加すれば消えるとあったので

とありますが、そもそもoverflowプロパティというのは「ブロック要素の内容が指定された横幅・高さの領域からはみ出した場合の表示方法を指定」するものですので、"overflow-x: hidden;"が有効になるのは「widthプロパティにより内容領域を指定されたブロック要素が、指定されたサイズよりも内容が大きなサイズをもつ場合」です。
(参考)http://w3g.jp/css/display_position/overflow
今回の場合、(a)ファイルに適用されるCSSの中で
html, body {(省略)overflow-x: hidden;}
としてしまっていますが、これでは「どこがはみ出す対象となるのか」が明確になっておらず定義が意味不明になっています。IE7でキーボード操作によるスクロールに弊害が出てしまっているのは、この妥当でない指定が影響してしまっているのだと思われます。こちらは削除して下さい。

これでだめでしたらこちらの仮定違いということでご容赦下さい。

蛇足ですが、(b)ファイルの方、HTML文書なのにDOCTYPEがなかったり、HTMLとXHTMLの記述が混在してしまっています。CSSやJavaScriptの挙動には、DOCTYPEが関わってくる場合がありますので、この機会に(b)ファイル側のHTMLの文法チェックなどをきちんとしておく事をお奨めしておきます、今後の為に。

今IEが手元にない環境から見ているので、実際の結果を検証できませんが…推測だけしてみます。

インラインフレームで表示される方のHTMLファイル(http://minatukiryu.blog60.fc2.com/index.php)(以下便宜上(a)ファイルとします)のコードと適用されているCSSを拝見しました。
おそらく、ですが(a)ファイルから参照しているCSS:
http://minatukiryu.blog60.fc2.com/template/a_memo_1/style.css
で、メインのコンテンツを納めるtableに対して設定されている以下のスタイルの
.tb {
(省略)
margin-le...続きを読む

Qスクロールするテキストエリア

こんにちわ。
http://www.ikea.jp/design/design.php

上記のページにあるテキストがスクロールする黄色い部分があるのですが、これを作りたいのです。
オンマウスで動くようにしたいです。
上記、PHPですが、HTMLでの方法は無いでしょうか?

よろしくお願いいたします。

Aベストアンサー

アドレスの PHP は表示するまでの事・・・。
その上で表示後の動作はソースを診て確認しないと何で動いているかは判断できません。

とりあえず、ジャバスクリプトでイベント,更新し、
表示はスタイルシートを用いています。
スタイルシートの位置指定の機能と
重複要素の表示に関してか上位要素の範囲に収まらない下位要素の表示の扱いあたりの機能を用いているのではないかと推測できます。

極端な話、そこのスタイルシートとジャバスクリプトの外部ファイルをパクッて、
HTMLでタグ,ID,CLASSと関数呼び出しを適切に行えば・・・。

尚、そこのジャバスクリプトを読み取るには
結構な知識が必要ですのでがんばってくださぃ。
(正直、自分でソースを診ないでここで質問している時点で、
まず難しすぎて無理な機能だと思います。
本当に難しすぎて、こちらも調べるのが面倒すぎて・・・。
いつかはマネようかなぁ~と思う程度に難しいです。)

Q余分な縦スクロールバーが出てしまう

CSSを外部ファイル、本文はXHTML1.0でページを作っています。


#headerと#containerで上下に分かれるデザインです。
#headerはwidth: 100%;で横いっぱいに伸びており、#containerは幅800pxでセンタリング、ドロップシャドウの背景画像がheight: 100%;で下いっぱいに伸びるようにしています。

#headerは上手くいっており問題はないのですが、#containerがどうしてもうまく行きません。
height: 100%;で背景画像は下まで伸びるのですが、本文がどんなに短くても、200px位?縦スクロールバーが必ず出てしまうのです。
本文が長くても、確実にブラウザに収まる程短くても結果は同じです。
(1920*1200のディスプレイで全画面表示しても同じ結果なので、余白が反映されている訳ではないと思います)

余分な縦スクロールバーが出てしまう原因には何がありますか?


確認ブラウザはSafari/3.2.1 Firefox/3.0.7です。
原因がお分かりになる方、ご教授お願い致します。

CSSを外部ファイル、本文はXHTML1.0でページを作っています。


#headerと#containerで上下に分かれるデザインです。
#headerはwidth: 100%;で横いっぱいに伸びており、#containerは幅800pxでセンタリング、ドロップシャドウの背景画像がheight: 100%;で下いっぱいに伸びるようにしています。

#headerは上手くいっており問題はないのですが、#containerがどうしてもうまく行きません。
height: 100%;で背景画像は下まで伸びるのですが、本文がどんなに短くても、200px位?縦スクロールバーが必ず出てしま...続きを読む

Aベストアンサー

ANo.1,4です。補足を拝見しました。

> z-indexは何度か試してみたのですが、思い通りの配置になってくれず、悩んでいました。

条件(環境)によって解釈が違う事があり、ちょっとやっかいな場合もありますね。

> コンテンツがブラウザの表示領域より長い場合、height: 100%;が反映されてないみたいです。
> 元々のブラウザの大きさだけ、背景画像がリピートされています。

失礼しました、コンテンツ量が短い状態のみばかり着目して検証してしまいました。その通りですね…
しかも、前回のサンプルだとIE6ではコンテンツがウィンドウの表示領域より長くなっても何故かスクロールバーが発生しないという重大な不具合がある事にも気付かせて頂きました(汗)

> height: 100%;なのに、どうしてなのでしょう?

"height: 100%;"だから…とも。横に比べて縦方向の調整は色々とやっかいな点があるので。

> (<div id="containerTop">には何も置いてなく、CSSで背景画像を設定しているだけです。

(そうでしたか。内容がない要素を置くのはあまり推奨されないのですが…)

> これはサイトカラー変更時に楽が出来たら、という理由での作成だったのでいくらでも変更可能なのですが、
(省略)
> もうこれは細かな問題ですので、難しい場合はスルーして下さって構いません。

それでしたら、そこはそのまま目をつむっていだけると助かります。このブロックが、幅が800pxで決め打ち・左右センタリングというスタイルである限り、headerの様にcontainerの外に出すのは(今回のトラブルの原因を解消するという目的の場合には)ちょっと障害になってしまう様に思えます。containerの外に出せればheaderと同様に"position: absolute;"による調整で何とかなりそうなんですが…

ということで、その構成のまま、不具合を修正(一部難あり、後述)してみました。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="css/Import3.css" media="screen" />
<title>サンプル ver.2</title>
</head>

<body class="top">
<div id="header">
ヘッダー
</div>
<div id="container">
<div id="containerTop"><!-- ただの画像です --></div>
<div id="mainContainer">
コンテンツ先頭部分
~スクロールが発生する様な長いコンテンツ~
コンテンツ最後部分
</div>
</div>
</body>
</html>
----------------------------------------------------------------------
【CSS】「※」は前回からの変更箇所
----------------------------------------------------------------------
@charset "Shift_JIS";
(省略)
#header {
position: absolute;
_position: relative;※IE6対策。"position: absolute;"のままだとスクロールができなくなるので。
top: 0;
left: 0;
width: 100%;
height: 35px;
z-index: 1;
background: #9c9;
}
#container {
position: relative;
width: 800px;
height: 100%;
min-height: 100%;※これを指定する事でコンテンツ量に対する背景の不具合を解消。
margin: 0 auto;
background: url(../img/container/back.png) repeat-y;
z-index: 0;
}
body > #container {※この指定を丸ごと追加することで、コンテンツの量に対する背景の不具合を解消。
height: auto;
margin-bottom: -15px;
}
#containerTop {
position: absolute;
top: 35px;
_top: 0;※IE6対策。親要素で"position: relative;"の方が適用されている為。
left: 0;
width: 800px;
height: 15px;
margin: 0 auto;
background: url(../img/container/back_top.png) no-repeat #fcc;
z-index: 2;※このコンテナも重なる様に変更したので、重ね合わせの順番を指定。
}
#mainContainer {
position: relative;
width: 750px;
margin: 0 auto;
padding: 70px 0px 0px;※各コンテナの表示位置指定・重ね合わせを変更した頃により、上からの高さ(空き)をpadding-topに含めて調整。
_padding-top: 35px;※IE6対策。親要素で"position: relative;"の方が適用されている為、計算する値が異なる。
z-index: 1;※このコンテナも重なる様に変更したので、重ね合わせの順番を指定。
background: #ccf;
}
----------------------------------------------------------------------
これでとりあえず、Fierfox2/3、Safari3、IE7等では・コンテンツのボリュームに左右されず、背景が画面下まで伸び、且つ余分な縦スクロールも発生しない、という状態になる様なのですが、IE6は残念ながら"position: relative;"を使用している為にheaderの高さ分が加算されてしまい、常に余分な縦スクロールが出てしまいます。難あり、というのはこの為です。
更なる打開策を思いつけたらまたチャレンジさせて頂くかもしれませんが。

ANo.1,4です。補足を拝見しました。

> z-indexは何度か試してみたのですが、思い通りの配置になってくれず、悩んでいました。

条件(環境)によって解釈が違う事があり、ちょっとやっかいな場合もありますね。

> コンテンツがブラウザの表示領域より長い場合、height: 100%;が反映されてないみたいです。
> 元々のブラウザの大きさだけ、背景画像がリピートされています。

失礼しました、コンテンツ量が短い状態のみばかり着目して検証してしまいました。その通りですね…
しかも、前回のサンプルだ...続きを読む

Qセレクトタグのスクロールバーの色

下記のセレクトタグのスクロールバーの色を変える方法を教えてもらえませんか?
ネットで探してみたのですが、見つけることが出来ませんでした。

<SELECT size="3" style="font-size:10pt; color:#9999ff; background-color:#fff0f5" tabindex="1">
<OPTION>*MENU* </OPTION>
<OPTION>おはよう </OPTION>
<OPTION>こんにちは   </OPTION>
<OPTION>こんばんは </OPTION>
</SELECT>

Aベストアンサー

セレクトメニューのスクロールバーの色を変えることはできないと思います。


人気Q&Aランキング

おすすめ情報