iframe 要素の枠線とスクロールバーをなくす方法

iframe 要素をデフォルトで表示すると、 サイズにもよりますが下図のように枠線スクロールバーが表示されることがあります。

このままだと見た目も悪いので、 iframe要素の枠線とスクロールバーを消す方法を紹介します。

枠線を消す方法

枠線を消すには、「frameborder="0" style="border: none"」を指定します。

「frameborder="0"」だけで消える場合がありますが、 frameborder属性はHTML5では廃止されています。

念のため「style="border: none"」も指定した方が確実です。


<iframe src="**" frameborder="0" style="border: none"><iframe>

スクロールバーを消す方法

スクロールバーを消すには、「scrolling="no"」を指定します。


<iframe src="**" scrolling="no" frameborder="0" style="border: none"><iframe>

サイズによっては上図のように途中で切れてしまう場合があります。 この場合は表示したいサイズに応じて、横幅や高さを指定します。


<iframe src="**" with="100% height="230px" scrolling="no" frameborder="0" style="border: none"><iframe>

これで途中で途切れることなく、表示されました。

HTML・CSS入門