HTMLファイルにiframeタグを記述すると埋め込みたい外部のページを表示することができます。
iframeタグをHTMLでどのように記述すると埋め込みたいページを表示することができるのか、基本的なiframeタグの使い方を理解することで埋め込みたいページを表示することができます。
iframeとはHTMLのタグ
iframeとはHTMLのタグです。Inline FRAME(インラインフレーム)を略してiframeです。アイフレームとも言います。
iframeタグをHTML文書内に記述してsrc属性で別のHTMLファイルや外部ページのURLを指定するとインラインフレームが形成された中にsrcに指定した埋め込みたいページを表示することができます。
iframeがHTML文書内で使用されている分かりやすい例としては、YouTubeの動画やグーグルマップの地図などがiframeの埋め込みなのでイメージしやすいかと思います。
またHTML4.01では非推奨とされていたiframeですが、HTML5になってから非推奨ではなくなりiframeタグをHTMLで使用できます。
HTMLでiframeタグの使い方
HTMLでiframeタグはHTMLファイルのbody要素内に開始タグと終了タグを記述します。
<iframe></iframe>
そしてiframeタグの開始タグには属性を記述します。
src属性
<iframe src="埋め込みたいページのURL"></iframe>
または
<iframe src="埋め込みたいファイルのパス"></iframe>
iframeの属性でsrcの使い方は、値にインラインフレームで表示したいWebページのURL、またはファイルパスを指定します。iframeタグでのsrc属性は埋め込みたいページを表示するために必ず必要です。
widthとheight
<iframe src="URLまたはファイルパス" width="450" height="350"></iframe>
widthとheightは値に数値をピクセル数で記述します。
iframeの属性にwidthとheightを記述しない場合は初期値の高さが150pxで幅は300pxのサイズでインラインフレームが形成されます。
sandbox
sandbox属性を指定するとインラインフレーム内の動作の全てに制限がかかります。例えば検索フォームが使えなくなるとかです。
sandboxの値を空で記述した場合は個別に指定できる値が全て制限される使い方ができます。
全ての制限ではなく任意の数だけ指定する場合には、キーワードを半角スペースで区切って記述することで、そのキーワードの機能が使えるようになります。
iframeのsandbox属性はMDNの<iframe>: インラインフレーム要素のページに記載のsandboxに細かい説明があるので読んでみてください。
iframeタグで埋め込みたいページを表示する
iframeタグの使い方の理解が深まるかもしれないのでサンプルのHTMLファイルを作成してHTMLのiframeタグで埋め込みたいページを表示するやり方の流れを説明します。
<iframe src="https://shu-sait.com/"></iframe>
iframeというフォルダを作成した中のindex.htmlでbody要素にiframeタグを記述します。
iframeの開始タグにはsrc属性の値に埋め込みたいページのURLを指定します。例として、このブログのトップページのURLを指定しています。
index.htmlを保存してブラウザで表示確認するとiframeのsrcに指定したブログのトップページがインラインフレーム内で表示します。
この場合の表示サイズはiframeの属性にwidthとheightを記述していないので、高さが150px、幅が300pxのサイズで表示します。
<iframe src="https://shu-sait.com/" width="450" height="350"></iframe>
任意のサイズで表示したい場合には例えばwidth=”450″ height=”350″のように記述することで指定した幅と高さのインラインフレームを表示できます。
iframe{
width: 450px;
height: 350px;
border: none;
}
iframeの幅と高さのサイズをiframeタグに記述するのではなくCSSで指定することもできます。CSSファイルで上記のCSSのようにwidthとheightをiframeセレクタを作り指定すると、HTMLで指定したのと同じサイズのインラインフレームが表示できます。
iframeセレクタにborder: none;の記述していますがborder: none;はインラインフレームの枠を消したい場合に記述します。
YouTube動画をiframeで埋め込みたい場合
iframeタグで埋め込みたいページを表示すると言っても、誰かのウェブサイトをページごとirameタグでインラインフレーム表示させるのはあまり見ることがないかもしれません。
よく見かけるとしたらYouTubeの動画とかグーグルマップの地図あたりをHTMLのiframeで表示していることが多いです。
そこでYouTube動画をiframeで埋め込みたい場合のやり方です。HTMLのコピペで済みます。
YouTubeのページを開きHTMLファイルに埋め込みたい動画を探したら、その動画右下にある「共有」をクリックします。
「埋め込む」をクリックするとiframeタグでマークアップされているコードが表示します。
コピーしてYouTube動画を表示させたいHTMLファイルでbody要素内の任意の場所に貼り付けます。
そうするとYouTube動画をiframeで埋め込むことができ表示ができます。
iframeでグーグルマップを埋め込む
iframeでグーグルマップを埋め込む場合もHTMLコードのコピペで済みます。
グーグルマップを開いて左上の「Googleマップを検索」に目的の場所を入力してEnter。
「共有」をクリックすると「地図を埋め込む」があるのでクリックするとiframeタグで記述してるHTMLをコピーできます。
コピーしたGoogleマップのiframeのコードは表示させたいHTMLファイルでbody要素内の任意の場所に貼り付けます。
するとグーグルマップをiframeで埋め込むことができ表示することができます。
まとめ
そんなに難しいHTMLの記述をすることなくiframeタグをHTMLで記述して埋め込みたいページを表示することができますが、場合によっては埋め込みたい外部サイトのURLをiframeタグで埋め込んでも「アクセス拒否」になりインラインフレームで表示できないことがあります。
iframeで表示できないのは、その外部サイトがセキュリティ対策としてX-Frame-Optionsを使用してiframeの表示ができないようにしていることが多いので、iframeを使用する知識として覚えておくと良いですね。
