HTML

HTMLでiframeを使う方法【初心者向け】

HTML初心者向けに、【iframe】の使い方を解説した記事です。iframeタグは、src属性で表示させるファイルを指定します。widthとheightで幅と逆さも指定可能です。YouTubeの動画の埋め込みを例に説明します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLでiframeタグを使う方法について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方の記事をご覧ください。

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

<iframe>タグの使い方

・iframeタグ inline frame <iframe>〜</iframe>

特定のファイルをページの一部に表示させます。

・src属性

画像や文書など、表示させるファイルの出処を指定します。

・width属性：幅の指定

書いてある通りですが、iframeの幅を指定できます

・height属性：高さの指定

書いてある通りですが、iframeの高さを指定できます

例をみてみましょう。

「index.html」というファイルに<iframe>タグを書き足して、別に用意した「iframe.html」ファイルを組み込みましょう。今回は幅200px、高さ100pxのインラインフレームです。

<iframe src=”iframe.html” width=”200″ height=”100″></iframe>

iframe_tag

（※<iframe>タグ未対応のブラウザのために開始タグと終了タグのあいだに「このページはiframe対応ブラウザでご覧ください。」と注意書きを添えてあげましょう。万が一、インラインフレームが表示されなかった場合はこの文言が表示されます。）

iframeタグで、ページに別のページを表示することが出来るんですねー！

そうだよ。自分のサイトの更新情報とかをiframeタグ内で表示しているサイトもあるね。

自分のサイトだけじゃなくて、外部のサイトのページも取り込めないんですか？

できるよ。例として動画サイトのyoutubeの動画をサムネイル画像付きで表示してみよう！

動画の埋め込み

さてこの<iframe>タグですが、動画をページに貼り付ける際にもよく使われています。

例として、YouTubeの動画をiframeタグを使って表示させてみます。

iframe_ex

YouTubeの場合は、各動画ページの「埋め込みコード」にある <iframe>タグの始めから終わりまでをコピーしてHTMLのテキストに貼り付けます。

iframe_ex2

これをブラウザで確認してみると、動画が表示されましたね。

なお、widthとheightの値を変えれば、動画の大きさを自由にカスタマイズすることもできます。

今回はHTMLでiframeタグを使う方法についてご紹介しました。

HTMLについてさらに学びたい場合は、HTMLでimageタグを使って画像を表示する方法も合わせてご覧ください。

わあ！すごい！そのまま再生できますね。ページに動画も表示できるとコンテンツの幅が広がりそうですね。

そうだね。youtubeのようにiframeでコンテンツの配信を提供しているところはけっこう多いんだ。amazonとかの商品もページに張ることが出来るよ。

iframeタグは裾野が広いんですね～。

iframeは、埋め込みコンテンツとしての意味しかないけど、だからこそ汎用的に使われているのかもね。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

この記事を気に入って頂けたら
いいね！・フォローをお願いします

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...

CSS

HTMLでdlタグでnewsページを作る方法を現役エンジニアが解説【初心者向け】

HTMLでdlタグでnewsページを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

jQueryを使ってHTMLをオーバーレイ表示する方法を現役エンジニアが解説【初心者向け】

jQueryを使ってHTMLをオーバーレイ表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。その1つの解決策として、「レスポン...

CSS

HTMLでbrタグの使い方と正しい改行方法を現役エンジニアが解説【初心者向け】

HTMLでbrタグの使い方と正しい改行方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...

HTML

HTMLでリストを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでリストを使う方法について解説します。そ...

HTML

あわせてよく読まれている記事

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について紹介していきます。サイトのトップに動画を入れているサイトも増えてきているので、トレンドを抑えるためにも役立つ知識になるでしょう。 HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。目次動画の埋め込み方法実際に書いてみよう動画の埋め込み方法動画を埋め込むにはいろいろな方法がありますが、最も簡単に埋め込むだけであれば、<ifarme>タグを用いるのが一般的です。 <iframe>を使うと、動画の大きさから、URLまで設定でき、HPにアップロードしている動画だけでなく、「YouTube」にアップされている動画を埋め込むことができます。また、HTML5から<video>タグが実装されました。これは、今までの<iframe>タグにはなかった「loop」や「autoplay」といった機能が実装できます。上記2つのやり方を見ていきましょう。大石ゆかり videoタグって何でしょうか？田島悠介 HTML5から追加された、動画のためのタグなんだ。大石ゆかり youtubeの動画を自分のサイトで使う時は、iframeタグで書いてたんですけど。田島悠介そうだね。ただ、動画専用のタグだと色々な用途に使うことが出来るんだ。とりあえず、簡単に書いてみよう！ [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう実際にソースコードを書いてみて、Webブラウザーで確認をしましょう。動画を準備して、同じ階層においてください。下記の「sample.mp4」の部分を自分のビデオファイルと同じ名前にしましょう。 HTML -iframe- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <iframe width="560" height="315" src="sample.mp4" frameborder="0" allowfullscreen></iframe> </body> </html> HTML -video- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <video controls autoplay loop><source src="sample.mp4"></video>

HTML

JavaScriptでiframeを操作する方法を現役エンジニアが解説【初心者向け】

JavaScriptでiframeを操作する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。なお本記事は、オンラインブートキャンプフロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでiframeを操作する方法について詳しく説明していくね！大石ゆかりお願いします！ iframeとはインラインフレームの略で、ページ内に別のHTMLページを埋め込むことが出来る便利なものです。 src属性で指定した別ページをiframe内で表示させます。 CSSと組み合わせることで、表示させる枠を調整したり、内部コンテンツの調整したりも可能です。ただ、クロスドメインでの利用には注意が必要になるので気をつけて下さい。クロスドメインの場合はiframe内のDOMへのアクセスが制限されます。 JavaScriptでiframeを操作する方法 iframeにアクセスするには、普通にdocument.getElementById( );で要素を取得して利用します。内部のDOMへのアクセスでは、取得したオブジェクトに対してcontentWindow.documentで要素を取得します。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう index.html <!DOCTYPE html> <meta http-equiv="content-type" charset="utf-8"> <html> <head> <title>JavaScriptでiframeを操作する</title> </head> <body> <p><button onclick="iframe_test()">iframe内の操作を行います。</button></p> <iframe src="color_iframe.html" id="id_ifrem"></iframe> <P><button onclick="iframe_test2()">クロスドメインは変更できません。</button></p> <iframe src="https://maps.google.co.jp/maps?output=embed&q=東京タワー" id="id_ifrem2"></iframe> <script type="text/javascript"> function iframe_test(){ var o_iframe = document.getElementById('id_ifrem'); var color = o_iframe.contentWindow.document.getElementById('id_color'); color.innerHTML = "赤色に変えました。"; color.style.background = "red"; }; function iframe_test2(){ var o_iframe2 = document.getElementById('id_ifrem2'); alert("ここのアラートは出ます。次は出ません。"); var o_google = o_iframe2.contentWindow.document; alert("contentWindowが利用できず、このアラートはでません。"); }; </script> </body> </html> color_iframe.html： <!DOCTYPE html> <meta http-equiv="content-type" charset="utf-8"> <html> <head> <title>JavaScriptでiframeを操作する</title> <style> #id_color {background: blue;} </style> </head> <body id="id_color">iframe内に記載されています.</body> </html> ※index.htmlとcolor_iframe.htmlは同じフォルダーに配置して下さい。 contentWindowは、WEBサーバ上でないと機能しません。ローカルで確認する場合でも、WEBサーバを通して動作確認して下さい。筆者プロフィール小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプフロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

JavaScript

YouTubeの動画をHTML5に埋め込む方法を現役エンジニアが解説【初心者向け】

YouTubeの動画をHTML5に埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 YouTubeの動画をHTML5に埋め込む方法について詳しく説明していくね！大石ゆかりお願いします！動画をHTML5に埋め込む方法 HTMLに対して、videoタグを使用することで動画を簡単に埋め込むことが可能です。この場合、プラグインを使わずに動画再生ができます。 src属性により動画ファイルのアドレス・保存先を指定する、videoタグ内にwidthとheightでコンテンツの幅と高さを指定できます。また、再生方法も適宜変更することが可能です。 conrtols属性を使い、ビデオの再生や停止のボタンなどのユーザーインターフェースを表示できるでしょう。自動で再生したい場合にはautoplay属性を使用し、再生終了後にスタートに戻り、再生を再度行なう場合にはloop属性を使用できます。 YouTubeの動画をHTML5に埋め込む方法 iframeタグを使用することで、HTMLにyoutubeの動画を埋め込むことが可能です。 youtubeのホーム画面から適宜埋め込むyoutube動画を選択し、「共有」を選択、「埋め込む」を選択、表示されたiframeタグで書かれたコードをコピーします。コピーしたコードをbody内に直接貼り付けることで、youtube動画を表示できます。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう imageフォルダの中にあるmp4形式の動画を埋め込む場合は、下記のように記述します。 <body> <video src="image/video.mp4" controls="controls"></video> </body> youtube動画を埋め込む場合 <body> （youtubeからコピーしたifarmeタグのコードをそのまま記述する。例　<iframe　◯◯></iframe>） </body> 執筆してくれたメンター木村勇土 TechAcademyの現役メンター。現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。大石ゆかり YouTubeの動画をHTML5に埋め込む方法がよく分かったので、良かったです！田島悠介ゆかりちゃん、今後も分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

HTML

HTML5で廃止されたframe要素と代替要素を現役エンジニアが解説【初心者向け】

HTML5で廃止されたframe要素と代替要素について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょうなお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTML5で廃止されたframe要素と代替要素について詳しく説明していくね！大石ゆかりお願いします！ HTML5で廃止されたframe要素とは HTML5では、以下のタグが廃止されています。 frameタグ framesetタグ noframesタグ frameset タグを使用することで分割するフレームの枠を構成することができます。そして、そのタグの中にsrc属性を用いてフレームに表示するページのURLを記述し、固定されたフレームの中に任意のページを表示することが可能です。 CSSを使わずに作成することが出来るため、多くのホームページで使われていました。しかし、HTMLの見た目に関わる部分はCSSで記述することになり、HTML５では廃止とされました。新しい代替のiframe要素とは HTML５ではframeタグの代わりiframeタグを使用していきます。 iframeタグは、HTML４でも使用されていました。特性としてramesetタグとは違い、１つの文章などの中で独立して表示させることができるため、柔軟性の高いタグです。 iframeは埋め込みの地図や埋め込み動画を作成したい場合にも多様されています。 GoogleマップやYouTubeをHTMLに埋め込む場合には、当該サイトから埋め込み用のアドレスを取得可能です。そのアドレスには、標準でiframeタグで囲われた埋め込み用アドレスをコピーすることができます。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中HTML5で廃止されたその他の主な要素 HTML５で廃止された要素の多くは、CSSで表現できるものが多くあります。 bigタグやsmallタグはHTMLでは廃止され、CSSで表記しなければなりません。 smallタグはHTML５では、注釈を意味するようになり、タグ自体の意味が変わりました。他には、centerタグ・fontタグも見た目の部分の変更用のタグとして多用されていました。中央に寄せる・文字のサイズや色を変える等はCSSで記述することが必要です。他には、取り消し線を表すstrike、スクロールをさせるmarquee、入力欄を用意するisindexなども廃止となりました。執筆してくれたメンター木村勇土 TechAcademyの現役メンター。現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。大石ゆかり HTML5で廃止されたframe要素と代替要素がよく分かったので、良かったです！田島悠介ゆかりちゃん、これからも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているため、参加してみてください。

HTML

すぐ分かる！HTMLで定義リスト（dlタグ）を使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLで定義リストを使う方法について解説します。そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方の記事をご覧ください。また、他のリストの使い方も合わせてご覧ください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 HTMLで定義リストを使う方法定義リストの<dl>タグは何か<dt>に対してその内容<dd>がセットになっているリストを意味します。セットで使うタグなので、セットで覚えてしまいましょう。・情報がセットになったリスト description list <dl>〜</dl> <dt>タグと<dd>タグをセットにまとめて一つのリストをつくります。なお、dlタグは以前はdefinition list（定義リスト）として扱われていましたが、最新バージョンのHTML5ではdescription list（記述する・描写するリスト）というより汎用性をもった意味に変わりました。・項目名 description term <dt>〜<dt> <dd>タグで説明される用語や文章を意味します。・内容や説明文 description,definition <dd>〜</dd> <dt>タグを説明する言葉や文章が入ります。 1つずつ例をみてみましょう。大石ゆかり定義リスト？他にもリストタグがあったような気がするんですが・・・。田島悠介細かいんだけど、ulは順不同リストタグ、olは順序リストタグ、dlは定義リストタグ(記述リストタグ)なんだよ。大石ゆかりわかりづらいです。ulはメニューバーに使うのは何となく覚えているんですけど。田島悠介とりあえずdlタグの例を実際に見てみよう！ <dl>タグの使い方 <dl>タグを使ってQ&Aページをつくってみましょう。 <dl> <dt>質問1</dt> <dd>答え1</dd> <dt>質問2</dt> <dd>答え2</dd> <dt>質問3</dt> <dd>答え3</dd> </dl> <dd>タグでかこまれた答えの部分がインデント（字下げ）され、質問に対する答えのリストができました。他に、<dl>タグを使って用語集をつくることもできます。例えばこのように書きます。 <dl> <dt>HTML</dt> <dd>Webブラウザに文字を表示させるための言語</dd> <dd>文書の構造を示すために書かれる</dd> <dt>CSS</dt> <dd>文書の見た目を決めるために書かれるもの</dd> <dd>デザインを決める役割をもつ</dd> </dl> すると、<dd>タグで囲まれた部分がインデント（字下げ）されました。ブラウザ上の見た目は「項目名に、字下げされた内容が表示されたもの」ですが、コンピューター上では<dl>タグでかこまれた部分がまとまりを持った一つのコンテンツとして意味を持つものになります。見た目が変わらないからといって<p>タグや<br>タグを使ってリストをつくるよりも、タグを正しく使い分けたほうが、ページがすっきりして管理がしやすくなる上に、Web上でもきちんと整理された質の高いページだと認識されます。項目(dt)と内容(dd)がセットになっているリスト(dl)として覚えておきましょう。今回はHTMLで定義リストを使う方法についてご紹介しました。さらにHTMLの基礎を学びたい場合は、HTMLでリストを使う方法も合わせてご覧ください。大石ゆかり dlタグはQ&Aや用語集に使うんですか？田島悠介そうだよ。語句や項目(dtタグ)と文章(ddタグ)の組み合わせなんだよ。大石ゆかり何となくイメージ出来ました！他に使われている箇所ってないんですか？田島悠介お問い合わせフォームなんかもdlタグが使われているケースが多いね。また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

HTML

HTMLで引用タグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLで引用タグを使う方法について解説します。そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方の記事をご覧ください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。引用タグの種類 HTMLでは、引用文であることを明示するために「引用タグ」を使うことがあります。いくつか方法があるので、その方法を覚えておきましょう。・まとめて引用する blockquote <blockquote>〜</blockquote> 長い文章をまとめて引用したいときにつかいます。・一部を引用する quote <q>〜</q> 文の一部や短い文章を引用したいときにつかいます。・引用元を表記する cite 引用した文章がどこから引用したものであるかを示します。大石ゆかり引用元のアドレスって書かなければだめなんでしょうか？田島悠介引用した場合は、やっぱり引用元を書かないとだめだよ。著作権にも関わってくるし。大石ゆかりあー！そうですね。他の人が書いた内容だったの忘れてました。田島悠介著作権もあるけど、実はまだ理由があるんだ。くわしくはページ最下部で！引用タグの書き方どんな種類があるかわかったら、例をもとに書いていきましょう。まずは、<blockquote>タグです。 <blockquote> <p>インターネットによって時間と場所の制約から解き放たれたように、プログラミングを普及させることで個の選択肢、可能性をもっと伸ばせるはず。プログラミング教育を通じて世界を豊かに。それが私達のミッションです。</p></blockquote> <blockquote>タグは長い文章をそのまままとめて引用する際に使います。ブラウザ上では上下の余白とインデント（字下げ）が表示され、引用であることが示されました。続いて、一部を引用する<q>タグです。 <p>ある人は言いました。<q>何もしなければ、何も起こらない</q></p> qタグで囲んだ部分がかぎ括弧によって表示されました。なお、以前はqタグで書くと、全て「” ”（ダブルコーテーション）」で表示されていましたが、最近では日本語に対応してかぎ括弧で表示されるようになりました。このサンプルコードのように、言語を<html lang=”ja”>とすると、かぎ括弧（）で表示されます。また、<blockquote>タグも<q>タグも、cite属性を付け加えることによって出典先や引用元を指定することができます。例えばこのように書きます。 <blockquote cite=”https://www.kiramex.com/service/”> このとき、cite属性で記述した引用元はブラウザ上には反映されません。ただ、引用元が記録されているとWebページを管理するときに参考になるので、何かを引用する際にはぜひcite属性をつかって引用元のURLを記述しておきましょう。今回はHTMLで引用タグを使う方法をご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでリストを使う方法も合わせてご覧ください。大石ゆかりあの～！引用タグって必要なんでしょうか？田島悠介それは、どういうこと？大石ゆかり a(アンカータグ)でリンクを張って、テキストで引用ですって書いても、引用文だってわかってもらえますよね？田島悠介ただ、それだと検索エンジンにはわからないよね。引用タグって言うけれど、重複ではないよって意味もあるんだよ。大石ゆかりなるほど！重複だと思われたら、検索エンジンからペナルティがあるかもしれないですもんね！また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

HTML

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでiframeを使う方法【初心者向け】

<iframe>タグの使い方