【HTML初心者入門】frame・iframeの使い方を解説! | WEBCAMP NAVI
【11月の受講枠も残りわずか】

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

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

フレームを設定する

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

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

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

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

----------------------------------------------------------------------------------------------------------------------------------

転職成功率98%の【DMM WEBCAMP COMMIT】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

指定できる属性(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初心者入門】を参考にしてみてください。

 

----------------------------------------------------------------------------------------------------------------------------------

現在の仕事や育児を続けながらも、自身の新しい可能性を発掘してみませんか?
完全オンラインで最大1年間の転職サポートの付いた高品質カリキュラムで、仕事合間や土日時間を有効活用し、未経験から需要の高まるエンジニアを目指しましょう!
まずはお気軽に、無料カウンセリングへ!

キャリア発掘の第一歩
プロのキャリアアドバイザーに相談する!
※最短1分で申し込み可能

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

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

 

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

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

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

 

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

 

 <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を学ぶ6つのステップ」の記事を参考にしてください。

 

サンプル(iframe)

<!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><iframe src="testiframe.html" width="300" height="100" marginwidth="10" marginheight="10">
</iframe></div>


<div></body>
</html>

 

まとめ

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

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

 

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点