「iframeタグってどうやって使うの」や「別のホームページや動画を自分のページに埋め込むにはどうしたらよいの」と悩んでいませんか？
ここでは、iframeタグの使い方を、初心者向けに分かりやすく解説します。
ホームページを作るときに、別のページや外部のコンテンツを表示したいことがありますよね。
そんなときに役立つのが、「iframeタグ」です。
ここでは、iframeタグを使い方を分かりやすく解説するので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- iframeタグの基礎知識
- iframeタグを使ったレスポンシブデザインの実現方法
- iframeに関するよくある質問（FAQ）
- 【まとめ】iframeタグとは
|
iframeタグの基礎知識
まずは、iframeタグの基礎知識からお伝えします。
iframeタグとは
iframeタグは、ホームページの中に、別のページや動画を表示するタグです。
読み方は、「アイフレーム」と読みます。
iframeタグの基本的な書き方
iframeタグの書き方は、下記のとおりです。
■ <iframe> タグの記述例
|
<iframe src="https://torebook.jp/" width="500" height="200"></iframe>
|
■ ホームページ上の表示
上記のように、iframeタグを使うと、ホームページの中に窓（フレーム）を作って、その中に別ページを表示させることができます。
たとえば、src で指定している https://torebook.jp/ は、私が運営している別のサイトになりますが、そのサイトが、窓（フレーム）の中に表示されていますよね。
iframeタグを使うと、このように、ホームページの中に、別ページを表示させることができます。
iframeタグを使ったレスポンシブデザインの実現方法
ここでは、iframeタグを使ったレスポンシブデザインの実現方法をお伝えします。
レスポンシブデザインとは
レスポンシブデザインとは、スマホやタブレット、パソコンなど、いろいろな画面サイズに合わせて、見やすくページを表示する方法です。
iframeタグを使ったときに、どの画面サイズでも見やすくホームページを表示することもできます。
iframeを幅いっぱいに広げる方法
iframeを使うとき、画面の幅に合わせて大きさを変えたい場合は、`width`の値を「100%」に設定します。
これで、iframeは画面の幅に合わせて広がります。
|
<iframe src="https://torebook.jp/" width="100%" height="400"></iframe>
|
このように書くと、iframeは画面の幅にぴったりと合わせて表示されます。
なお、高さは、コンテンツに合わせて自由に設定してください。
高さを調整する方法
高さも自動で調整したいときは、少し工夫が必要です。
CSSを使って、iframeを包む親要素に「アスペクト比」というものを設定します。
たとえば、16:9のアスペクト比を使うと、横長の動画やページがきれいに表示されます。
|
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://example.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
|
このコードでは、iframeの親要素に「高さ0」「縦横比56.25%（16:9の比率）」を設定しています。
これにより、iframeは画面の幅に合わせて広がりつつ、高さも自動で調整されます。
iframeに関するよくある質問（FAQ）
最後に、iframeに関するよくある質問（FAQ）をご紹介します。
Q1: iframeタグを使うと、ページが遅くなりますか？
iframeタグを使っても、ページが遅くなることはありません。ただし、表示するコンテンツが重い場合、読み込みに時間がかかることがあります。
その場合、表示するコンテンツを軽くするか、`loading="lazy"`という属性を使って、ページが開かれたあとにコンテンツを読み込むように設定するといいでしょう。
Q2: iframeで表示したいページが表示されません。
まず、`src`に書いたURLが正しいか確認してください。それでも表示されない場合、表示したいページがiframeでの表示を禁止している可能性があります。
この場合、別の方法でコンテンツを表示することを考えてください。
Q3: iframeのサイズを変えたいけれど、どうすればいいですか？
iframeのサイズは、`width`と`height`の値を変更することで簡単に調整できます。
また、画面の幅に合わせて自動でサイズを変えたい場合は、`width`を「100%」に設定し、レスポンシブデザインの方法を参考にしてみてください。
Q4: iframeタグを使うときに注意することはありますか？
iframeタグを使うときには、信頼できるページを表示するようにして、不安なときはiframeを使わないことも考えてください。
Q5: iframeの中身をスクロールさせることはできますか？
はい、iframeの中身をスクロールさせることができます。デフォルトでは、内容がiframeに収まりきらない場合、自動でスクロールバーが表示されます。
もしスクロールバーを常に表示したい場合は、`scrolling="yes"`という属性を追加するといいでしょう。
【まとめ】iframeタグとは
iframeタグとは？別ページを埋め込むフレームの使い方！の内容は、いかがでしたでしょうか？
iframeタグは、ホームページの中に、別のページや動画を表示するタグです。
たとえば、youtubeの動画や Google map をホームページに埋め込むときに、iframeタグを使います。
ホームページの中に、簡単に別ページや動画を埋め込むことができるため、iframeタグはとても便利です。
とても実用的なタグであるため、ぜひ覚えておいてくださいね。
