報告が遅れてすみません。m(_)m
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です。
#これらのファイルをベースにリニューアル作業を続けたいと思います。
日本語版win98SE対応の
・ IE6SP1(IE5からのアップデートによる)
・ Netscape7.1
・ Opera7.23
にて動作確認してます。
htmlファイルは2種類あります。
1つは、1画面にすべてを収めきっているhtmlファイル。
(fjapanihon_top.html)
もう1つは、右側の内容がスクロールするくらい長いhtmlファイル。
(fjapanihon_words.html)
それと、Opera7.23については、
fjapanihon_words.html中にもあるように、
右側の内容をスクロール出来ない現象を確認してます。
ファイルサイズが22KBとデカすぎるので、下記URLで、
ソース表示と言う形でのソース入手をお願いします。
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~~~~~~~~~~~~~~~~~~~~~
/*fjapanihon用スタイルシート*/
/*固定表示関係*/
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>~目次~ fjapanihon</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を一番動作させたいIEでの動作が
おかしいので、このようにしています。-->
</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">
2004/3/22 リニューアル
</p>
<h2>動作確認</h2>
<p class="small">
win98SE、画面解像度800*600で
<br>以下のブラウザを使用。
<br>主:Netscape7.1
<br>副:Opera7.23 予備:IE6SP1
</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>ニュースグループ用4つ、雑談用1つ。
<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に「番外編」とあれば、ほぼオリジナルストーリーです。
"笠原 励(氷炎 雷光風)" <cun...@uranus.interq.or.jp> wrote in message
news:20040323122851.6...@uranus.interq.or.jp...
> ・ <dd></dd>タグ中に、<ul></ul>・<ol></ol>を入れても大丈夫なのか?
> ブロックレベルタグの中で他のブロックレベルタグを入れられるのって、
> <div></div>は汎用なので大丈夫としても、他のブロックレベルタグは?
4.01のloose.dtdを読むかぎり、<dd>に入れられる要素は、%flowという
ことで、じゃぁ%flowってのは何かっていうと、%blockと%inlineだということ。
だから<dd>内に<ul>とか<ol>とか、さらに<dl>が入っても問題は無いの
ですよね。(<dt>以下には%inlineだけなんですが)
> ・ fjapanihon_top.htmlでの<th></th>タグのような使い方は間違って
> いるとは思うが、意図的にあのような書き方をした。
表(TABLE)として間違った使い方では無いと思うのだけど? 私の解釈
も間違ってたらごめんなさい。
あと、「」が1Byte文字になっている様ですね。Shift_JISなんで間違いと
は言い切れないと思いますが、個人的には美しく無いかな、と。
絶対的に正しい解釈をしてくれる、という訳ではありませんが、やはり
lint等を通しておく方が好ましいかなと。(Another HTML-lintをお薦め
しておきます)
# 個人的な好みなんだけど、<br>が行頭にあるのは違和感がありま
# す。本当に好みの問題なんですが。^^;
--
新美 浩一@知多半島の住人
ni...@gld.mmtr.or.jp
> http://www.interq.or.jp/uranus/cuncuku/nihongo/fjapanihon_words.html
>
> で、今回の試したhtmlファイル記述での疑問。
>
> ・ <dd></dd>タグ中に、<ul></ul>・<ol></ol>を入れても大丈夫なのか?
> ブロックレベルタグの中で他のブロックレベルタグを入れられるのって、
> <div></div>は汎用なので大丈夫としても、他のブロックレベルタグは?
こういうのは、http://validator.w3c.org/ で検証するのが、常道でしょう。
... PUBLIC "-//WWW3C//DTD でなく PUBLIC "-//W3C//DTD だと怒られる他、
</dd>と<dt>の間に <br>は入らないとか、<a ..>が閉じてないとか
</p>に対応する<p>がないとか怒られますが、他は大丈夫みたいですね。
Transitional でなく Strictでも同じ。
# 疑問点はフォローアップがついてるのでパス。(私も違和感無しに一票)
In message news:20040323122851.6...@uranus.interq.or.jp
"笠原 励(氷炎 雷光風)" <cun...@uranus.interq.or.jp> wrote ...
> overflow: scroll;
ちょっと気になったのですが、Gecko 系(Win98 Firebird, NN7)だと、
ホイール及びキーボードによるスクロールが効かなかったです。
> <script type="text/javascript">
> function init() {
> if(document.all) { // IE
CSS で全てまかなっている分には、script はいらないような・・・
ためしに少し加工して(行を増やして) IE6sp1 で見てみましたが、
うまく動作していませんでした。
document.body を使用すると正しく動作するので、モードが違う
のかもしれません。
> <!--本来ならスクリプト本体をコメントアウトすべきですが、
> そうすると、javascriptを一番動作させたいIEでの動作が
> おかしいので、このようにしています。-->
これもちょっとわからないのですが、IE6sp1 で、document.body
を使用してスクリプトが動作することが確認できている状態で
コメントを入れても、特に問題は無かったです。
Message-ID: <c3ors4$crd$1...@caraway.media.kyoto-u.ac.jp>
において新美さんは書きました。
> 新美@MOMOたろう(京大間借り)です。
京大のサーバ、なくなる可能性が出てきてるんですよね・・・
存続して欲しい。
> > ・ <dd></dd>タグ中に、<ul></ul>・<ol></ol>を入れても大丈夫なのか?
> > ブロックレベルタグの中で他のブロックレベルタグを入れられるのって、
> > <div></div>は汎用なので大丈夫としても、他のブロックレベルタグは?
>
> 4.01のloose.dtdを読むかぎり、<dd>に入れられる要素は、%flowという
> ことで、じゃぁ%flowってのは何かっていうと、%blockと%inlineだということ。
> だから<dd>内に<ul>とか<ol>とか、さらに<dl>が入っても問題は無いの
> ですよね。(<dt>以下には%inlineだけなんですが)
ありがとうございます。
手元の書籍などでは、ブロックレベルであることまでしかわからず、
間違ってないか心配だったのです。
> > ・ fjapanihon_top.htmlでの<th></th>タグのような使い方は間違って
> > いるとは思うが、意図的にあのような書き方をした。
>
> 表(TABLE)として間違った使い方では無いと思うのだけど? 私の解釈
> も間違ってたらごめんなさい。
すいません。私の書き方がものすごくわかりづらかったですよね。
普通<table></table>内の<th></th>タグって
<table>
<tr><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
のように書きますが、今回は、
<table>
<tr><th></th><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td></tr>
</table>
と書いてます。
後者のような<th></th>の書き方は、間違っているんではないか?
と考えたわけです。
実際、書籍などのサンプルを見ても、前者のような書き方ですし。
> あと、「」が1Byte文字になっている様ですね。Shift_JISなんで間違いと
> は言い切れないと思いますが、個人的には美しく無いかな、と。
なるほど。今回は、あえて「」(半角)で行ってみたんです。
「」(全角)は、半角スペースが気になったもので。
万が一、文字化けするような状況が発生したとしても、半角なら、
文字化けしにくいかもと思ったというのもあります。
> # 個人的な好みなんだけど、<br>が行頭にあるのは違和感がありま
> # す。本当に好みの問題なんですが。^^;
そうでしょうねぇ。「(<br>が行頭にあるのは)違和感が出るだろうな」
と想定して書いてますから。
(自分で記述した証、というのはおおげさだけど)
少しひねくれた部分が欲しいので、あえてそうしてます。
というわけで、ホントに個人的好みということで、ご了承下さい。
Message-ID: <c3ovb2$22tg$1...@fw.hamaint.co.jp>
においてEiji KATSURAさんは書きました。
> > http://www.interq.or.jp/uranus/cuncuku/nihongo/fjapanihon_words.html
> >
> > で、今回の試したhtmlファイル記述での疑問。
> >
> > ・ <dd></dd>タグ中に、<ul></ul>・<ol></ol>を入れても大丈夫なのか?
> > ブロックレベルタグの中で他のブロックレベルタグを入れられるのって、
> > <div></div>は汎用なので大丈夫としても、他のブロックレベルタグは?
>
> こういうのは、http://validator.w3c.org/ で検証するのが、常道でしょう。
http://validator.w3c.org/へ飛ぼうとしましたが、できませんでした。
> ... PUBLIC "-//WWW3C//DTD でなく PUBLIC "-//W3C//DTD だと怒られる他、
> </dd>と<dt>の間に <br>は入らないとか、<a ..>が閉じてないとか
> </p>に対応する<p>がないとか怒られますが、他は大丈夫みたいですね。
> Transitional でなく Strictでも同じ。
ご指摘いただいた個所は修正しました。
http://www.interq.or.jp/uranus/cuncuku/nihongo/fjapanihon_words.html
で、もう一度確認してみていただけるとありがたいです。
Message-ID: <c3piv8$s26$1...@news00.iij4u.or.jp>
において、 すぎたさんは書きました。
> # 疑問点はフォローアップがついてるのでパス。(私も違和感無しに一票)
了解しました。
> > overflow: scroll;
>
> ちょっと気になったのですが、Gecko 系(Win98 Firebird, NN7)だと、
> ホイール及びキーボードによるスクロールが効かなかったです。
ホイールマウスに関しては、(大きい文字の)リンク項目を2回クリックすると
有効になることを後から発見しました。
有効状態で、画面をどこでもいいからクリックすると無効状態に戻ります。
> > <script type="text/javascript">
> > function init() {
> > if(document.all) { // IE
>
> CSS で全てまかなっている分には、script はいらないような・・・
>
> ためしに少し加工して(行を増やして) IE6sp1 で見てみましたが、
> うまく動作していませんでした。
> document.body を使用すると正しく動作するので、モードが違う
> のかもしれません。
>
>
> > <!--本来ならスクリプト本体をコメントアウトすべきですが、
> > そうすると、javascriptを一番動作させたいIEでの動作が
> > おかしいので、このようにしています。-->
>
> これもちょっとわからないのですが、IE6sp1 で、document.body
> を使用してスクリプトが動作することが確認できている状態で
> コメントを入れても、特に問題は無かったです。
アレ以上javascriptに手を入れるのは、はっきり言うと恐かったので、
やってません。
それと、
> ためしに少し加工して(行を増やして) IE6sp1 で見てみましたが、
> うまく動作していませんでした。
> document.body を使用すると正しく動作するので、モードが違う
> のかもしれません。
と
> > <!--本来ならスクリプト本体をコメントアウトすべきですが、
> > そうすると、javascriptを一番動作させたいIEでの動作が
> > おかしいので、このようにしています。-->
>
> これもちょっとわからないのですが、IE6sp1 で、document.body
> を使用してスクリプトが動作することが確認できている状態で
> コメントを入れても、特に問題は無かったです。
については、
Message-ID: <c3ovb2$22tg$1...@fw.hamaint.co.jp>
で、桂さんから指摘をいただいている
> .. PUBLIC "-//WWW3C//DTD でなく PUBLIC "-//W3C//DTD だ
が原因だったようです。
修正後、コメントアウトしても正しく動作することを確認しました。
>Eiji KATSURAさん>
>> こういうのは、http://validator.w3c.org/ で検証するのが、常道でしょう。
>
>http://validator.w3c.org/へ飛ぼうとしましたが、できませんでした。
http://validator.w3.org/ へどうぞ。
--
Masayasu Ishikawa
# なんで w3c.org じゃなくて w3.org かというと元々は W3O (World Wide Web
# Organization) だったから…
In message news:20040324010703.72...@uranus.interq.or.jp
"笠原 励(氷炎 雷光風)" <cun...@uranus.interq.or.jp> wrote ...
> http://validator.w3c.org/へ飛ぼうとしましたが、できませんでした。
validator は W3C のトップからもリンクが張られていますので、
www.w3.org にアクセスするのも手です。
In message news:20040324011030.7...@uranus.interq.or.jp
"笠原 励(氷炎 雷光風)" <cun...@uranus.interq.or.jp> wrote ...
> > ちょっと気になったのですが、Gecko 系(Win98 Firebird, NN7)だと、
> > ホイール及びキーボードによるスクロールが効かなかったです。
> ホイールマウスに関しては、(大きい文字の)リンク項目を2回クリックすると
> 有効になることを後から発見しました。
私の環境だと、上記の操作ではだめでしたが、フォーカスが関係してるのか、
<A> の少し手前でクリックして TAB でフォーカスを与えると、
ホイールが使えるようになりました。(Logitech 使ってますが、関係は不明)
ただ、これだと、フォーカスを与えた時点で、スクロールポジションが
移動してしまいます。
キーボードに関しては、フォーカスを与えてから、範囲選択(Shiftキー+
カーソルキー)を利用することでスクロールできましたが、強引かな・・・
> > document.body を使用すると正しく動作するので、モードが違う
> > のかもしれません。
今回の件は(今日compatModeを見つけたので(^^;;)
var b = (document.all && (document.compatMode == undefined || document.compatMode == "BackCompat"))
? document.body : document.documentElement;
の方が良いかもしれません。(IEなら、document.body.scrollTop でも十分かも)
また、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);
今回のケースではあまり意味を持ちませんが、テストとしては、
</body> の直前に大量の行を挿入して、div の height:100%
を超えるようにしてテストすると、JavaScript が動作しているか
確認できます。
> 修正後、コメントアウトしても正しく動作することを確認しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
だと、非標準モード(互換モード)で動作している点については、
認識しておいた方が良いと思います。
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">
を書き間違えるというのは、ちょっと情けなかったかも・・・
マルチフォローになっています。ご了承下さい。
Referencesに、Masayasu Ishikawaさんの書かれた、
<c3rhnl$jpk$1...@news.sfc.keio.ac.jp>を追加してます。
Message-ID: <c3rhnl$jpk$1...@news.sfc.keio.ac.jp>
においてMasayasu Ishikawaさんは書きました。
> >> こういうのは、http://validator.w3c.org/ で検証するのが、常道でしょう。
> >
> >http://validator.w3c.org/へ飛ぼうとしましたが、できませんでした。
>
> http://validator.w3.org/ へどうぞ。
ありがとうございます。後で、自分でもhtmlのチェックをしてみたいと
思います。
そうだったんですか・・・
W3Cの成り立ちまでは、実はロクに知らなかったんです。
覚えておきます。
Message-ID: <c3ru22$nh5$1...@news00.iij4u.or.jp>
において、すぎたさんは書きました。
> > http://validator.w3c.org/へ飛ぼうとしましたが、できませんでした。
>
> validator は W3C のトップからもリンクが張られていますので、
> www.w3.org にアクセスするのも手です。
なるほど。今回は、Masayasu Ishikawaさんの示していただいたアドレスで、
直接飛んで見ましたが、後で、www.w3.orgからもリンクを辿ってみたいと思います。
お二方、ありがとうございました。m(_)m
Message-ID: <c3s11d$ouv$1...@news00.iij4u.or.jp>
において、すぎたさんは書きました。
> > > ちょっと気になったのですが、Gecko 系(Win98 Firebird, NN7)だと、
> > > ホイール及びキーボードによるスクロールが効かなかったです。
> > ホイールマウスに関しては、(大きい文字の)リンク項目を2回クリックすると
> > 有効になることを後から発見しました。
>
> 私の環境だと、上記の操作ではだめでしたが、フォーカスが関係してるのか、
> <A> の少し手前でクリックして TAB でフォーカスを与えると、
> ホイールが使えるようになりました。(Logitech 使ってますが、関係は不明)
> ただ、これだと、フォーカスを与えた時点で、スクロールポジションが
> 移動してしまいます。
> キーボードに関しては、フォーカスを与えてから、範囲選択(Shiftキー+
> カーソルキー)を利用することでスクロールできましたが、強引かな・・・
ウチで使っているのは、mitsumiです。ドライバのバージョンは、1.50だった
と思います。