掲示板/HTML質問板/過去ログ/一覧/ 透過のスクロールバー：背景を固定せずにする方法

0 名前： saco ： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: ttp://tuku.spawn.jp/さんの
ttp://tuku.spawn.jp/collect/html/scllor4.htmの「スクロールバーの透過」をしたいのですが
この方法は背景を固定した場合の透過の仕方なんです。
私は"スクロールすると背景も一緒にスクロールしていく"↓
<STYLE type="text/css">

</STYLE>
スクロールバーの透過がしたいんです。
タグをどう変えれば背景も一緒に動くのでしょうか？

1 名前：元帥： 2007/03/13（火） 01:39 ［URL］ ID:sQmT3Bk7 sub-bK: 余計な設定をしなければ、背景画像はスクロールされますよ。
http://www.tagindex.com/stylesheet/page/index.html

その方法は背景を固定した場合の透過の仕方ではなくて、他の記述との絡み合いでたまたまそうなってしまったのでしょう。
該当のURLを提示すれば、誰かが検証してくれるかもしれません。

tuku.spawn.jp/collect/html/scllor4.htmを拝見しましたが、スクロールバーは透過されていませんでした。
参考
http://q.hatena.ne.jp/1096819177
http://hp100.quizfan.com/200509131.html
http://css.uka-p.com/attention_browser.shtml

2 名前：匿名： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: 解答ありがとうございます。

＞該当のURLを提示すれば、誰かが検証してくれるかもしれません。

URLではないのですが↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML><HEAD> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <style type="text/css">      </style> <TITLE></TITLE> </HEAD> <BODY> <div class="scroll"> テスト </DIV> </BODY></HTML>

それと、このスクロールバーにしてしまうとマウスの真ん中にあるページをスクロールするクリクリ（古いマウスには付いてないです）が、使えなくなるのですが･･･その改善法はありますでしょうか？

3 名前：元帥： 2007/03/13（火） 01:39 ［URL］ ID:UIR/ZJ6T sub-bK: >>2
なるほど、合点がいきました。
ついでに文法チェックをお勧めします。
http://jigsaw.w3.org/css-validator/

背景画像がスクロールしないのではなく、単にさせていないからです。
背景画像はbody要素に指定されているので、div要素をスクロールさせても動かないのは当然です。

scrollクラスにも同じ背景画像をしてやれば良いです。
ついでにマウスのスクロールも動くようになりました（＾＾；

4 名前： saco ： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: ありがとうございます！

ええと･･なんとなく理解はしたのですが、どこをどう変えればいいのかワカラナイです･･＾＾；
すみません、ソースを見せていただけませんか?

5 名前：あや： 2007/03/13（火） 01:39 ID:TRVH9wjM sub-ND: > scrollクラスにも同じ背景画像をしてやれば良いです。

　>>3でこのようなアドバイスが出てなんとなく理解はしたのですがとあるなら怖がらずに試してみませんか？　
　もし違ったところに入れたとしても多少表示が意図したとおりにならないだけですから。

　色々試してみてどうしてもできなかった時には、その失敗したソースをもう一度ここで見せればまた誰かのアドバイスが付くと思いますよ。

安易に他人のソースを参照することに慣れると次の改装の時に困りませんか？　そもそもスクロールバーの色の変更はＩＥ独自の仕様ですし…

6 名前： saco ： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: なんとなく理解したというのは"雰囲気"というか･･
自分でも色々とソースを変えてはみたのですが、基礎がなっていないせいか何も変わらなく大胆にも「ソースを見せてください」と言ってしまいました。
もう少しいい書き方があったかと思います、ご忠告ありがとうございました。

自分が実行してみたことを書かせていただきます。

＞scrollクラスにも同じ背景画像をしてやれば良いです。
<div class="scroll">に背景画像のタグ<div class="scroll" background="画像">を入れてみたのですが、何もならず。
「マウススクロールも直った」と書かれていたので何かのタグを削除したのかな･･とは思ったのですが、その思いつきだけを実行しても元の問題が解決しないままなのでややこしくなるのでは？と思い断念しました。

＞背景画像はbody要素に指定されているので、div要素をスクロールさせても動かないのは当然です。
body要素に指定している背景はそのままで大丈夫ということでしょうか

7 名前： とおりすがり ： 2007/03/13（火） 01:39 ID:UWsZexeD sub-gm: > <div class="scroll">に背景画像のタグ<div class="scroll" background="画像">を入れてみたのですが、何もならず。

div要素にbackground属性はありません。
スタイルシートでdivもしくはscrollクラスに背景を設定しましょう。

8 名前：元帥： 2007/03/13（火） 01:39 ［URL］ ID:lkOftW/W sub-bK

言葉足らずでした。
タグで指定するのではなく、スタイルシートで指定して下さい。

スタイルシートの書式は

セレクタ{プロパティ:値;}

が基本となります。

既にこのように指定されていますね。

body{
background-image : url(背景の画像);
}

これはbody要素に背景画像を設定します。

同じく、既に指定されている

.ad_text{ display: none }

は、class属性にad_textが指定されている要素を表示しないというものです。
要素名につなげる場合もありますが、セレクタの先頭にピリオドがあれば、クラスです。

クラス名は自由に決定する事が可能で、それをタグに適用するには

<div class="scroll">

のように、class属性で指定します。
これで、scrollクラスがdiv要素に適用されました。

かなり簡単に説明しましたが、詳細事項はWebで調べて下さい。
理論を理解して、自分で改造できるようになれば、夢が広がりますよ。

さて、本題に入ります。
> scrollクラスにも同じ背景画像をしてやれば良いです。
どうすれば良いか、分かりましたか？

> body要素に指定している背景はそのままで大丈夫ということでしょうか
そのままの方が望む結果になると思います。
スクロールバーは透過するので、背景の指定がなければ、デフォルトの背景色がスクロールバーの色となります。
私の場合は、白でした。

9 名前： saco ： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: ・・クラスの意味がわかりました！理解出来たことに少し感動してしまいました*＾＾*

元師さん、あやさん、とおりすがりさんには感謝しております。
おかげで希望通りのページにすることができました。
これからはもっと自分の頭で考えてみようと思います。ありがとうございました。

10 名前： saco ： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: 解決したと書きましたが、解決しておりませんでした(T T)すみません･･

スクロールバーに画像が反映されていないんです。

ソースになります↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<style type="text/css">





</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<div class="scroll">
<div class="body">
テスト
 
 
 
 
 
 
 
 
</DIV>
</BODY></HTML>

何かおかしい箇所ございますでしょうか？

11 名前：あや： 2007/03/13（火） 01:39 ID:TRVH9wjM sub-ND: 　もう少しです。頑張りましょう。

　問題です。
　sacoさんは>>10に書いたCSSの中でどの部分がclass="scroll"を指定していると思いますか？

　scrollクラスの中にも同じ背景画像を入れてあげれば良いです。と書いた方が分かってもらえます？

12 名前： saco ： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: あやさん、ありがとうございます。
こうでしょうか？

<HTML><HEAD>
<style type="text/css">


</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<div class="scroll">
テスト
</DIV>
</BODY></HTML>

少し答えに近づけました＾＾
スクロールバーに画像は反映されたのですが、今度はスクロールバーの"背景の画像"がスクロールされません。

background-image : url(背景の画像);}は、固定するタグは含まれておりませんよね？どうして動かないのでしょうか。

13 名前：元帥： 2007/03/13（火） 01:39 ［URL］ ID:4fUiV1j2 sub-bK: >>12
そのソースコードは抜粋でしょうか？
スクロールバーが出現するには条件があり、それは内容がウインドウ画面内に収まりきらない場合です。
ひとまず、brタグでも沢山入れて確認してはどうでしょうか。

※画像サイズとスクロール量によっては、スクロールしているように見えない場合があります。
（スクロール前と後の背景が全く同じであるため）

※くどいようですが、文法チェックサイトを紹介しておきます。
HTML文法チェック：Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

CSS文法チェック：W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/

14 名前：あや： 2007/03/13（火） 01:39 ID:TRVH9wjM sub-ND: > スクロールバーに画像は反映されたのですが、今度はスクロールバーの"背景の画像"がスクロールされません

　つたない知識でbodyという枠の中に<div>という一回り小さな箱を入れ込んでいく、と理解しているので<div class="scroll">に背景画像を指定した時点でbodyの背景画像はほぼ無意味かな、と。
　それでも指定しているのはスクロールバーを透過させて画像を見せたいためですよね？
　そもそもスクロールバーを加工しても反映されるのはIEで閲覧した時に限りますし。

　sacoさんはどうしたいですか？
　スクロールバーを透過させたいし、<div class="scroll">の中味を読ませたいならば
　http://umigasuki.exblog.jp/1773743
　↑のサイトが参考になると思います。素材も配布されていますし。

　それと
　http://www.shoshinsha.com/pukiwiki/index.php?%A5%B9%A5%AF%A5%ED%A1%BC%A5%EB%A5%D0%A1%BC%A4%CE%B0%EC%C9%F4%A4%F2%C6%A9%B2%E1%A4%B7%A4%BF%A4%A4
　↑をご覧になって、sacoさんの指定を一ヶ所直してみるといいように思いました。
　頑張ってくださいね。

15 名前： saco ： 2007/03/13（火） 01:39 ID:WApcsHcU sub-1h: 元師さん、あやさんアドバイスありがとうございました。

教えて下されば下さるほど奥が深く、私には難しい問題だなと思いました。
私はHTMLの土台を理解せずHPを作っていたようです。
もう少し自分で基礎を勉強してから出直そうと思います。
このスレッドも検索をすればまた出てくるので、時が来たときに参考にさせていただきます＾＾
アドバイスありがとうございましたm(_ _)m

元師さん＞＞
文法チェック使わせていただきますね＾＾