今回はHTMLのiframeについて解説をしていきます！
iframeを使うことで一つのWebサイトの中でさらに別のWebサイトを読み込むことが出来ます。
またYouTubeやGoogle Mapsの埋め込みなども、iframeを使われています。
この記事では、
・iframeとは
・iframeの基本的な使い方
・CSSでiframeをカスタマイズする方法
について解説をしていきます。
難しいと思われがちなiframeですが、しっかりと易しく解説していくのでぜひご覧ください！
iframeとは
まずはiframeとは何かを見ていきましょう。
iframeでは指定したページを別のページでそのまま表示させることが出来ます。
こちらをご覧ください。
こちらは侍エンジニアのトップページにある、気になったことをチャットでその場で聞くことができるサービスです。
このサービスは外部のサービスを使っていて、それをiframeを使ってこのページにあるかのように見せています。
YouTubeの動画埋め込みや、Google Mapsの埋め込みなども、同じようにiframeが使われています。
iframeの基本的な使い方
それではiframeの基本的な使い方を、順を追って見ていきましょう。
iframeを使うためには、どのページを、どこに表示させるか、決めなければなりません。
iframeに表示させるコードを決める
まずはどのようなページを表示させるか選ばなければなりません。
が、基本的にはURLで指定できるものすべてを表示させることが出来ます。
ただ一部例外として、Googleなどはiframeでの表示を許可していないため、表示させることが出来ません。
こちらのコードをご覧ください。
この下はフレームになります。
実行結果
このコードでは侍エンジニアのトップページをiframeを使って表示させています。
基本的な使い方としては、src属性で表示させたいURLを指定するだけになります。
iframeのサイズを決める
先程のままでは非常に見づらいですね。
そこでサイズを変えましょう。
こちらのコードをご覧ください。
この下はフレームになります。
実行結果
width属性とheight属性を追加して、iframeで表示させるページの大きさを変えました。
これだけでiframeを使って外部のページを表示させることが出来ました。
iframe使うときの注意点
便利なように見えるiframeですが、いくつか注意するべき点があります。
CSSでiframeを装飾する場合は、iframeの枠のデザインしか変えることが出来ず、読み込んだページのデザインを変えるためにはJavaScriptを使わなければなりません。
またデザイン面でも問題があります。
iframeを使うと少ないスペースにたくさんの情報をスクロールすることで読み込むことが出来ます。
ただこれは、目的の情報にたどり着きにくくなることを意味しています。
どうしても外部のページを読み込まなければならない場合は使うべきですが、それ以外では極力使わなくても済むような方法を考えましょう。
また、CSSのoverflowプロパティでは擬似的にフレームを作ることが出来るので、この方法を使うという手もあります。
プログラミングスキルを身につけ、仕事の幅を広げてみませんか？
この記事をご覧の方の中には、WEBサイトの製作や運用を仕事としている人もいるのではないでしょうか？そしてそんなあなたは、仕事の幅をさらに広げ、キャリアップやより好条件の案件を獲得したいと考えた事はないでしょうか？
HTMLやCSSなどのマークアップ言語はWEBの世界の基本ですが、例えばクラウドワークスなどでそれ単体の仕事を探しても数はある程度限られてしまいますし、単価も低価格帯になりやすかったりします。
しかし、JavaScriptやPHPなどのいわゆる「プログラミング言語」を扱えるスキルを身に付けると、一気に案件単価や仕事の幅が広がります。..とは言っても、プログラミング言語は習得するまでがなかなか大変ですよね。独学での挫折率は8割とも言われているほどです。
そこで、プログラミングスキルを身につけようと考えた人は、スクールの利用を検討してみてはいかがでしょうか？
弊社「侍エンジニア」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、転職支援やフリーランスとして仕事を獲得するサポートもさせて頂いています。
興味をお持ちの方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください！
まとめ
この記事ではiframeの簡単な使い方から注意点までを解説してきました。
iframeの使い方について、分かっていいただけだでしょうか？
便利なiframeですが、注意すべき点があることにも気をつけましょう。
メリットとデメリットを知った上で、適切な場所でiframeを使っていきましょう。
