【HTML】【CSS】iframeタグの使い方 HTMLファイルを埋め込む方法
iframeタグとは？
iframeタグを使えば、 HTMLタグの中に別のファイルを埋め込むことができます。 外部のHTMLや、youtube、Google map等を埋め込むことができます。
iframeタグの使い方
src属性
src属性に埋め込みたいページのURLやパスを書きます。
<!-- 外部のページを埋め込む -->
<iframe src="https://yahoo.co.jp"></iframe>
<!-- 同じ階層のファイルを埋め込む -->
<iframe src="example.html"></iframe> width heightで高さや幅を指定
タグの中に、widthやheightを指定できます。 指定しなければ、width 300px, height 150px になります。
注）幅を500pxにした場合、ケータイなどでは幅をオーバーしてしまうので、 レスポンシブに対応できるように、CSSで、max-width: 100% を指定しておきましょう。iframeタグ内にmax-widthを書いても効きません。
<iframe src="https://yahoo.co.jp" width="500" height="300"></iframe> sandboxで制限をかけ、allowで制限を解除
sandboxで制限をかけることにより、 「埋め込まれたページ内で問題が発生しても、元のページには影響を及ぼさないようにする」 ことができます。
また、allow-xxxxで特定の条件を解除することができます。
<!-- 全てに制限をかける -->
<iframe src="~" sandbox></iframe>
<!-- フォーム送信だけは許可 -->
<iframe src="~" sandbox="allow-forms"></iframe>allowfullscreenで全画面表示を許可
allowfullscreenで全画面表示を許可することができます。 youtubeやgoogle mapを全画面で見たい時便利です。
<iframe src="~" allowfullscreen></iframe>title属性
読み上げソフトなどのコンテンツリーダーなどで埋め込まれた内容をあらかじめ判断できるように、 title属性を指定しておくと、アクセシビリティが向上します。
<iframe src="~" title="iframeのexampleページ"></iframe>frameborder属性で枠線を表示／非表示
読み上げソフトなどのコンテンツリーダーなどで埋め込まれた内容をあらかじめ判断できるように、 title属性を指定しておくと、アクセシビリティが向上します。
<!-- 枠線なし -->
<iframe src="~" frameborder="0"></iframe>
<!-- 枠線あり -->
<iframe src="~" frameborder="1"></iframe>youtube動画を埋めこむ
youtubeから埋め込みたい動画のページを開き、「共有」→「埋め込む」→「コピー」
コピーしたものをページに貼り付けます。
埋め込まれました。
google mapの地図を埋め込む
google mapで表示したい場所をクリックし、「共有」→「地図を埋め込む」→「HTMLをコピー」
コピーしたものをページに貼り付けます。
埋め込まれました。
まとめ
- iframeタグで外部ページを埋め込む
- src属性で埋め込むページのURL矢パスを指定
- width heightで高さや幅を指定
- sandboxで制限をかけ、allowで制限を解除
- allowfullscreenで全画面表示を許可
- title属性で、アクセシビリティが向上
- frameborder属性で枠線を表示／非表示
- youtubeやgoogle mapなどを埋め込むことができる
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを２つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript（Object.entries）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
