HTMLでiframeを使おう!CSSでカスタマイズする方法も解説

今回はHTMLiframeについて解説をしていきます!

iframeを使うことで一つのWebサイトの中でさらに別のWebサイトを読み込むことが出来ます。

またYouTubeGoogle 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を使うと少ないスペースにたくさんの情報をスクロールすることで読み込むことが出来ます。

ただこれは、目的の情報にたどり着きにくくなることを意味しています。

どうしても外部のページを読み込まなければならない場合は使うべきですが、それ以外では極力使わなくても済むような方法を考えましょう。

また、CSSoverflowプロパティでは擬似的にフレームを作ることが出来るので、この方法を使うという手もあります。

プログラミングスキルを身につけ、仕事の幅を広げてみませんか?


画像:shutterstock

この記事をご覧の方の中には、WEBサイトの製作や運用を仕事としている人もいるのではないでしょうか?そしてそんなあなたは、仕事の幅をさらに広げ、キャリアップやより好条件の案件を獲得したいと考えた事はないでしょうか?

HTMLやCSSなどのマークアップ言語はWEBの世界の基本ですが、例えばクラウドワークスなどでそれ単体の仕事を探しても数はある程度限られてしまいますし、単価も低価格帯になりやすかったりします。

しかし、JavaScriptやPHPなどのいわゆる「プログラミング言語」を扱えるスキルを身に付けると、一気に案件単価や仕事の幅が広がります。..とは言っても、プログラミング言語は習得するまでがなかなか大変ですよね。独学での挫折率は8割とも言われているほどです。

そこで、プログラミングスキルを身につけようと考えた人は、スクールの利用を検討してみてはいかがでしょうか?

弊社「侍エンジニア塾」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、転職支援やフリーランスとして仕事を獲得するサポートもさせて頂いています。

興味をお持ちの方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。

入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください!

無料体験レッスンの
予約はこちら

まとめ

この記事ではiframeの簡単な使い方から注意点までを解説してきました。

iframeの使い方について、分かっていいただけだでしょうか?

便利なiframeですが、注意すべき点があることにも気をつけましょう。

メリットとデメリットを知った上で、適切な場所でiframeを使っていきましょう。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説