HTMLでのフレーム分割をiframeで行う方法【現役エンジニアが解説】
今回は、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というページを表示できない場合を考慮に入れ、未サポートであることを伝える代替テキストを用意しています。