[HTML]簡単！HTMLでiframeを使う方法　

• 更新：2017/12/05
• ライター：IBC

Tweet

今回は、HTMLで iframe を使う方法を紹介します。

ブログなどでよく Youtube の動画が埋め込まれていたり、
Google Map が埋め込まれているのを見かけますが、
これを可能にするのが iframe の活用です。

構文としては

となります。

例として
Steve Jobs introduces original MacBook Air & Time Capsule – Macworld SF (2008)
の Youtube 画像を埋め込んでみましょう

Youtube の画像を埋め込むには
動画で共有をクリックし、埋め込みコードをクリックすると
iframe のコードが表示されるので、これをコピペして貼り付けます。

今回の場合は、

となります。

実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

今回は、youtube で取得した iframe のコードを body タグ内に貼り付けてみましょう。

そして、ctrl + shit + h でプレビューを見ると、
youtube の動画が埋め込まれているのがわかります。

もし、大きな画面で埋め込みたいという場合には、
width や height の値を変更することで表示する大きさを変更することができます。

この記事を書いた人：IBC

IBC

ITブートキャンプ運営事務局です。 随時ブログを更新していきます。