サンプル集  >  HTML  >  iframe
iframe
2021/10/03

iframeの利用例です。

HTML4.01では非推奨になっていたようですがHTML5で復活したようです。 HTML4.01時代から使える属性が変わっているようです。

変更点として記載を見たもの(他にも変更点はあると思います。)

  1. 高さ指定はピクセルのみ。%を指定するとデフォルトの150pxになる。
  2. 縦のサイズが変わるHTMLを表示する場合、JavaScriptで調整する必要がある。
  3. scroll属性廃止。
◆環境
OS Windows 10 Home 20H2 604bit
Browser Google Chrome 94.0.4606.71 (Official Build)

本ページの左のメニューをiframeにしてみます。

MainContent-if.html
19:  <iframe src="SideMenu.html" width=140px></iframe>

SideMenu.html

フレームの枠が表示されました。高さが固定でスクロールバーが表示されています。

高さを640pxに、frameborderを0に指定します。

MainContent-if2.html
19: 
20: 		 <iframe src="SideMenu2.html" width=140px
        height=640px frameborder="0"></iframe>

スクロールバーを非表示にするためにstyleでoverflow-yを非表示に指定します。またbodyのマージン、パディングを0に指定します。

SideMenu2.html
 4: 
 :
 :
 :
11: 
12: 
13: 
14: 
15: 
16: 
17: 
 <head>
:
略
:
<style>
html {
    overflow-y: hidden;
}
</style>
</head>
<body style="margin:0; padding:0;">

違和感ない感じになりました。

▲ PageTop  ■ Home

Copyright (C) 2021 ymlib.com