ページを表示したら、普通、一番上から表示しますよね。
それをウィンドウスクロールバーを使って、下へ移動しながら
そのページを見ますよね。
私がしたいのは、ページが表示されてそれが途中から表示される
やりかた(タグ・HTML)を教えていただきたいのです。
どうかお願いします。

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

A 回答 (2件)

外していたらすみません。


こういうことでしょうか?↓

<html>
<body onload="location.href='#start_position';">

先頭

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<a name="start_position">ここから表示</a>

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

最後

</body>
</html>
    • good
    • 0

フレームを使って上下に分けて、


下部だけスクロールしたいっていう意味でしょうか?
参考URLにフレームについて詳しく書かれてるページ紹介しますので
そのページをご覧になり、見本は左右のフレームですので
上下にアレンジすればいいかと思います。
その方法も詳しく書かれてますので。

参考URL:http://www.geocities.co.jp/SiliconValley-Oakland …
    • good
    • 0

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

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

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

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

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

Qデザインされたスクロールバーについてです

いつもお世話になっています。。

デザインされたスクロールバーを使用したくて、
flexcrollというファイルをダウンロードしました。
こちらのサンプルにあるファイルが使用しているものと同じかと思います
http://lifescape.seesaa.net/article/51751860.html

ファイルは

javascriptのflexcroll.jsと
cssを2ファイルを使用しています。

こちらでページ内に色を指定したスクロールバーを設置できたのですが、

同じスクロールバーをサイズ違いで、同ページ内に2つ設置したい場合、CSSでは指定が一つしかできないので、同じ大きさのスクロールバーしか設置ができません。

javascriptを2つ用意してCSSのクラス名を変更するれば、同ページ内で2種類のスクロールーが設置できるのか??
よくわかりません。。

どうかご教授お願い致します。

Aベストアンサー

ほかのカテゴリでも同じような質問をなさっているみたいですが、どちらかにしたほうがよろしいかと…


試していませんが(画像を揃えたりが面倒なので)、覗いてみたところ、

参照なさっているページのリンク先のページでは同じページ内に違う種類のスクロールバーを適用しているみたいですね。
それぞれのdivのidがtest1、test2、test3となっていますが、それに対するCSSの設定ファイルがflexcrollstyles.cssだと思われます。

これを見てみると、マスターの設定のあとに「/* Extra sample styles */」として個々のid下でスクロール関係のクラスのスタイル設定が別にされているようですので(test2とtest3のみ)、このような設定をしておいて
 CSBfleXcroll('test1');
のように指定すれば適用できるのではないでしょうか?
(参照ページがそのような方法をとっていると思われるので)

ほとんど説明などを読んでいないので(英語が苦手)、かなり適当な推測ですが、質問者様はすでに設置はできているとのことなので、その情報で補ってくだされば、いけそうな気がしますが…(←少々無責任か?)

ほかのカテゴリでも同じような質問をなさっているみたいですが、どちらかにしたほうがよろしいかと…


試していませんが(画像を揃えたりが面倒なので)、覗いてみたところ、

参照なさっているページのリンク先のページでは同じページ内に違う種類のスクロールバーを適用しているみたいですね。
それぞれのdivのidがtest1、test2、test3となっていますが、それに対するCSSの設定ファイルがflexcrollstyles.cssだと思われます。

これを見てみると、マスターの設定のあとに「/* Extra sample styles */」...続きを読む

Q別ウィンドウにAのページを表示させ、次にBのページを表示させる際にその別ウィンドウをアクティブにする方法

<a href="A.html" target="XXX">Aのページ</a>
<a href="B.html" target="XXX">Bのページ</a>

この記述でまず、Aのページをクリックして別ウィンドウに表示し、
次にBのページをクリックして、同じ別ウィンドウに表示させる際に
その別ウィンドウがアクティブになりません。
これをアクティブするにはどうしたらよいでしょうか?

ちなみに動作はIEで確認しました。

Aベストアンサー

javascriptなどを使わないと難しいですね。
Aを開くときは新しいwindowを開くため
そちらにフォーカスが移りますが
すでに開いているwindowに対して、Bを開くと
もとのHTMLをクリックするためフォーカスが
うつりません。
感じとしては以下のような対応が有効です。

<a href="javascript:void(0)"; onClick="nWin=window.open('A.html','XXX');nWin.focus()">Aのページ</a>
<a href="javascript:void(0)"; onClick="nWin=window.open('B.html','XXX');nWin.focus()">Bのページ</a>

Qfirefox3.6で、スクロールバーの色やデザインを変更したいです。

firefox3.6で、スクロールバーの色やデザインを変更したいです。
どのページを見ていても常に変更後のデザインを適用したいと思っています。

userchrome.cssを使えばよいのかな、と思ったのですが
設定方法がよく分かりませんでした。
どなたか変更方法をご存知の方教えていただけましたら幸いです。

firefoxのスクロールバーの色変更 - ブラウザ - 教えて!goo
http://oshiete.goo.ne.jp/qa/3042955.html

↑同様の質問を拝見し、試してみたのですがうまくいきませんでした…

想定環境はWindows7とXPです。

意味不明でしたら加筆修正しますのでよろしくお願いします。

Aベストアンサー

/*スクロールバーとボタンの色(エメラルドグリーン)*/
scrollbarbutton,
thumb {
-moz-appearance:none !important;
background-color:#0e9 !important;
border-top:1px solid #3fc !important;
border-right:1px solid #0a3 !important;
border-bottom:1px solid #0a3 !important;
border-left:1px solid #3fc !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-colors:none !important;
}
/* スクロールバーにマウスオーバー時の色*/
thumb:hover{
border-top:1px solid #6fc !important;
border-right:1px solid #0c9 !important;
border-bottom:1px solid #0c9 !important;
border-left:1px solid #6fc !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-colors:none !important;
background-color:#3fb !important;
}
/* スクロールボタンにマウスオーバー時の色*/
scrollbarbutton:hover:active,
scrollbarbutton:active {
border-top:1px solid #0c9 !important;
border-right:1px solid #6fc !important;
border-bottom:1px solid #6fc !important;
border-left:1px solid #0c9 !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-colors:none !important;
background-color:#3fb !important;
}
scrollbarbutton {
background-repeat:no-repeat !important;
background-position:center center !important;
}
/* レールの色 */
slider {
background-color:#ffc !important;
-moz-border-left-colors:none !important;
-moz-border-bottom-colors:none !important;
border-style:none !important;
}
slider[orient="vertical"] {
background-color:#ffc !important;
-moz-border-left-colors:none !important;
border-style:none !important;
}

/*スクロールバーとボタンの色(エメラルドグリーン)*/
scrollbarbutton,
thumb {
-moz-appearance:none !important;
background-color:#0e9 !important;
border-top:1px solid #3fc !important;
border-right:1px solid #0a3 !important;
border-bottom:1px solid #0a3 !important;
border-left:1px solid #3fc !important;
-moz-border-top-colors:none !important;
-moz-border-right-colors:none !important;
-moz-border-bottom-colors:none !important;
-moz-border-left-co...続きを読む

QMovableTypeのタグで、現在表示されているページである事を示すタグはありますか?

自分のウェブサイトをMovable Type 4.1に移行しようと考えています。
そこで質問なのですが、Movable Typeのタグで現在表示されているページを明示出来るようなタグ、
もしくは現在どのページを表示中であるかどうかといった事を格納出来るタグはあるのでしょうか?

具体的には、以下のようなリストでCSSの背景画像置換を使ってロールオーバーメニューを作り
現在のページにはクラス"現在表示されているかどうか"を設定し、表示される画像を変更したいと思っています。
<li id="pagea"><a href="../a.html" class="active">PAGE A</a></li>

また、方法は違ってもこういった事を実現出来る…というタグの使い方があればご教示下さい。
ちょっと分かり難い質問になってしまいましたが、よろしくお願いします。

Aベストアンサー

「現在どのページを表示中であるか」というのがちょっと範囲が広すぎて、「これ」とは言えないんですが…

一例ですが、
「main_indexの時」・「カテゴリーアーカイブテンプレートの時」とかであれば、各テンプレートの最初にMTSetVarでページの値が入っているので、「MTIf name="">で取得できます。
<mt:if name="main_index">
ページがmain_indexの時
<mt:else>
それ以外の時
</mt:if>
みたいな感じで。

>現在どのページを表示中であるかどうかといった事を格納出来るタグ

このあたりを使えばできないでしょうか。
MTSetVarBlock
http://movabletype.jp/documentation/appendices/tags/setvarblock.html

QWebデザイン時のスクロールバー

Xhtmlとcssでwebサイトを作っています。そのサイトは4ページで3つは高さ768pxでスクロールバーがでないのですが1つは情報量の違いで高さありスクロールバーがでます。その時にスクロールバーの分だけずれます。全ページがセンター固定です。

ページ移動をしたときに1ページだけ横に少しずれるので気になります。この状態を解決するにはどうすれば良いのですか?良い方法がなければずれは諦めようと思ってます。

わかる方がいたら教えて頂けたら幸いです。お願いします。

Aベストアンサー

http://neo.s21.xrea.com/web/006.html
http://kumacrow.blog111.fc2.com/blog-entry-490.html

マージンをとって、常にスクロールバーを出すという方法があるようです。
CSS3に対応しているブラウザのみで考えるならめんどくさいことは要りません。

もしくは、そのCSSすら面倒となると、根本的に、1ページの情報量を減らすとか。

QHTMLのタグで、ウィンドウの横幅を、カーソルで、縮小しても、ホームペ

HTMLのタグで、ウィンドウの横幅を、カーソルで、縮小しても、ホームページの内容が、細くなって残っているタグってどんなだったでしょうか?今、ホームページを作ってる初心者です。普通なら、半分の幅に、したら、半分消えてしまいますよね、それが残ってるようにできるページがあったので、そのようにしてみたいです。よろしくお教えください。

Aベストアンサー

フレームや文字の折り返しをしていないなら、自動的にウィンドウ幅に合わせて折り返しされます。
半分しか表示されないのはフレーム指定(ウィンドウ幅に対して何%ではなく、何ピクセルの指定の場合)がされているのではないでしょうか?

QMovable Type でスクロールバーのデザインを変えるには?

宜しくお願いします。

現在、MT3.151を使っていますが、ブログのスクロールバーを変更するやり方がわかりません。HTMLでは動作していたCSSを、StylesheetのCSSのBODY部分にそっくりそのまま移してみましたが、デザインが全く変わりません。ですが、時々スクロールバーが変わっているMTのブログも見かけるので、何か別のやりかたがあるのかなと思い、投稿させていただきました。

お手数ですが、ご回答宜しくお願いいたします。

Aベストアンサー

CSSの記述を

body,html {
scrollbar-face-color: ・・・(略)}

としてしてみてはどうでしょう?

QTableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか?

すみません、お知恵を拝借させてください。
Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか?

下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2)
すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能
か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。

Aベストアンサー

ソースを修正してみました。
変更点ですが、
1.セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。
2.ヘッダーのスクロール方法を変更しました。
scrollTopで移動できるのは、overflow:scroll;の記述がある場合のみです。
overflow:scroll;をつけるのは製作の意図と違うと勝手に解釈して、ヘッダーブロックの表示位置をlayerからの相対位置でずらす方法に変更しました。
その方法ですが、layerにもうひとつDIVをはさみ、DIVの相対位置をずらすことで、スクロールについていくようにしました。

以下ソースです
<html>
<head>
<script language="JavaScript">
function initialize(){
var data = document.getElementById("data");
var header = document.getElementById("header");
var cell = data.rows[0].cells;
var wkWidth;
for(var i=0; i<cell.length; i ++){
wkWidth = cell[i].offsetWidth;
header.rows[0].cells[i].width = wkWidth ;
cell[i].width = wkWidth ;
}
//↓↓↓ 1.ヘッダーのサイズを固定しました
header.style.width = data.offsetWidth;

document.getElementById("layer").style.width = "585px";
document.getElementById("region").style.width = "600px";
}

//↓↓↓ 2.ヘッダーの表示方法をDIVの相対位置を変えることで行うようにしました
function SlideHeader() {
//regionがスクロールした分だけDIVの表示位置をマイナスしています
document.getElementById("ViewSpace").style.left = (document.getElementById("region").scrollLeft * (-1)) + "px";
}

</script>
</head>
<body onload="initialize();">
<div id="layer" style="border:1px; overflow-x:hidden; overflow-y:hidden;">
<!-- 新たにDIVをはさみました。
layerに対して相対位置表示できるようにしています。
このDIVの相対位置を、をregionが右にスクロールした分だけ左に動かします。-->
<div id="ViewSpace" style="top:0px; left:0px; position:relative;">
<table id="header" style="margin:0px;" rules="all" border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</div>
<!-- onScrollを変更しています -->
<div id="region" style="height:80px; overflow-x:scroll; overflow-y:scroll" onScroll="SlideHeader()">
<table id="data" style="margin:0px;" rules="all" border="1">
<tr><td>ABCDEFABCDEFABCDABCDEFABCDEF</td><td>ABCDEFABCDEFABCEFABCDEFABCDEF</td><td>ABCDEFABCDEFABCDEFABCDEF</td></tr>
</table>
</div>
</body>
</html>

ソースを修正してみました。
変更点ですが、
1.セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。
2.ヘッダーのスクロール方法を変更しました。
scrollTopで移動できるのは、overflow:scroll;の記述がある場合のみです。
overflow:scroll;をつけるのは製作の意図と違うと勝手に解釈して、ヘッダーブロックの表示位置をlayerからの相対位置でずらす方法に変更しました。
その方法ですが、layerにもうひとつDIVをはさみ、DIVの相対位置をずらすことで、スクロールについていくように...続きを読む

QjQueryのタブにスクロールバーをつけたい

jQueryのタブにスクロールバーをつけたい

jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。
さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。


<script src="./js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="./js/jquery.cookie.js" type="text/javascript"></script>
<script src="./js/ui.core.js" type="text/javascript"></script>
<script src="./js/ui.tabs.js" type="text/javascript"></script>
<script src="./js/jScrollPane.js" type="text/javascript"></script>
<script src="./js/jquery.mousewheel.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true});
$('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9});
});
</script>

<body>

<div id="container1">
<ul>
<li id="tab1"><a href="#tab_categry">タブ1</a></li>
<li id="tab2"><a href="#tab_all">タブ2</a></li>
</ul>

<div id="pane1">
<div id="tab_categry">
<p>中身1(省略)</p>
</div>
<div id="tab_all">
<p>中身2(省略)</p>
</div>
</div>
</div>
</body>


以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html
javascriptは初心者なものでよくわかりませんでしたorz

どなたかわかる方がいましたら教えてもらえないでしょうか??

jQueryのタブにスクロールバーをつけたい

jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。
さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。


<script src="./js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="./js/jquery.cookie.js" type="text/javascript"></script>
<script src="./js/ui.core.js" type="text/javascript"></script>
<script src="./...続きを読む

Aベストアンサー

タブを切り替えた時にスクロールバーの長さがリサイズされないということです。

=>タブの中身に、もう一階層<div>を作ってCSSで、大きさ指定すればうまく
いきました。先に、jScrollPane()を実行します。

※jScrollPaneのサンプルページにUI Tabと併用している例が載ってます。
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

<style type="text/css">
.scroll-pane {width:500px;height:100px;overflow:auto;}
.ui-tabs-hide {position:absolute;left:-10000px;display:block;}
#container1 {width:100%;}
</style>
<script type="text/javascript" charset="utf-8">
<!--
$(document).ready(function(){
$('.scroll-pane').jScrollPane({scrollbarWidth:13, scrollbarMargin:9});
$('#container1').tabs({event:'click',cookie: { expires: 30 },cache:true});
});
// -->
</script>
</head>
<body>
<div id="container1">
<ul>
<li id="tab1"><a href="#tab_categry">タブ1</a></li>
<li id="tab2"><a href="#tab_all">タブ2</a></li>
</ul>
<div id="pane1">
<div id="tab_categry">
<div class="scroll-pane">
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
<p>中身1(省略)中身1(省略)中身1(省略)中身1(省略)中身1</p>
</div>
</div>
<div id="tab_all">
<div class="scroll-pane">
<p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p>
<p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p>
<p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p>
<p>中身2(省略)中身2(省略)中身2(省略)中身2(省略)中身2(省略)</p>
</div>
</div>
</div>
</div>
</body>
</html>

タブを切り替えた時にスクロールバーの長さがリサイズされないということです。

=>タブの中身に、もう一階層<div>を作ってCSSで、大きさ指定すればうまく
いきました。先に、jScrollPane()を実行します。

※jScrollPaneのサンプルページにUI Tabと併用している例が載ってます。
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

<style type="text/css">
.scroll-pane {width:500px;height:100px;overflow:auto;}
.ui-tabs-hide {position:absolute;left:-10000px;display:block;}
#co...続きを読む

QHTML 全画面表示 リンク先のウィンドウのサイズ指定など

タイトルにもありますように、HTMLでサイトを全画面表示にしたいわけです。
あと、リンク先のウィンドウのサイズ指定方法
リンク先のウィンドウを全画面表示のような状態でサイズ指定する方法もお願いします。
これらは自分のサイトに施したいと考えています。
なお、結果が同じならHTMLじゃなくても結構です。

Aベストアンサー

セキュリティ関係や環境などの問題もありますが、とりあえず方法としては、

新しいウィンドウで開く

<a href="リンク先URL" onclick="window.open('リンク先URL',null,'width=400,height=300,scrollbars=yes');return false;">リンク</a>

自ウィンドウで開く

<a href="リンク先URL" onclick="window.resizeTo(400,300);window.location.href='リンク先URL';return false;">リンク</a>

フルスクリーンウィンドウで開く(IEのみ)

<a href="リンク先URL" onclick="window.open('リンク先URL',null,'width=400,height=300,scrollbars=yes,fullscreen=yes');return false;">リンク</a>


人気Q&Aランキング

おすすめ情報