[報告 2/2]フレーム非対応のブラウザと擬似フレーム動作
どうも。氷炎 雷光風(ひえん らいこふ)こと笠原です。
報告が遅れてすみません。m(_)m
fj.net.www.authoring,fj.net.www.browsers,fj.comp.lang.javascript
へのクロスとFollowup-To:fj.net.www.authoringとなってます。
Message-Id: <20040317151327.7659689.1869705058@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===================
ではでは。
--
笠原 励(氷炎 雷光風/ひえん らいこふ)
cuncuku@uranus.interq.or.jp −受信専用−cuncuku@yahoo.co.jp
オリジナルストーリーの感想は、if_tlw-lj@infoseek.jpまで。
Subjectに「番外編」とあれば、ほぼオリジナルストーリーです。
Fnews-brouse 1.9(20180406) -- by Mizuno, MWE <mwe@ccsf.jp>
GnuPG Key ID = ECC8A735
GnuPG Key fingerprint = 9BE6 B9E9 55A5 A499 CD51 946E 9BDC 7870 ECC8 A735