BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
今回ご紹介する内容は「ページの一部にほかのHTMLを表示する方法」についてです。
方法は簡単です!
iframe要素を使って、HTMLページに他のHTMLファイルを読み込んで表示するだけ。

HTML

iframeタグは、HTMLファイル内に別のHTMLファイルを読み込んで表示させるときに使用します。
読み込むHTMLファイルは、iframeのsrcで指定します。
また、iframeで読み込まれるHTMLの表示サイズはwidth,height属性で指定できます。
特に指定する必要がなければ省略してください。

利用シーン

  • ページ内に別のHTMLを読み込みたいとき
  • ページ内の一部だけをスクロールできるようにしたいとき

注意点

iframeは便利ですが数点注意することがあります。

読み込んだHTML(サブHTML)のなかにリンクが含まれているときは注意

iframeで読み込みされるサブHTMLに含まれるリンクをクリックすると、リンク先はそのiframeの中で表示されます。
もし、iframe内のHTMLに含まれるリンクをクリックして、リンク先をベースHTNLの方に表示したい場合は、そのリンクのaタグに「target=”_top”」を追加します。

iframeのCSSを変更しよう

iframeは何もCSSを適用しないと少し凹んだようにに見える影付きのボーダーラインがついてしまいます。
ボーダーラインを調整する場合は、ペースHTMLのiframeに適用されるCSSにborderプロパティを適用します。

まとめ

今回紹介する方法は実務で使う機会は少ないかもしれませんが、PHPを使えない状態などでは有効な方法なので、頭の片隅においておくといいと思います。
超簡単な方法なので初心者の方でもすぐに実装できます!試してみてください!