普段、残業なんて滅多にしない職場で働いている自分ですが、この２週間ほどは激務でした（どれぐらい激務だったかはいいません。あくまで個人的にそう思っただけで、中にはそんなの激務じゃないと言われそうなレベルの量なので）
それはともかく、その間にやっていた仕事がframesetやframeタグを使っているフレームを利用したHTMLファイルをHTML5化するというもの。しかし、知ってる人も多いと思いますが、framesetやframeタグはHTML5で廃止されてしまっています。とりあえず代替方法としてiframeタグを使うことになったのだけれども(この実装方法に突っ込まないでください。時間がなかったのでこうするしかなかった)、最初、うまい実装方法が思いつきませんでした。しかも、対応ブラウザはIE6以上と言われています(HTML5なのに、IE6以上って………)。
例えば、以下のようなコード。
<frameset rows="50,*,70" border="0" framespacing="0">
<frame src="header.html" name="header" id="header" scrolling="No" noresize>
<frame src="main.html" name="main" id="main" scrolling="auto">
<frame src="footer.html" name="footer" id="footer" scrolling="No" noresize>
<noframes><body>このページはフレームを使用しています</body></noframes>
</frameset>
サンプルページ
ヘッダとして上部に50px、フッタとして下部に70px、そしてメインのページをその間に入れたフレームページです。ヘッダとフッタは問題ありません。問題はメインページです。動的に高さを変更しなければいけないわけですが、うまい方法が思いつきませんでした。
最初はそれぞれのiframeをtable,tr,tdタグで囲って、tableの高さを100%にし、一番上のtrの高さを50px、一番下のtrの高さを70pxにしてみました。一見、うまくいったように思えたのですが、IE10以下でダメでした・・・。
次に考えたほうほうが、#mainをdivタグで囲み、そのdiv(#main_containerとする)をbodyと同じ幅と高さと位置にして、box-sizingをborder-boxにしたうえで、padding-topを50px、padding-bottomを70pxにしたうえで、#mainの高さと横幅を100%にしたらいけるんじゃ・・・なんて思ったけど、よくよく考えるとIE7ではbox-sizing非対応だったのでできません(IE6はもともとbox-sizing:border:box;と指定した時と同じ振る舞いだったはずです)。
困ったなぁ。どうしたらいいんだ・・・。と思いながらふと思いついた。先ほどの#main_containerのtopを50pxにして、bottomを70pxにしたらどうなるんだろう・・・。と。
結果、期待通り、上部に50px、下部に70px空いた要素となりました(てっきり、どっちも指定している場合、どっちかが優先されるもんだと・・・。CSSはある程度わかってきたと思ったんだけどなぁ。CSS界隈では常識だったりするんだろうか？)
というわけで、以下が実装結果。
CSS
body,html{
height:100%;
margin:0;
padding:0;
overflow: hidden;
}
iframe{
border:none
}
#header{
position:absolute;
top:0;
left:0;
height:50px;
width:100%;
}
#footer{
position:absolute;
bottom:0;
left:0;
height:70px;
width:100%;
}
#main_container{
position:absolute;
top:50px;
bottom:70px;
left:0;
width:100%;
/*IE6用*/
_top:auto;
_bottom:auto;
_padding-top:50px;
_padding-bottom:70px;
}
#main{
*position:absolute; /* IE7用 */
_position:relative; /* IE6用 */
width:100%;
height:100%;
}
HTML
<iframe src="header.html" name="header" id="header">header</iframe>
<div id="main_container">
<iframe src="main.html" name="main" id="main">main</iframe>
</div>
<iframe src="footer.html" name="footer" id="footer">footer</iframe>
IE6やIE7ではうまくいかないところもあったので、何度か試行錯誤してどのブラウザでも実装することができました。同じように左・中央・右にわけたフレームページでは下記のようになります。
HTML4
<frameset cols="60,*,80" border="0" framespacing="0">
<frame src="left.html" name="left" id="left" scrolling="No" noresize>
<frame src="main.html" name="main" id="main" scrolling="auto">
<frame src="right.html" name="right" id="right" scrolling="No" noresize>
<noframes><body>このページはフレームを使用しています</body></noframes>
</frameset>
HTML4:サンプルページ
HTML5
body,html{
height:100%;
margin:0;
padding:0;
overflow: hidden;
}
iframe{
border:none
}
#left{
position:absolute;
top:0;
left:0px;
width:60px;
height:100%;
}
#right{
position:absolute;
top:0;
right:0;
width:80px;
height:100%;
}
#main_container{
position:absolute;
left:60px;
right:80px;
top:0;
height:100%;
/*IE6用*/
_left:auto;
_right:auto;
_padding-left:60px;
_padding-right:80px;
}
#main{
*position:absolute; /* IE7用 */
_position:relative; /* IE6用 */
width:100%;
height:100%;
}
HTML5:サンプルページ
応用として、framesetの中にframesetがあるページも下記の通り。
HTML4:サンプルページ
HTML5:サンプルページ
ただし、最後のはIE6でうまく動きませんでした。こういうページの場合は、最初に作ったframe1-html5.htmlの中の#mainのsrc属性を、二つ目に作ったframe2-html5.htmlにするほうがいいかもしれません。
コメント
フッターも（header.html）と書かれてるのはご愛嬌ですかね
ただの間違いです……。
とりあえず気づいたので、愛嬌ということにしておきます(おい)。