フレームページをHTML5化する方法

普段、残業なんて滅多にしない職場で働いている自分ですが、この２週間ほどは激務でした（どれぐらい激務だったかはいいません。あくまで個人的にそう思っただけで、中にはそんなの激務じゃないと言われそうなレベルの量なので）

それはともかく、その間にやっていた仕事が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%;
}