HTML インラインフレーム
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」が指定され、枠線が表示されます。
代替方法
スタイルシートの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タグをコピーしてページ内に貼り付けます。
コメント