【HTML初心者入門】frame・iframeの使い方を解説！

2024.01.04

HTMLの勉強をしている人向け！「frame・iframe」の使い方や注意点について紹介していきます！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

フレームを設定する

フレームもしくはインラインフレームを設定するための要素です。

frame要素は、ウィンドウの分割を指定するframeset要素内で使用します。ブラウザ画面を分割するイメージです。

iframe要素は、インラインフレームの名の通り、文書内の好きな位置にフレーム領域を作りその中に別の文書を表示します。ブラウザ画面に窓のように表示されるイメージです。

・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選！」の記事を参考にしてください。

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

指定できる属性(frame)

1. src

表示する文書の指定を行います。

2. longdesc

フレームを説明した文書へのリンクを指定します。

3. name

フレームの名前を指定します。

4. noresize

この属性を指定すると、フレーム表示サイズの変更を禁止します。

5. scrolling

スクロールバーの表示方法を指定します。 “yes” ：常に表示する “no” ：常に表示しない “auto”：必要に応じて表示する（初期値）

6. frameborder

境界線の表示方法を指定します。 “0”：表示しない “1”：表示する（初期値）

7. marginwidth

フレーム内の余白（左右）をピクセル数で指定します。

8. marginheight

フレーム内の余白（上下）をピクセル数で指定します。

指定できる属性(iframe)

1. src

表示する文書の指定を行います。

2. longdesc

フレームを説明した文書へのリンクを指定します。

3. name

フレームの名前を指定します。

4. width

表示するフレームの幅を指定します。

5. height

表示するフレームの高さを指定します。

6. scrolling

スクロールバーの表示方法を指定します。 “yes” ：常に表示する “no” ：常に表示しない “auto”：必要に応じて表示する（初期値）

7. frameborder

境界線の表示方法を指定します。 “0”：表示しない “1”：表示する（初期値）

8. marginwidth

フレーム内の余白（左右）をピクセル数で指定します。

9. marginheight

フレーム内の余白（上下）をピクセル数で指定します。

・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。こちらのよくある間違いを紹介！【HTML初心者入門】を参考にしてみてください。

インラインフレームの代替内容

フレームを利用できないブラウザでは、iframe要素の内容が代替として使用されることになります。

HTML

[html]<iframe src="example.html"></span>

<span style="font-family: Consolas, Monaco, monospace;">ここに代替の内容を記述します</span>

<span style="font-family: Consolas, Monaco, monospace;"></iframe>[/html]

フレームを利用できるブラウザでは、この要素の内容は無視されます。代替の内容には、フレームに表示される文書へのリンクなどを配置しておくといいでしょう。

HTML [html] <iframe src="news.html"></span> <span style="font-family: Consolas, Monaco, monospace;"><a href="news.html">ニュースを表示する</a></span> <span style="font-family: Consolas, Monaco, monospace;"></iframe>[/html]

・学習ステップを確認したい方は、「【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

サンプル(iframe)

HTML

[html]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>[TEST]frame/iframe</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#00ff00" alink="#0000ff"></div>

<div></body>
</html>[/html]

まとめ

初心者の方向けにframe・iframeタグを紹介していきましたが、いかがでしたか？

nameタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね！

【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き

【初心者向け】HTMLの練習ができる学習サイト8選！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする

資料請求一覧はこちら