スクロールバーをページの縁取りと一緒にしたい



0   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
こんにちは
ページ作成中によく分からないところがあったので、質問させて頂きます

ページを全部縁取って、上下にアイフレをメニューと普通のページ作りました
それで、その縁取ったページとアイフレのページのスクロールバーを一緒にしたいです
一見見ると、スクロールバーが無くなっているように見えるみたいな(縁取りと一緒になって)

現在の状況は、縁取ったものとスクロールバーが横に2つ並んでいて変な感じに・・・
ページをアップロードしてお見せ出来ない状況なので、URL載せられません

説明下手で、良く分からないとは思いますが
解答お願いいたします

1   名前: 匿名 : 2007/07/01(日) 20:20  ID:ougEp691 sub-gm
> ページをアップロードしてお見せ出来ない状況なので、URL載せられません

では、ソースを載せていただけますか。

2   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
何処のページのソースをお見せすれば良いでしょうか?

3   名前: 匿名 : 2007/07/01(日) 20:20  ID:bahBFzPc sub-Ds
質問を再現できる、最小限度のソース。
宣言なども省略しないこと。

4   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
インデックスは

<html>
<head>
<style type="text/css">
<!--
body{margin:0px;}
-->
</style>
<style type="text/css">
<!--
body{border-width:15px 0px 15px 15px;
border-style:solid;
border-color:black;}
-->
</style>
<style type=text/css>
<!--
body{
scrollbar-face-color:black;
scrollbar-highlight-color:black;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:black;
scrollbar-arrow-color:black;
scrollbar-track-color:black;
scrollbar-darkshadow-color:black;}
-->
</STYLE>
<style type="text/css">
<!--
a{ text-decoration:none; }
a:link{ color:black; }
a:active { color:white; }
a:visited{ color:black; }
a:hover{ color:white; }
-->
</style>
<style type="text/css">
<!--
body{
background-image:url(top.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;}
-->
</style>
<title>Vista</title>
</head>
<body>
<div align=right style="height:10%">
<form method="post" name="ff" action="#" style="margin:0">
<iframe src="menu.html" name="menu" frameborder="0" width="300" height="50" style="border:0px;" scrolling="no" allowtransparency="true"></iframe></div></form>
<iframe src="top.html" name="frame" frameborder="0" width="100%" height="90%" style="border:0px;" scrolling"no" allowtransparency="true" body{margin:0px;}></iframe>
</body>
</html>


トップはまだ作っていないのでメインのページなどが入ったページ


<html>
<head>
<style type="text/css">
<!--
a{ text-decoration:none; }
a:link{ color:black; }
a:active { color:white; }
a:visited{ color:black; }
a:hover{ color:white; }
-->
</style>
<style type="text/css">
<!--
body{background-color:transparent;}
-->
</style>
<style type=text/css>
<!--
body{
scrollbar-face-color:black;
scrollbar-highlight-color:black;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:black;
scrollbar-arrow-color:black;
scrollbar-track-color:black;
scrollbar-darkshadow-color:black;}
-->
</STYLE>
<style type="text/css">
<!--
body{margin:0px;}
-->
</style>
</head>
<body>
<div align="center">
<font size="2" face="MS Pゴシック">
<a href="novel.html" target="frame">MAIN</a> 同窓で規約<br>
<br>
<a href="http://www3.rocketbbs.com/602/vista.html" target="frame">NEWS</a> 同窓で更新日記とかお知らせとか
</body>
</html>

5   名前: 匿名 : 2007/07/01(日) 20:20  ID:ougEp691 sub-gm
まずはhtmlとcssの基本を勉強されることを強くおすすめします。

パッと見て気付いたところだけ↓

> ページを全部縁取って、
とするなら、

border-width:15px 0px 15px 15px; → border-width:15px;

6   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
すみません; 間違えていました

7   名前: とおりすがり : 2007/07/01(日) 20:20  ID:UWsZexeD sub-gm
>>5さん
右の枠線はスクロールバーで表示したいのですから、0でいいのでは。

>>0さん
>>4 このソースで「縁取ったものとスクロールバーが横に2つ並んでいて」という現象は起こらないです。
スクロールバーは「親ページ」のスクロールバーを使いたいのか、「フレーム内」のスクロールバーを使いたいのかどちらでしょう?
後者なら、親ページのスクロールバーを非表示にし、フレーム内のスクロールバーを表示すればよいのではないでしょうか。

親ページcss追加
body{overflow:hidden;}

<iframe src="menu.html" name="menu" frameborder="0" width="300" height="50" style="border:0px;" scrolling="no" allowtransparency="true"></iframe></div></form>
<iframe src="top.html" name="frame" frameborder="0" width="100%" height="90%" style="border:0px;" scrolling"no" allowtransparency="true" body{margin:0px;}></iframe>
scrolling="no" → scrolling="yes"

formの必要性がわからない。
二つ目のフレーム
×scrolling"no"    body{margin:0px;}
○scrolling="no(yes)"  不要
うっかりミスが多いようですし、IE以外でも表示確認したほうがいいです。
スクロールバーの色指定も、IE以外では(一部除く)反映されませんし、間抜けになりますよ。

8   名前: 匿名 : 2007/07/01(日) 20:20  ID:ougEp691 sub-gm
>>5 です。

>>7 さん
あー、そうですね。
すみません、すみません。勘違いしてました!!

> ページを全部縁取って、
だけに気をとられてました。

しっかり読んでから書き込むように気をつけます。。。

9   名前: 匿名 : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
返信遅れました 申し訳ないです;


>>4 このソースで「縁取ったものとスクロールバーが横に2つ並んでいて」という現象は起こらないです。
スクロールバーは「親ページ」のスクロールバーを使いたいのか、「フレーム内」のスクロールバーを使いたいのかどちらでしょう?
後者なら、親ページのスクロールバーを非表示にし、フレーム内のスクロールバーを表示すればよいのではないでしょうか。

すみません; 親ページのスクロールバー入れたままでした
後者の方です フレーム内のスクロールバーを使いたいです
ですが、フレーム内のスクロールバーを表示するだけにしてしまうと、メニューのスクロールバーが出ていないので「約半分だけスクロールバーがある」とまぬけな感じになってしまいます
かといってメニューのスクロールバーも表示すると、フレームとメニューとの間に空白が開いてしまい、おかしな感じに;
くっつけるタグを使いましたが、まだちょっと開いていました
ページを全部縁取るタグを使って、それとフレーム内のスクロールバーを合体させてしまうのは不可能でしょうか?

10   名前: Z ◆XTzyosZXcL : 2007/07/01(日) 20:20  ID:IjcRl9qH sub-Cl
>>9
 ええと、そもそもFramesetによるフレームというものは「複数の文書を”一見”一つであるかのように見せかけているだけ」のものですので、むしろそういうことでしたら全部のページにメニューを記述してCSSによる段組を行うとか、SSIなどの技術で複数ページを合成してしまうとかした方がお望みのことが可能になるような気がします(^^;。

Framesetによるフレーム利用の際の注意点:
http://kuruman.org/dateki/frame

CSSによる段組(マルチカラム)レイアウト講座:
http://www.geocities.jp/multi_column/

SSIについて(当サイト(TAG INDEX)の記述):
http://www.tagindex.com/other/ssi.html

11   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
それが嫌でして・・・
理由は と言われてしまうとよく言えないのですが;

12   名前: とおりすがり : 2007/07/01(日) 20:20  ID:UWsZexeD sub-gm
>>9
> ですが、フレーム内のスクロールバーを表示するだけにしてしまうと、メニューのスクロールバーが出ていないので「約半分だけスクロールバーがある」とまぬけな感じになってしまいます
> かといってメニューのスクロールバーも表示すると、フレームとメニューとの間に空白が開いてしまい、おかしな感じに;
> くっつけるタグを使いましたが、まだちょっと開いていました
> ページを全部縁取るタグを使って、それとフレーム内のスクロールバーを合体させてしまうのは不可能でしょうか?

状況が良くわかりません。
当方で上記ソースを元に作成してみましたが、枠線については問題はないと思うのですが。

> かといってメニューのスクロールバーも表示すると、フレームとメニューとの間に空白が開いてしまい、おかしな感じに;

上のフレームのスクロールバーと下のフレームのスクロールバーがつながって見えればよいのでは?
余白が問題ならmarginか何かの問題では?

よければテストページ(フレーム)を作成してアップし、URLを提示してもらえないでしょうか。

13   名前: とおりすがり : 2007/07/01(日) 20:20  ID:UWsZexeD sub-gm
ええと、つけたし。

> フレームとメニューとの間に空白が開いてしまい、おかしな感じに;

「どのフレームのどこ」のことなのかが分からないです。

> メニューのスクロールバーが出ていないので「約半分だけスクロールバーがある」とまぬけな感じになってしまいます

そもそも「スクロールバーを枠線代わりに」というのが無理なんです。
先にも書いたように、IE以外(一部除く)ではスクロールバーの色は変わらないのですから。
そうすると、スクロールバーを「背景色と同じにする」か、「スクロールバーを非表示にする」かのどちらかになりますが、前者は「色が変わらないブラウザがある」ことに変わりなく、後者はページをスクロールできません。

まあ、「まぬけな感じに」しない一番の方法は、スクロールバーの色を背景色に合わせることではないでしょうか。
それなら色変更が効かないブラウザでも、「間抜け」には感じないでしょう。

14   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
まだメニューの画像が背景透過終わっていないので、アップロードしていないので×になっています。
トップとインデックスとメニューしかページはアップしていませんのでご了承下さい。
それでは分からないという事でしたら、他のページもアップします。
http://www5.pf-x.net/~yukino/sample/

>>スクロールバーの色を背景色に合わせることではないでしょうか
スクロールバーの色を背景色に合わせる というのは透過するという事ですか?

15   名前: とおりすがり : 2007/07/01(日) 20:20  ID:d72b72yq sub-gm
サンプルのページを拝見しましたが、どこがどう「おかしな感じ」なのか今ひとつ解りません。

スクロールするほど中身がないのでスクロールバーが出ない、という点なら、
body{ overflow-y:scroll;} をフレーム内のページに指定すれば、スクロールバーが出ます。
ま、これもIE限定ですが。

> スクロールバーの色を背景色に合わせる というのは透過するという事ですか?
背景が色だけでなく、背景画像を使っているならそれしかないでしょうね。

16   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
>>背景が色だけでなく、背景画像を使っているならそれしかないでしょうね。
それだとスクロールしにくいので避けたいのですが

17   名前: とおりすがり : 2007/07/01(日) 20:20  ID:d72b72yq sub-gm
> それだとスクロールしにくいので避けたいのですが
意味が解りません。
スクロールバーを真っ黒にして枠線に見立て、スクロールバーがないように見えるのと、
大差ないと思いますが……。

# ちなみに当方、ただいまホイールマウスが故障中で、
# スクロールバーの色変更がいかに不便か実感中……。

18   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
透過すると普通にマウスのホイール部分を操作するだけではスクロール出来ない。という事です

19   名前: とおりすがり : 2007/07/01(日) 20:20  ID:d72b72yq sub-gm
> 透過すると普通にマウスのホイール部分を操作するだけではスクロール出来ない。という事です

……できませんか? 私はできますが……。

20   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
自分のPCでは出来ません 違うマウスでもそうなので、マウスのせいではないと思いますが;

21   名前: とおりすがり : 2007/07/01(日) 20:20  ID:d72b72yq sub-gm
http://berry.littledear.org/touka-ai-sample.htm
例えばこちらのページ。スクロールできませんか?

22   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
出来ます・・・自分でもすごく驚いているのですが

http://tuku.egoism.jp/html2/sousyoku41.htm
↑このページの透過はスクロール出来ないのですが

23   名前: はな : 2007/07/01(日) 20:20  ID:o5prilem sub-bK
21>>インラインフレーム
http://www.tagindex.com/html_tag/frame/index.html
と22>>フォームの複数行テキスト
http://www.tagindex.com/html_tag/form/textarea.html
の違いではないでしょうか?

ちなみに22>>のほうもブラウザのスクロールバーはスクロール出来ましたよ。(IE7では)

24   名前: とおりすがり : 2007/07/01(日) 20:20  ID:d72b72yq sub-gm
>>21
スクロールできますよ。
ただこちらだと、テキストのない部分にカーソルを当てているとスクロールできないようですね。
ですが、
.imgscroll{filter:chroma(color=gray)}

.imgscroll{filter:chroma(color=gray);
background-color:gray;}
とすれば、問題なくなるようです。
お試しを。

25   名前: Yukino : 2007/07/01(日) 20:20  ID:VScpei1z sub-j7
出来ました! ありがとう御座います
長い間解答して頂き、本当にありがたく思っております
これでやっとリニュが終わりました 笑
本当に、ありがとう御座いました

一覧へ戻る