出産前後の痔にはご注意!

ブラウザのスクロールバーの制御をしたいのですが、
いい方法が見つかりません。

たとえば、縦の長さ800pxある画像を表示させたときに
500pxまではブラウザのスクロールバーを非表示にさせ、
500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。

この時、例えばブラウザウィンドウの縦幅を480pxにした場合は
差分の20px分のみのスクロールバーが出てきてほしいのですが、
単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、
800px分のスクロールバーが出てしまうのです。

ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。
何かいい方法があればご教授ください

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

A 回答 (3件)

#2です。



外側はdivではなくて、bodyですね。 失礼。
    • good
    • 0

内容がよくつかめていないのですが…



こんなことでしょうか?

<div style="height:100%; overflow:auto;">
 <div style="min-height:500px;">
  <!-- テスト用画像 -->
  <img src="A.jpg" style="height:800px;">
 </div>
</div>

はずしていたら失礼。


javascriptでもよければ
1)上記構造の内側のdivをoverflow:hiddenにしておいて、
 スクリーンサイズが500以上あればdivサイズをそれに合せる
 (500以下なら500)
2)リサイズイベントで、1)の処理を再度実行。
という感じでもいけそうに思います。 

この回答への補足

ありがとうございます。
教えていただいたやり方で試してみましたが、どうやら再現できないようです。。
すいません。。もしかしたら伝わっていないのかもしれないですが。。

感じとしては、、
ブラウザウィンドウサイズが500以上であれば
bodyタグをoverflow:hidden、
500以下なら、overflow:autoとする。

・・・ですが、500以下の時のスクロールできる範囲を
800px分ではなく500px分にしたいのです。
スクロールの範囲を指定する事ってそもそも出来るのでしょうか?

どうも分かりづらくてすみませんが、
よろしくおねがいします。

補足日時:2011/05/27 23:33
    • good
    • 0

ごめんなさい、正直何がしたいのかよくわかっていませんが


その「やりたい事」は、そもそも出来ないか、
出来たとしてもhtmlやCSSだけでは実現できないと思います。
出来るとしたらJavascriptかな。

本当に、「ブラウザのスクロールバー」を制御したいのであれば・・・
普通の方法では制御できませんし、
またする意味もないと思います。

「画像の高さ」を基準に制御するのが、使いやすいかというと・・・そうではありませんし。
閲覧する側が使用しているモニターのサイズはまちまちで、
またブラウザの種類や表示しているツールバーなどでも「ブラウザの閲覧領域の高さ」というのは変化します。

なので、
-------------
たとえば、縦の長さ800pxある画像を表示させたときに
500pxまではブラウザのスクロールバーを非表示にさせ、
500px以下になったときにはじめてスクロールバーが表示される形
-------------
この時、閲覧者のモニターサイズ(閲覧領域の高さ)が、もし最大にしても500px以下だったら?(現実的にありそうなサイズか田舎はとりあえず置いておいて)
どこまで行ってもスクロールバーが表示されない・・・ってコトにはなりませんかね?


まぁ、ワタシが思っているのと違うかもしれませんし。
もし、「こんな風に」と思っているのと、同じ制御を実現できているサイトがあるようでしたら、URLを教えてください。

この回答への補足

ご回答ありがとうございます!
javascriptを用いた方法で構いません。

-------------
500px以下だったら?
どこまで行ってもスクロールバーが表示されない・・・ってコトにはなりませんかね?
-------------
500px以下だとスクロールバーは出るので、画像の下側が見られないという事ですよね?
500px以下のモニタ環境のユーザーが見られない部分は、テキスト情報ではなくデザイン的な要素なので、必ず見せる必要があるわけじゃないのです。


数日前から参考になるサイトをずっと探していたのですが、
海外でも見つからなかった為今回こちらに投稿させていただきました。

同じではないのですが、
構造的に似ているものとしてフルFlashのサイトでよく使用される
swfforcesizeやswffitに感覚が似ています。
指定のパラメーターに数値を入れると指定のサイズまではバーがでないという部分をswfに対してではなく、画像ファイルにしたいのです。

http://blog.pixelbreaker.com/flash/swfforcesize

http://swffit.millermedeiros.com/

分かりづらくてすみませんが、
よろしくお願いします。

補足日時:2011/05/27 15:06
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブルをスクロールさせるときのスクロールの位置

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
 ↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr class="FreezHeader"><th>あ</th><th>か</th><th>さ</th></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
<tr><td>あ</td><td>か</td><td>さ</td></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
</table>
</div>

</body>
</html>
===================================


上記のような HTML を書いた場合,
【下の図】↓の「A」のように表示されます。


「A」のようにではなく
スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。
できれば 【下の図】↓の「B」のような感じで
それが難しいとした場合, 【下の図】↓の「C」のような感じです。

このように表示させる方法を教えていただきたく思います。


IEのみで使えれば良いので,
他のブラウザでの見え方は考えなくて良いです。
ただ,
IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと
なるべく JavaScript の使用は避けて
なおかつ,なるべくシンプルな方法が希望です。

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
 ↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%"...続きを読む

Aベストアンサー

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォルトはall(仕様書ではscreenですが、実装はallになっています。HTML5では allに変更される)

 期待のように表示させるためには、本来はtbodyにoverflowを指定すればよいのですが、これはtable要素には使えないことになっています。(IEにはバグあり使えそうに見えます)
 そのため、スタイルシートでtbodyをblockに変換してやる必要があります。しかしその時点でIEは、tbodyの高さをtrに継承してしまうバグがあります。またスクロールバー自体が表示されません。

 IEで期待通りの表らしき形にしたいのなら、table以外でマークアップしてすべての要素table,thead,tfoot,tbody,tr,td,th,col,cilgroup・・をブロックに下からスタイルシートで配置しなおさないとなりません。
 当然ですが、スタイルシートを読まないブラウザ(テキストブラウザ、点字端末、読み上げソフト、そしてプリンター)や他の端末、検索エンジンには意味が通じないことになります。

 仕方なく、table全体を<div>で囲って、thead部分をfixedで固定する方法も試したのですが、IEのみfixedで位置を決めない場合は影も形も消えうせてしまいます。--もちろん標準ブラウザではきちんと整形されます。

{IEのみで使えれば良いので,}
 は、印刷やその他すべてを犠牲にすれば、表の見出しと本体を別のtableにするなど、文書構造を無視したマークアップ・・あるいは、リストなどでマークアップすることになりますが、決してすべきではない邪道になります。

☆tbodyをscrollさせる方法は下記サイトをご覧ください。
Tableのヘッダ(thead)を固定して、<tbody>内をスクロールさせる方法 » 株式会社ジラフィー(Giraffy) ( http://giraffy.jp/blog/2009/09/11/css/107/ )

 今回は質問ありがとうございます。自分自身よい勉強になりました。IEがクソであることも再確認できたし・(笑)

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォル...続きを読む

Qスクロールバーのスクロール量の変更

以前も質問をしましたが回答を頂けませんでした
ので、内容を少し変えて質問します。

今、HPを制作しておりましてあるページの
縦スクロールバーのスクロール量(移動量)を
変えたい(1回のクリックでスクロールする幅を
変更したいと思っておりますが、javascriptか
何かで簡単にできますでしょうか?

どのサイトをみても自動スクロールのことに
ついてしか書かれていなかったので、本当に
困っています。

どなたか宜しくお願いします。

Aベストアンサー

以前の質問を見たのですが、参考サイトの方法のようにレイヤーを使うやり方ではなく、スクロールバー自体の制御をする方法ということでしょうか。

参考サイトの方法は▼をクリックしたときにレイヤーを一定量動かすことでできます。
この方法は、画面全体ではなく一部を動かす方法です。

スクロールバー自体を制御するのは、ブラウザやマウスの設定に依存してしまうので難しいと思いますが、
bodyタグ内にonScrollやonMouseDown、onKeyDownなどでファンクションを動かして、
p1 = document.body.scrollTopで現在の座標を取得
→document.body.scrollTop = p1+100; などで指定した場所を表示する
という方法でできます。
ただ、依存の量だけ一度スクロールした後に指定した位置に移動するので見苦しい感じが否めません。
他にも方法はあると思いますがとりあえず参考までに。。。

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

Qテーブル幅が固定できない

cssに「table-layout: fixed;」を記載してテーブルの幅が固定になるように設定しています。
設定していますが、ブラウザの幅を狭めると

テスト1|テスト2|テスト3

と表示されていたものが

テスト1
テスト2
テスト3

と、レイアウトが崩れてしまいます。
<table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。
幅や高さ等も指定していますが、何かが足りないのでしょうか。

Aベストアンサー

table-layout:fixed;と一緒にwidthを指定されましたか?
両方設定しないと固定されません。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<met...続きを読む

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。


人気Q&Aランキング