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="200px" scrolling="no" frameborder="0" style="border: none"><iframe>

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

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする