☰

iframe を使用した HTML5 のフレームの代替 質問する

tag-icon • tag-icon jquery html iframe frameset
iframe を使用した HTML5 のフレームの代替 質問する

私は HTML5 の初心者で、調査を行った結果、 の使用は<frameset>時代遅れであることがわかりましたが、私が読んだところに<iframes>よるとそうではありません。それで、誰か私を助けてくれませんか。私は、示されている例と同じ結果を得たいのですが、 または<iframes>その代替品は<frameset>HTLM5 で非推奨ではありませんか?

<frameset cols="20%,*,">
    <frame src="menu.html">
    <frame src="events.html">
</frameset>

ベストアンサー1

フレームは、URL ナビゲーションとハイパーリンクに問題を引き起こすため、非推奨になりました。URL はインデックス ページ (フレームセットを含む) に移動するだけであり、各フレーム ウィンドウに何が含まれているかを指定する方法がなかったためです。今日、Web ページは PHP、ASP.NET、Ruby などのサーバー側テクノロジによって生成されることがよくあります。そのため、フレームを使用する代わりに、次のようにテンプレートとコンテンツをマージするだけでページを生成できます。

テンプレートファイル 

<html>
<head>
<title>{insert script variable for title}</title>
</head>

<body>
  <div class="menu">
   {menu items inserted here by server-side scripting}
  </div>
  <div class="main-content">
   {main content inserted here by server-side scripting}
  </div>
</body>
</html>

サーバーサイドスクリプト言語を完全にサポートしていない場合は、サーバーサイドインクルード（ＳＳＩ)。これにより、同じこと、つまり複数のソース ドキュメントから 1 つの Web ページを生成することが可能になります。

しかし、ウェブページの一部を別の「ウィンドウ」にして、必ずしも自分のサーバー上にない他のウェブページをロードできるようにしたい場合は、インラインフレーム。

次のように例をエミュレートできます。

フレームの例 

<html>
<head>
  <title>Frames Test</title>
  <style>
   .menu {
      float:left;
      width:20%;
      height:80%;
    }
    .mainContent {
      float:left;
      width:75%;
      height:80%;
    }
  </style>
</head>
<body>
  <iframe class="menu" src="menu.html"></iframe>
  <iframe class="mainContent" src="events.html"></iframe>
</body>
</html>

レイアウトを実現するにはもっと良い方法があるでしょう。私はCSSを使用しました浮く属性ですが、テーブルや他の方法も使用できます。

おすすめ記事