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

HTMLのタグとは？使い方と主な属性を解説

<frame>タグは、フレームを作成するために使用されるタグで、<frameset>要素の中で1つのウィンドウフレームを定義します。

注意： <frame>タグはHTML5で廃止（非推奨）されています。現在のWeb開発では、代わりに<iframe>を使用することが推奨されています。

<frame>タグの主な属性

<frame>タグで使用できる主な属性は以下の通りです。

属性説明
frameborderフレームの周囲に境界線を表示するかどうかを指定します
longdescフレームの内容に関する詳細な説明が記載されたページへの参照を指定します
marginheightフレームの上下のマージンを指定します
marginwidthフレームの左右のマージンを指定します
nameフレームの名前を指定します
noresizeフレームのサイズを変更できないように指定します
scrollingフレーム内にスクロールバーを表示するかどうかを指定します
srcフレーム内に表示するドキュメントのURLを指定します

それでは、このタグを実装する具体的な例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<frameset cols="30%,30%,20%,20%">
    <frame src="https://www.tutorialspoint.com/codingground.htm">
    <frame src="https://store.tutorialspoint.com/">
    <frame src="https://www.tutorialspoint.com/tutorialslibrary.htm">
    <frame src="https://www.tutorialspoint.com/programming_examples/">
</frameset>
</html>

出力結果

上記のコードを実行すると、各フレームに異なるページが個別に表示されます。

HTMLの frame タグとは？使い方と主な属性を解説

コードの解説

上記の例では、framesetの中に4つのフレームを配置しています。

<frameset cols="30%,30%,20%,20%">
    <frame src="https://www.tutorialspoint.com/codingground.htm">
    <frame src="https://store.tutorialspoint.com/">
    <frame src="https://www.tutorialspoint.com/tutorialslibrary.htm">
    <frame src="https://www.tutorialspoint.com/programming_examples/">
</frameset>

cols属性で指定したパーセンテージに基づいて、frameset内の各フレームには以下のように幅が割り当てられます。

  • 1つ目のフレーム：全体の30%
  • 2つ目のフレーム：全体の30%
  • 3つ目のフレーム：全体の20%
  • 4つ目のフレーム：全体の20%

まとめ

<frame>タグは、かつて複数のHTMLドキュメントを1つの画面に分割表示するために広く使われていましたが、HTML5では廃止されました。学習目的として知っておくと良いですが、実際の開発では<iframe>やCSS Grid、Flexboxなどのモダンな手法を使ってレイアウトを構築しましょう。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"