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

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

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

構文としては

<iframe src=”表示するファイル名” width=”横幅″ height=”縦幅″></iframe>

1	<iframe src=”表示するファイル名” width=”横幅″ height=”縦幅″></iframe>

となります。

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

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

今回の場合は、

<iframe width="420" height="315" src="https://www.youtube.com/embed/1CgAKBf4bbU" frameborder="0" allowfullscreen></iframe>

1	<iframe width="420" height="315" src="https://www.youtube.com/embed/1CgAKBf4bbU" frameborder="0" allowfullscreen></iframe>

となります。

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

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

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

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

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

ゼロから作成する場合

html:5

html:5

として展開すると

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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

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

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

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

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