［報告 ２／２］フレーム非対応のブラウザと擬似フレーム動作
笠原 励（氷炎 雷光風）
報告が遅れてすみません。ｍ（＿）ｍ
fj.net.www.authoring,fj.net.www.browsers,fj.comp.lang.javascript
へのクロスとFollowup-To:fj.net.www.authoringとなってます。
Message-Id: <20040317151327.7...@uranus.interq.or.jp>
で書いた、今回自分で試したhtmlとCSSです。
＃これらのファイルをベースにリニューアル作業を続けたいと思います。
日本語版ｗｉｎ９８ＳＥ対応の
・ ＩＥ６ＳＰ１（ＩＥ５からのアップデートによる）
・ Ｎｅｔｓｃａｐｅ７．１
・ Ｏｐｅｒａ７．２３
にて動作確認してます。
htmlファイルは2種類あります。
１つは、1画面にすべてを収めきっているhtmlファイル。
(fjapanihon_top.html)
もう１つは、右側の内容がスクロールするくらい長いhtmlファイル。
(fjapanihon_words.html)
それと、Ｏｐｅｒａ７．２３については、
fjapanihon_words.html中にもあるように、
右側の内容をスクロール出来ない現象を確認してます。
ファイルサイズが２２ＫＢとデカすぎるので、下記ＵＲＬで、
ソース表示と言う形でのソース入手をお願いします。
http://www.interq.or.jp/uranus/cuncuku/nihongo/fjapanihon_words.html
で、今回の試したhtmlファイル記述での疑問。
・ <dd></dd>タグ中に、<ul></ul>・<ol></ol>を入れても大丈夫なのか？
ブロックレベルタグの中で他のブロックレベルタグを入れられるのって、
<div></div>は汎用なので大丈夫としても、他のブロックレベルタグは？
・ fjapanihon_top.htmlでの<th></th>タグのような使い方は間違って
いるとは思うが、意図的にあのような書き方をした。
同様な表示をさせる為に、<div style="white-space:pre;"></div>とか
<pre></pre>を試してみたが、意図した表示には少し遠かった。
こういう表示をさせたい場合、他にはどんな方法がある？
～～～ここからfjapanihon.css～～～～～～～～～～～～～～～～～～～～～
/*ｆｊａｐａｎｉｈｏｎ用スタイルシート*/
/*固定表示関係*/
div#left-top {
position: fixed;
top: 0;
width: 240px;
background-color:#FDFFE9;
}
div#left-bottom {
position: fixed;
top: 160px;
width: 240px;
background-color:#FFC9F7;
}
div#right {
position: fixed;
margin-left:240px;
top: 0;
height: 100%;
bottom: auto;
background-color:#DFFFF6;
overflow: scroll;
}
/*見出し関係*/
h1 {font-size:medium;float:left;}
h2,h3 {font-size:medium;}
th {font-weight:normal;}
/*定義リスト関係*/
dt {font-weight:bold;}
/*大きさ・太さ関係*/
.small {font-size:smaller;}
.bold {font-weight:bold;}
～～～ここまでfjapanihon.css～～～～～～～～～～～～～～～～～～～～～
＝＝＝ここからfjapanihon_top.html＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE HTML PUBLIC "-//WWW3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- ～～～ヘッダ部開始～～～ -->
<head>
<title>～目次～ ｆｊａｐａｎｉｈｏｎ</title>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="fjapanihon.css" type="text/css">
<script type="text/javascript">
function init() {
if(document.all) { // IE
var lt = document.getElementById('left-top'); lt.style.position = 'absolute';
var lb = document.getElementById('left-bottom'); lb.style.position = 'absolute';
var r = document.getElementById('right'); r.style.position = 'absolute';
var b = document.documentElement || document.body;
setInterval(function() { lt.style.top = b.scrollTop + 'px'; }, 200);
setInterval(function() { r.style.top = b.scrollTop + 'px'; }, 200);
}
}
</script>
<!--本来ならスクリプト本体をコメントアウトすべきですが、
そうすると、javascriptを一番動作させたいＩＥでの動作が
おかしいので、このようにしています。-->
</head>
<!-- ～～～ヘッダ部終了～～～ -->
<!-- ～～～ボディ部開始～～～ -->
<body onload="init()">
<!-- ～～～メニューと連絡先部分開始～～～ -->
<div id="left-top">
<h1>fjapanihon top</h1>
<p> 2004 3/22更新
<br style="clear:left"><a href="fjapanihon_words.html">用語</a> <a href="">感想</a> <a href="">掲示板</a>
<a href="">リンク</a> <a href="">その他</a>
</p>
<address>
<br>氷炎 雷光風(ひえん らいこふ)
<br>cuncuku＠yahoo.co.jp(受信専用)
<br>cuncuku＠uranus.interq.or.jp
</address>
</div>
<!-- ～～～メニューと連絡先部分終了～～～ -->
<!-- ～～～当サイト利用上の注意部分開始～～～ -->
<div id="left-bottom">
<h2>当サイト利用上の注意</h2>
<p class="small">
当サイト利用による損害等が発生しても
<br>管理者は、いかなる責も負いません。
<br>当サイト利用によるトラブルが発生した場合
<br>当事者間或はご自分で解決してください。
</p>
<h2>更新履歴</h2>
<p class="small">
２００４／３／２２ リニューアル
</p>
<h2>動作確認</h2>
<p class="small">
ｗｉｎ９８ＳＥ、画面解像度８００＊６００で
<br>以下のブラウザを使用。
<br>主：Ｎｅｔｓｃａｐｅ７．１
<br>副：Ｏｐｅｒａ７．２３ 予備：ＩＥ６ＳＰ１
</p>
</div>
<!-- ～～～当サイト利用上の注意部分終了～～～ -->
<!-- ～～～メニュー説明・掲示板利用規約部分開始～～～ -->
<div id="right">
<caption><span class="bold">メニュー説明</span></caption>
<table>
<tr><th>用語</th><td>ニュースグループって何？という方向け。</td></tr>
<tr><th>感想</th><td>ニュースグループを使っての感想・意見。</td></tr>
<tr><th>掲示板</th><td>ニュースグループ用４つ、雑談用１つ。
<br>利用は規約を読んでからお願いします。
<br>随時更新。</td></tr>
<tr><th>リンク</th><td>お世話になっている方々へのリンク。</td></tr>
<tr><th>その他</th><td>更新履歴＆日記形式のきまぐれな雑記。
<br>それ以外に何か増えるかも。</td></tr>
</table>
<h2>掲示板利用規約</h2>
<p> 違反に対しては、管理行為を行います。
<br>違反が続いた場合、掲示板の閉鎖もあります。
<br>以下の様な内容は禁止。
</p>
<ul>
<li>公序良俗、憲法・法律に反する</li>
<li>個人・団体を問わず、誹謗中傷する</li>
<li>管理者が不適切と判断する</li>
</ul>
</div>
<!-- ～～～メニュー説明・掲示板利用規約部分終了～～～ -->
</body>
<!-- ～～～ボディ部終了～～～ -->
</html>
＝＝＝ここまでfjapanihon_top.html＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ではでは。
--
笠原 励（氷炎 雷光風／ひえん らいこふ）
cun...@uranus.interq.or.jp －受信専用－cun...@yahoo.co.jp
オリジナルストーリーの感想は、if_t...@infoseek.jpまで。
Subjectに「番外編」とあれば、ほぼオリジナルストーリーです。
笠原 励（氷炎 雷光風）
fj.comp.lang.javascriptにクロスして、
Followup-To:fj.comp.lang.javascriptとなってます。
Message-ID: <c3s11d$ouv$1...@news00.iij4u.or.jp>
において、すぎたさんは書きました。
> 今回の件は(今日compatModeを見つけたので(^^;;)
>
> var b = (document.all && (document.compatMode == undefined || document.compatMode == "BackCompat"))
> ? document.body : document.documentElement;
>
> の方が良いかもしれません。(IEなら、document.body.scrollTop でも十分かも)
こちらについて質問させてください。
互換モードを条件に入れての判定のように思うのですが、
いったいどういうことなのかサッパリです。
&&と||を使っての2重入れ子の条件判定（これをAとする）。
Aと?以後の文の、比較or条件判定を取って、bの値に設定している
ということでしょうか？
で、こうすることによるメリットというのは、どういうことでしょうか？
> また、lb が設定されていないため、こちらも設定した方が良いかと。
>
> var movepos = function () {
> lt.style.top = b.scrollTop + 'px';
> lb.style.top = b.scrollTop + 160 + 'px';
> r .style.top = b.scrollTop + 'px';
> }
> setInterval(movepos, 200);
久野さんのサンプルを自分でいじった時、lbの設定文を入れていたのですが、
動作がうまくいかなかったのと、ltとrだけの設定で問題なさそうというのが
あって、あえて削っていましたが、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
を書き間違えるというのが原因だったみたいです。
そして、すぎたさんの意見を元に、下記のようにしてみました。
script本体部分だけ書きます。
function init() {
if(document.all) { // IE
var lt = document.getElementById('left-top'); lt.style.position = 'absolute';
var lb = document.getElementById('left-bottom'); lb.style.position = 'absolute';
var r = document.getElementById('right'); r.style.position = 'absolute';
var b = document.documentElement || document.body;
var movepos = function () {
lt.style.top = b.scrollTop + 'px';
lb.style.top = b.scrollTop + 160 + 'px';
r .style.top = b.scrollTop + 'px';
}
setInterval(movepos, 200);
}
}
> 今回のケースではあまり意味を持ちませんが、テストとしては、
> </body> の直前に大量の行を挿入して、div の height:100%
> を超えるようにしてテストすると、JavaScript が動作しているか
> 確認できます。
なるほど、そんな確認方法があったのですね。
「今回のケースではあまり意味を持ちません」というのは、
どういう意味でしょう？今1つピンと来ません。
> > 修正後、コメントアウトしても正しく動作することを確認しました。
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> だと、非標準モード(互換モード)で動作している点については、
> 認識しておいた方が良いと思います。
はい。それは認識しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
を書き間違えるというのは、ちょっと情けなかったかも・・・
T. Sugita
In message news:20040325001829.5...@uranus.interq.or.jp
"笠原 励（氷炎 雷光風）" <cun...@uranus.interq.or.jp> wrote ...
> > var b = (document.all && (document.compatMode == undefined || document.compatMode == "BackCompat"))
> > ? document.body : document.documentElement;
> >
> > の方が良いかもしれません。(IEなら、document.body.scrollTop でも十分かも)
> 互換モードを条件に入れての判定のように思うのですが、
条件としては、IE であり、かつ、互換モードの場合、document.body、
そうでない場合は document.documentElement を b に代入しています。
? : は条件演算子、または三項演算子と呼ばれるもので、
v = e ? x : y;
は
if (e)
v = x;
else
v = y;
とほぼ同等です。ほぼというのは、
v = if (e) x else y;
という記述は出来ない(はず。試してないです(^^;;)という意味です。
if 文で細かく分解して書くと、
if (document.all) { // IE
if (document.compatMode == undefined) { // IE4.x, IE5.x
b = document.body;
} else if (document.compatMode == "BackCompat") { // IE6 互換モード
b = document.body;
} else { // IE6 標準モード
b = document.documentElement;
}
} else { // { NN7, Opera7 }等の、IE 以外の「標準モード」
// IE 以外の「互換モード」は考慮せず
b = document.documentElement;
}
となり、同じ値について条件をまとめると、IE については、
compatMode が undefined または(OR、JavaScriptでは||)
"BackCompat" ならば body ですので、これらの条件を A とおくと、
IE であり、かつ(AND、JavaScriptでは&&) A が真であれば body
IE であり、かつ A が偽であれば documentElement
IE でなければ、documentElement
となって、body の条件が IE であり、かつ A が真のときで、
それ以外は documentElement となるので、
全てを繋げて、
if (IE && A)
b = body;
else
b = documentElement
となり、展開すると
var b;
if (document.all && ((document.compatMode == undefined) || (document.compatMode == "BackCompat")))
b = document.body;
else
b = documentElement;
となります。
var b に直接代入するため 式1(条件) ? 式2 : 式3 を用いていますが、
わかりやすいと思う記述を選択すれば良いかと思います。
(三項演算子は、結果を演算式(代入含む)に利用する場合に用います)
> で、こうすることによるメリットというのは、どういうことでしょうか？
条件の意味ということであれば、IE5.5sp2 で(たぶん IE5 でも)動作します。
三項演算子のメリットというのは、あまり無いです。
(あえて言えば、var b を分離せずに記述している点)
で、IE の場合、標準か互換かの区別なく、document.body.scrollTop
を参照すれば値は取得できるので、
document.body.scrollTop が定義されていればそちらを、そうでなければ
document.documentElement を用いるように、
var b = (document.body.scrollTop == undefined ? document.documentElement : document.body);
でも良いかもしれません。
ただ、標準モードであることを意識する意味を込めるのであれば、
document.documentElement を参照するのも手かなということで、
先の条件にした次第です。
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
これだと、互換モードなので、IE 以外では不都合がある場合があると
思います。ただし、これも確認はしていません。
互換モードを利用するのであれば、それを意識したプログラムの方が
良いと思います。
> 「今回のケースではあまり意味を持ちません」というのは、
> どういう意味でしょう？今1つピンと来ません。
今回例示された２つのページについては、ウィンドウの高さ 100%
の中で div にスクロールバーを持たせているので、どちらの場合も
body 自体はスクロールしませんよね。
なので、scrollTop は変化せず、スクリプト自体は動いていても、
実際に left 部の移動は発生しないないので、スクリプトを
動かさなくても同じという意味です。
スタイルシートに未対応(対応の仕方が異なるとか)でスクリプト
には対応している場合は意味があると思いますが、結構ややこしい
話になるので、スクリプトは更に複雑になると思います。
(NN4.xに対応しようと思うと…私なら諦めるかも)
笠原 励（氷炎 雷光風）
Message-ID: <c3urbm$b4$1...@news00.iij4u.or.jp>
において、すぎたさんは書きました。
> > > var b = (document.all && (document.compatMode == undefined || document.compatMode == "BackCompat"))
> > > ? document.body : document.documentElement;
> > >
> > > の方が良いかもしれません。(IEなら、document.body.scrollTop でも十分かも)
>
> > 互換モードを条件に入れての判定のように思うのですが、
>
> 条件としては、IE であり、かつ、互換モードの場合、document.body、
> そうでない場合は document.documentElement を b に代入しています。
>
> ? : は条件演算子、または三項演算子と呼ばれるもので、
> v = e ? x : y;
> は
> if (e)
> v = x;
> else
> v = y;
> とほぼ同等です。ほぼというのは、
> v = if (e) x else y;
> という記述は出来ない(はず。試してないです(^^;;)という意味です。
できませんでした。（汗）
すぎたさんのサンプルをいじろうとして、
> v = if (e) x else y;
をやってしまい、？？？となりました。
でも、
var b;
if (document.all) { // IE
云々
}
とすれば良いことに気が付いて無事解決しました。
詳細な解説ありがとうございます。
私には、
> if (document.all) { // IE
> if (document.compatMode == undefined) { // IE4.x, IE5.x
> b = document.body;
> } else if (document.compatMode == "BackCompat") { // IE6 互換モード
> b = document.body;
> } else { // IE6 標準モード
> b = document.documentElement;
> }
> } else { // { NN7, Opera7 }等の、IE 以外の「標準モード」
> // IE 以外の「互換モード」は考慮せず
> b = document.documentElement;
> }
が一番わかりやすかったです。
三項演算子は、なじみがない（というか、全くピンと来ない）もので。
例によって、すぎたさんの意見を参考にいじったJavaScriptを付けておきます。
＃いじるっていうのは、おおげさ過ぎですが（＾＾ゞ
function init() {
if(document.all) { // IE
var lt = document.getElementById('left-top'); lt.style.position = 'absolute';
var lb = document.getElementById('left-bottom'); lb.style.position = 'absolute';
var r = document.getElementById('right'); r.style.position = 'absolute';
var b;
if (document.all) { // IE
if (document.compatMode == undefined) { // IE4.x, IE5.x
b = document.body;
} else if (document.compatMode == "BackCompat") { // IE6 互換モード
b = document.body;
} else { // IE6 標準モード
b = document.documentElement;
}
} else { // { NN7, Opera7 }等の、IE 以外の「標準モード」
// IE 以外の「互換モード」は考慮せず
b = document.documentElement;
}
var movepos = function () {
lt.style.top = b.scrollTop + 'px';
lb.style.top = b.scrollTop + 160 + 'px';
r .style.top = b.scrollTop + 'px';
}
setInterval(movepos, 200);
}
}
> > で、こうすることによるメリットというのは、どういうことでしょうか？
>
> 条件の意味ということであれば、IE5.5sp2 で(たぶん IE5 でも)動作します。
> 三項演算子のメリットというのは、あまり無いです。
> (あえて言えば、var b を分離せずに記述している点)
三項演算子を使うと、
・ 変数に直接値を代入できる
・ 演算条件をスマートに書ける
・ 更に上記２つを同時に行える
という点でメリットがあるように感じました。
長いとわかりにくくなりやすいので、きっちり三項演算子を理解しておけば、
読みやすい（場合によってはメンテしやすい）プログラムを書けるんでしょうね。
> で、IE の場合、標準か互換かの区別なく、document.body.scrollTop
> を参照すれば値は取得できるので、
> document.body.scrollTop が定義されていればそちらを、そうでなければ
> document.documentElement を用いるように、
> var b = (document.body.scrollTop == undefined ? document.documentElement : document.body);
> でも良いかもしれません。
> ただ、標準モードであることを意識する意味を込めるのであれば、
> document.documentElement を参照するのも手かなということで、
> 先の条件にした次第です。
>
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>
> これだと、互換モードなので、IE 以外では不都合がある場合があると
> 思います。ただし、これも確認はしていません。
> 互換モードを利用するのであれば、それを意識したプログラムの方が
> 良いと思います。
なるほど。
私自身は、「互換モードである」というのは、htmlの表示動作の確認で、
意識していましたが、JavaScriptでの「互換モード」「標準モード」
の違いは意識していませんでした。
> > 「今回のケースではあまり意味を持ちません」というのは、
> > どういう意味でしょう？今1つピンと来ません。
>
> 今回例示された２つのページについては、ウィンドウの高さ 100%
> の中で div にスクロールバーを持たせているので、どちらの場合も
> body 自体はスクロールしませんよね。
> なので、scrollTop は変化せず、
ここまでは分かりました。
> スクリプト自体は動いていても、
> 実際に left 部の移動は発生しないので、スクリプトを
> 動かさなくても同じという意味です。
ここが、すぎたさんの意見の本質だと思うのですが、
やはりよくわかりません。
結局のところ、
scrollTop は変化せず、div にスクロールバーを持たせている
から、スクロールするような場合になったとしても、それほど、
htmlファイル全体としてのスクロールを意識しなくてよい
ということなんでしょうか？
> スタイルシートに未対応(対応の仕方が異なるとか)でスクリプト
> には対応している場合は意味があると思いますが、結構ややこしい
> 話になるので、スクリプトは更に複雑になると思います。
> (NN4.xに対応しようと思うと…私なら諦めるかも)
今回のリニューアルでは、JavaScriptやCSSに非対応でも、最低限の
ナビゲーションが取れるようにはhtml（内容）を記述したつもりです。
動作確認環境として、NN7、O7、IE6を用いていますが、
今回のCSS+JavaScriptでは、「表示位置を固定することが出来れば良い」
というのが、私の最大の希望です。
新城さん、久野さん、すぎたさんからの例示されたCSSやJavaScriptで、
（今回の希望という意味では、）希望を満たしています。
T. Sugita
In message news:20040326222011.45...@uranus.interq.or.jp
"笠原 励（氷炎 雷光風）" <cun...@uranus.interq.or.jp> wrote ...
> scrollTop は変化せず、div にスクロールバーを持たせている
> から、スクロールするような場合になったとしても、それほど、
> htmlファイル全体としてのスクロールを意識しなくてよい
>
> ということなんでしょうか？
はい。だいたい正しいです。
div に overflow と height を付けて高さを制限してあるので、
div にスクロールバーが付いているだけで、body には
スクロールバーが付かないケースがほとんどだと思います。
あのスクリプトは、スクロールバーを基準にして考えると、
body についたスクロールバーが動かされた場合、そのトップ
の位置を取得して、メニューを移動するというものですので、
スクロールバー自体が無いのであれば、スクリプトを動かす
意味は無いです。
で、スクリプトを動かす必要がないと思われるブラウザは、
私の判断できる範囲では、
IE5, IE6, NN7, Firebird, Opera6, Opera7
というところです。(IE4もかも)
ただし、先のホイール等によるスクロールの問題がありますので、
IEはスクリプトで動かすというのも手です。
以下、テストした CSS と words のスクリプト部です。
# 前回 Opera で試してなくて、判定を間違えてたので、
# 訂正も含んでます。(少々煩雑に書いてますが(^^;)
## Gecko系の場合、left-top の position を absolute
## にすることで、スクリプトのテストが出来ます。
## (fixed の場合は初期化以外動作していないです)
=== fjapanihon.css ===
/*ｆｊａｐａｎｉｈｏｎ用スタイルシート*/
/*固定表示関係*/
body {
margin : 0px;
padding: 0px;
}
#left-top {
position: fixed;
left : 0.5em;
top : 0px;
width : 16em;
height: 156px;
background-color : #FDFFE9;
border: thin solid #FFFFFF;
}
#left-bottom {
position: fixed;
left : 0.5em;
top : 160px;
width : 16em;
background-color : #FFC9F7;
border: thin solid #FFFFFF;
}
#right {
position: absolute;
left : 16.7em;
top : 0px;
height: 100%;
overflow: hidden;
background-color : #DFFFF6;
border: thin solid #FFFFFF;
}
/*見出し関係*/
h1 { font-size : medium; float: left; }
h2,h3 { font-size : medium; }
th { font-weight: normal; }
/*定義リスト関係*/
dt { font-weight: bold; }
/*大きさ・太さ関係*/
.small { font-size : smaller; }
.bold { font-weight: bold; }
=== fjapanihon_words.html の スクリプト部 ===
<script type="text/javascript">
function getStyleByName(name) { // Gecko&IEテスト用
var rule = (document.all ? 'rules' : 'cssRules');
var i, j;
for (i=0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
for (j=0; j < sheet[rule].length; j++) {
if (sheet[rule][j].selectorText == name)
return sheet[rule][j].style;
}
}
return undefined;
}
function init() {
var d = document;
if (!d.getElementById) { // IE4
d.getElementById = function (id) { return d.all[id]; }
}
var lt = d.getElementById('left-top' );
var lb = d.getElementById('left-bottom');
var r = d.getElementById('right' );
var ie = false;
var tid = null;
var b;
function movepos() {
lt.style.top = b.scrollTop + 'px';
lb.style.top = b.scrollTop + 160 + 'px';
if (!ie)
setTimeout(movepos, 200);
}
function scrollchk() {
if (tid) clearTimeout(tid);
tid = setTimeout(movepos, 250);
}
if (window.opera) { // Opera
switch (document.compatMode) {
case undefined : // Opera6
case 'QuirksMode': // Opera7互換
case 'BackCompat': // Opera7互換
b = document.body;
break;
default: // Opera7標準
b = document.documentElement;
break;
}
} else if (document.all) { // IE
ie = true;
switch (document.compatMode) {
case undefined : // IE4,IE5
case 'BackCompat': // IE6互換
b = document.body;
break;
default: // IE6標準
b = document.documentElement;
break;
}
lt.style.position = 'absolute';
lb.style.position = 'absolute';
window.onscroll = scrollchk;
} else { // NN
switch (document.compatMode) {
case undefined : // NN6??
case 'BackCompat': // NN7互換
b = document.body;
break;
default: // NN7標準
b = document.documentElement;
break;
}
if (getStyleByName('#left-top').position != 'fixed') {
// テスト用
window.status = document.compatMode; // check
lt.style.position = 'absolute';
lb.style.position = 'absolute';
setTimeout(movepos, 200);
}
}
}
</script>
T. Sugita
body のスクロールバーテストを最後にしたもので、
一部間違ってました。(^^;
あと、先のスクリプトをテストした環境ですが、
Win98 (Mouse : Logitech MX700)
IE5.5sp2, Firebird0.7, Netscape7.02
です。
# NN4.xでは、まったく動作しません。
In message news:c44dnj$5aa$1...@news00.iij4u.or.jp
"T. Sugita" <nws-...@bp.iij4u.or.jp> wrote ...
> #right {
> position: absolute;
> left : 16.7em;
> top : 0px;
> height: 100%;
> overflow: hidden;
> background-color : #DFFFF6;
> border: thin solid #FFFFFF;
> }
ここの height と overflow の行は削除してください。
> function getStyleByName(name) { // Gecko&IEテスト用
> var rule = (document.all ? 'rules' : 'cssRules');
～ 略 ～
> if (getStyleByName('#left-top').position != 'fixed') {
～ 略 ～
ここは Opera には対応してなくて、実際のプログラムでも
Opera の場合は呼び出してません。
テストで使用する以外は削除した方がスッキリします。
# Opera7 は、なぜか正式版以降、インストールは出来ても
# 動作しなくなってしまった(betaはOK)ので…
T. Sugita
In message news:c45ihk$kcs$1...@news00.iij4u.or.jp
"T. Sugita" <nws-...@bp.iij4u.or.jp> wrote ...
> あと、先のスクリプトをテストした環境ですが、
> Win98 (Mouse : Logitech MX700)
> IE5.5sp2, Firebird0.7, Netscape7.02
> です。
Opera6.05 が抜けてました。
Opera6.05 では fixed が使えたので、スクリプト無しで
動作し、また、absolute でも、setTimeout() で lt.style.top に
document.body.scrollTop をセットすると、動作しました。
一方で、後で absolute にすることは出来ませんでした。
また、setInterval() だと、しばらくすると死んでしまい、
setTimeout() を使用しています。
# 以前にも同様の現象が発生したことが…
あと、ユーザーエージェントの判定ですが、Opera6.05 にも
document.all があったため、先に window.opera で判定する
ようにしています。
笠原 励（氷炎 雷光風）
Message-ID: <c45ihk$kcs$1...@news00.iij4u.or.jp>
において、すぎたさんは書きました。
> > #right {
> > position: absolute;
> > left : 16.7em;
> > top : 0px;
> > height: 100%;
> > overflow: hidden;
> > background-color : #DFFFF6;
> > border: thin solid #FFFFFF;
> > }
>
> ここの height と overflow の行は削除してください。
>
>
> > function getStyleByName(name) { // Gecko&IEテスト用
> > var rule = (document.all ? 'rules' : 'cssRules');
> ～ 略 ～
>
> > if (getStyleByName('#left-top').position != 'fixed') {
> ～ 略 ～
>
> ここは Opera には対応してなくて、実際のプログラムでも
> Opera の場合は呼び出してません。
> テストで使用する以外は削除した方がスッキリします。
> # Opera7 は、なぜか正式版以降、インストールは出来ても
> # 動作しなくなってしまった(betaはOK)ので…
すぎたさんの記事に従って、CSSとjavascriptを書き出してみると、
末尾のような形で良いのでしょうか？
それらを試した結果、ウチのＯｐｅｒａ７．２３は、動作してくれました。
特に以前のものでは、rightの部分がスクロールできなかったのが、
スクロールできるようになっていて、すごく驚きました。
「Ｏｐｅｒａでスクロールしてる」って。
すぎたさん、ありがとうございます。ｍ（＿）ｍ
～～～ここからCSS～～～～～～～～～～～～～～～～～～～～～～～～～～～
/*ｆｊａｐａｎｉｈｏｎ用スタイルシート*/
/*固定表示関係*/
body {
margin : 0px;
padding: 0px;
}
#left-top {
position: fixed;
left : 0.5em;
top : 0px;
width : 16em;
height: 156px;
background-color : #FDFFE9;
border: thin solid #FFFFFF;
}
#left-bottom {
position: fixed;
left : 0.5em;
top : 160px;
width : 16em;
background-color : #FFC9F7;
border: thin solid #FFFFFF;
}
#right {
position: absolute;
left : 16.7em;
top : 0px;
background-color : #DFFFF6;
border: thin solid #FFFFFF;
}
/*見出し関係*/
h1 { font-size : medium; float: left; }
h2,h3 { font-size : medium; }
th { font-weight: normal; }
/*定義リスト関係*/
dt { font-weight: bold; }
/*大きさ・太さ関係*/
.small { font-size : smaller; }
.bold { font-weight: bold; }
～～～ここまでCSS～～～～～～～～～～～～～～～～～～～～～～～～～～～
＝＝＝ここからjavascript＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<script type="text/javascript">
<!--
-->
</script>
＝＝＝ここまでjavascript＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ではでは。
--
笠原 励（氷炎 雷光風／ひえん らいこふ）
cun...@uranus.interq.or.jp －受信専用－cun...@yahoo.co.jp
2004/3/29 リンク 検索系2件、fj.*系にa crevice of Web、
nihon.*系にnihon.* official website追加。
3/28 リンク fj.*系にfj.*委員会、弥白通信、書斎追加。
3/27 fjapanihonリニューアル終了！新しいＵＲＬは
http://www.interq.or.jp/uranus/cuncuku/nihongo/fjapanihon_top.html
T. Sugita
In message news:20040328152440.1...@uranus.interq.or.jp
"笠原 励（氷炎 雷光風）" <cun...@uranus.interq.or.jp> wrote ...
> すぎたさんの記事に従って、CSSとjavascriptを書き出してみると、
> 末尾のような形で良いのでしょうか？
はい。コメント以外 OK です。
コメントに関しては、--> には // を付けた方が良いです。
// -->
以下を参照してみてください。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/scripts.html#h-18.3.2
> それらを試した結果、ウチのＯｐｅｒａ７．２３は、動作してくれました。
> 特に以前のものでは、rightの部分がスクロールできなかったのが、
> スクロールできるようになっていて、すごく驚きました。
Opera6.05 でも overflow にはうまく対応しておらず、
div にスクロールバーが付きませんでした。
今回のスタイルでは、body 部に right 部全体が表示され、
body 部のスクロールとなりますので、こちらの方が
(fixed が有効なら)無難だと思います。
ただ、IE ではスクリプトで動かしていることから、
多少ガタガタした動作になってしまう点が難点ではあります。
一方で、ホイールは問題なく動作しますので、あとは
好みの問題というところです。
笠原 励（氷炎 雷光風）
Message-ID: <c498b8$5cj$1...@news00.iij4u.or.jp>
において、すぎたさんは書きました。
> > すぎたさんの記事に従って、CSSとjavascriptを書き出してみると、
> > 末尾のような形で良いのでしょうか？
>
> はい。コメント以外 OK です。
> コメントに関しては、--> には // を付けた方が良いです。
> // -->
> 以下を参照してみてください。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/scripts.html#h-18.3.
上記ＵＲＬの内容を見てみました・・・なるほど。<!--は許容されるが、
-->は（javascriptの解釈的には）認められない
ということなのですね。
全く知りませんでした。
その様な言語仕様と理解しておきます。
> ただ、IE ではスクリプトで動かしていることから、
> 多少ガタガタした動作になってしまう点が難点ではあります。
> 一方で、ホイールは問題なく動作しますので、あとは
> 好みの問題というところです。
はい。もし、「IEでガタガタなスクロールが嫌」というような話が出たら、
また、お知恵を拝借させていただきたいと思います。
いろいろありがとうございました。ｍ（＿）ｍ
後日、今回教えていただいたjavascriptに差し替えようと思います。
＃今は、リニューアル＆リンクが終わったので、一休みしたい気分（笑）