最強のスマホ・パソコンライフ: HTML5で廃止された【frame要素】の代わりにobject要素を使用する記述方法‐HTML・CSSを学ぶ

HTML5で廃止された【frame要素】

私のホームページでは、このフレーム要素を結構使用していて、ある日サイトを表示してみたらこのフレームのところが何かおかしな表示になっていました。

今は元に戻って正常に表示されていますが、なぜ表示が崩れていたのかはよく分かりません。何れこの要素が正常に機能しなくなる日がやってきます。HTML5では廃止の指定をされているのです。

HTML4.1で作成されたホームページでは非常に多く使用されているframe要素はフレーム枠の中に指定のページを表示するための要素です。HTML5で廃止された要素タグは、まだ他にも数種類の要素とその属性も含めるとかなりの数に上ります。

今はまだサポートされていて正常に機能しますが、もし完全に廃止されたら今までのホームページに多大な影響を及ぼします。

個人でホームページを運営されている方にとってはページ数にも依りますが、直ぐに対応できる問題ではないので今から少しずつ編集していきたいと思います。

私のホームページで実際はiframeになっていたのですがデザインのところで廃止されたタグが使用されていたのでやはりcssで書き換えが必要でした。例えばframeborder、marginheight、marginwidth、scrollingなどの記述が廃止となっています。

<frame>タグを含めて以下の３つのフレーム関連のタグがHTML5では廃止の指定をされています。この要素を組み合わせてフレームを構成しています。

<frame>

<frameset> /*フレームの分割*/

<noframes> /*フレームが表示されなかった時の代わりの表示*/

HTML5では<frame>タグの代わりに<ifreame>タグを使用します。「i」が付いただけなのかな？廃止の意味が分からないです(笑)。このifreameもHTML4.01で非推奨だったので、今使用しても大丈夫だろうかと不安になってきます。

ここでは、iframeでは無く、object要素を使用したやり方について検証してみます。iframe要素を使用してフレームに他のテキストページを表示する方法については下記のリンクを参考にしてください。

iframeを使用して他のページのhtmlファイルを呼び込む記述方法よりはobjectを使用して他のページのhtmlファイルを呼び込む記述方法の方が簡単そうに思えたのでこちらを選択してみました。

下記がobject要素を使用したHTMLです。フレームにメニューページを表示してみます。objectに対応していないブラウザがあったときに、テキストを表示して別ウィンドウでメニューページを開くように誘導表示します。

<p>メニューを表示します</p>

<p>ご覧の環境では、object要素がサポートされていないようです。<a href="text/menu.html" target="_blank">menuを別ウィンドウで開いてください</a></p>

</object>

以下の私の更新途中のホームページで、object要素が正常に機能するかどうかを見てみました。正常に機能して表示されました。(^o^)。

この方法はテキストファイルの他、画像やアイコン、動画などにも応用できます。