無理しないでゆっくり休んでね!

HTML インラインフレーム

「IFRAME」とは「inline frame」の略で、文書の中にインラインのフレームを作成するためのタグです。現在のHTMLページに他のページを埋め込むことができます。

iframe構文

<iframe src="URL"></iframe>

「src」はフレーム内に表示するコンテンツのリンク先を指定します。

フレームの高さと幅

<iframe src="https://codinghaku.com/" width="99%" height="300px"></iframe>

このように記述すれば、指定した高さと幅でコンテンツを埋め込むことが可能です。

境界線の表示

<iframe src="https://codinghaku.com/" frameborder="0"></iframe>

frameborder属性は、フレームの境界線を表示するかどうかを指定します。

属性値に0または1を指定することで、フレームの枠線を非表示または表示に設定することができます。

デフォルトでは「1」が指定され、枠線が表示されます。

HTML5でこの属性は廃止されていますので使用するべきではありません。

代替方法

スタイルシートのborder属性で指定します。

境界線を表示しない
iframe.sample1 {border:none;}

境界線を表示する
iframe.sample2 {border:inset;}

スクロールバーの有無

scrolling属性を追加すると、スクロールバーの有無を指定することができます。

<iframe src="https://codinghaku.com/" scrolling="yes"></iframe>
属性説明
scrolling=""yesスクロールバーを常に表示する
noスクロールバーを常に表示しない
auto必要に応じてスクロールバーを表示する(初期値)

iframeの使用シーン

iframeタグを使用すれば、YouTubeなどの動画やSNS、Google Mapsの埋め込みなど、さまざまな形式のリンクを埋め込むことが可能です。

埋め込み用のHTMLタグは自動生成してくれるので、基本的にはタグをコピーしてページに貼り付けるだけです。

動画ページ内の「共有」ボタンをクリックすると、「埋め込む」という項目が確認できます。

Google Maps

Google MapsもYouTubeと同じ手順で埋め込むことができます。

「共有」をクリックすると、リンクが自動生成されます。「地図を埋め込む」を選び、表示されたiframeタグをコピーしてページ内に貼り付けます。

Google Maps

コメント

タイトルとURLをコピーしました