Google グルヌプは Usenet の新芏の投皿ず賌読のサポヌトを終了したした。過去のコンテンツは匕き続き閲芧できたす。
衚瀺しない

報告　フレヌム非察応のブラりザず擬䌌フレヌム動䜜

閲芧: 2 回
最初の未読メッセヌゞにスキップ

笠原　励氷炎　雷光颚

未読、
2004/03/23 1:23:512004/03/23
To:
どうも。氷炎　雷光颚ひえん　らいこふこず笠原です。

報告が遅れおすみたせん。

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に「番倖線」ずあれば、ほがオリゞナルストヌリヌです。

笠原　励氷炎　雷光颚

未読、
2004/03/24 11:40:292004/03/24
To:
どうも。氷炎　雷光颚ひえん　らいこふこず笠原です。

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

未読、
2004/03/25 9:44:282004/03/25
To:
すぎたです。

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に察応しようず思うず 私なら諊めるかも)

--
杉田
sugi...@bk.iij4u.or.jp

笠原　励氷炎　雷光颚

未読、
2004/03/26 9:23:112004/03/26
To:
どうも。氷炎　雷光颚ひえん　らいこふこず笠原です。

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

未読、
2004/03/27 12:28:192004/03/27
To:
すぎたです。

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>

--
杉田
sugi...@bk.iij4u.or.jp

T. Sugita

未読、
2004/03/27 22:52:162004/03/27
To:
すぎたです。

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)ので 

--
杉田
sugi...@bk.iij4u.or.jp

T. Sugita

未読、
2004/03/28 9:13:092004/03/28
To:
すぎたです。

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 で刀定する
ようにしおいたす。

--
杉田
sugi...@bk.iij4u.or.jp

笠原　励氷炎　雷光颚

未読、
2004/03/28 13:54:402004/03/28
To:
どうも。氷炎　雷光颚ひえん　らいこふこず笠原です。

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

未読、
2004/03/29 8:24:462004/03/29
To:
すぎたです。

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 ではスクリプトで動かしおいるこずから、
倚少ガタガタした動䜜になっおしたう点が難点ではありたす。
䞀方で、ホむヌルは問題なく動䜜したすので、あずは
奜みの問題ずいうずころです。

--
杉田
sugi...@bk.iij4u.or.jp

笠原　励氷炎　雷光颚

未読、
2004/03/29 12:47:172004/03/29
To:
どうも。氷炎　雷光颚ひえん　らいこふこず笠原です。

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に差し替えようず思いたす。
今は、リニュヌアルリンクが終わったので、䞀䌑みしたい気分笑

新着メヌル 0 件