HTMLでのフレーム分割をiframeで行う方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでのフレーム分割をiframeで行う方法について、フレームページとメニュページの作り方に分け、簡単に解説していきます。

フレームページの作り方

HTML5では、iframe要素でフレームページを作ります。

別のフレームへのリンクに対応させるため、各フレームのname属性には値を指定します。

<div style="position:absolute;top:0;left:0;width:25%;height:100%;">
    <iframe src="menu.html" name="frame1" style="width:100%;height:100%;border:none;"></iframe>
</div>
<div style="border-left:1px solid #000000;position:absolute;left:25%;top:0;right:0;height:100%;">
    <iframe src="contents1.html" name="frame2" style="width:100%;height:100%;border:none;"></iframe>
</div>

上記のコードでは、左側のメニューと右側のコンテンツの2つのフレームを持つページを表示しています。

メニューページでのリンク

フレーム内のページからは別のフレームのページを遷移させることができます。

事前に付けた各フレームのname属性の値を、aタグ等のtarget属性の値に指定することで実現できます。

<p><a href="contents1.html" target="frame2">コンテンツ1</a></p>
<p><a href="contents2.html" target="frame2">コンテンツ2</a></p>

上記のコードでは、メニューのフレーム内から、コンテンツのフレームのページを遷移させるリンクを表示しています。

iframe非対応の場合に備える

古いブラウザ等ではiframe要素が非対応の場合があり、フレームを利用できないことがあります。

src属性の値のページを表示できない場合に備え、開始タグと終了タグの間に代替テキスト等を記載しておきます。

<iframe src="hoge.html">このブラウザではフレーム表示のサポートがされていません。</iframe>

上記のコードでは、hoge.htmlというページを表示できない場合を考慮に入れ、未サポートであることを伝える代替テキストを用意しています。