HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでサブウィンドウを作成するにはどうすればよいですか？

サブウィンドウ（フレーム）を作成するには、<frame>タグを使用します。HTMLの<frame>タグは、<frameset>タグの中で個々のフレームを定義するために用いられます。

<frame>タグを使用する際の注意点

注意： <frame>タグはHTML5では廃止<iframe>タグなどを使用するのが一般的です。

<frame>タグの主な属性一覧

属性値説明
frameborder0 または 1フレームの周囲に境界線を表示するかどうかを指定します。
marginheightピクセルフレームの上下の境界線とコンテンツ間の余白の高さをピクセル単位で指定します。例：marginheight="10"
marginwidthピクセルフレームのコンテンツと左右の境界線との間の余白をピクセル単位で指定します。
nameフレーム名フレームに付ける名前です。リンクのターゲット指定などに使用されます。
noresizenoresizeこの属性を設定すると、ユーザーはフレームのサイズを変更できなくなります。
scrollingyes / no / autoスクロールバーの表示動作を制御します。
srcURLフレーム内に表示するファイル（コンテンツ）の場所を指定します。

サブウィンドウ作成のサンプルコード

以下のコードを実行すると、左側にメニューページ、右側にメインページが表示される2分割のサブウィンドウを作成できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML frame Tag</title>
   </head>
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      <noframes>
         <body>
            お使いのブラウザはフレームに対応していません。
         </body>
      </noframes>
   </frameset>
</html>

HTML5環境での代替手段：<iframe>タグ

<frame>および<frameset>タグは廃止されたため、ページ内に別の文書を埋め込んでサブウィンドウのように表示したい場合は、<iframe>（インラインフレーム）タグを使用しましょう。<iframe>はHTML5でも標準的にサポートされており、ページの任意の位置に独立した表示領域を作成できます。

<iframe src="/html/main.htm" width="600" height="400" name="sub_window">
   この部分はiframeに対応していないブラウザで表示されます。
</iframe>

このように、古い技術の理解と併せて、現行標準である<iframe>の活用を心がけることで、より安全で互換性の高いWebページを構築できます。

  1. HTMLとCSSでフローティングレイアウトを作成する方法をわかりやすく解説

    フローティングレイアウトとはHTMLでフローティングレイアウトを作成するには、CSSのFloat（フロート）プロパティを使用します。Webサイトでは、コンテンツを見やすく表示するために複数のカラム（段組み）構成がよく採用されますが、CSS Floatはそのマルチカラムレイアウトを実現する手法のひとつです。フローティングレイアウトは、Webサイトのレイアウト設計で古くから広く使われている定番の手法です。要素にfloat: left;やfloat: right;を指定することで、要素を左右に寄せ、その横に他の要素を回り込ませることができます。以下は、ヘッダー・ナビゲーション・本文・フッターで構成さ

  2. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト