横幅width100%のiframeに出る余白を消す方法

もはやHTMLの化石ともいえるiframe

見かけたら「 遺跡が出たぞー! 」叫びたくなるレベル。役所に電話しなきゃ。

しかしお馴染みの楽天RMSやYahoo!ショッピングのストアクリエイターProなど、ネットショップではよく使われています。

以前下記リンクの記事にて「 iframeに width="100%" をかけていても左右に余白が出る。 」とのコメントをいただきました。

確かにiframeタグにwidth="100%" 入れてもCSSで width:100%; 指定をかけていても左右に余白できちゃうんですよね。

iframeの余白を無くす方法

正確にいうと「 iframeの左右 」ではなく「 iframe内部のbodyタグ上下左右 」に余白ができています。

余白を消すにはiframeパーツの中身になるhtmlファイル内 のbody開始タグ( <body> )を下記のどちらかに書き換えてください。

上下左右 or 左右の余白のみを消す

[html]
<body style="margin:0;padding:0;"><!– 上下左右すべての余白を消す –>
[/html]

こちらは上下左右の余白を全て消す方法です。

ただし、すでに上下位置をキッチリ決めて「 あとは左右の余白だけ気になる 」ってときにこちらのコードを使うと、上下の余白も消えるのでその分上にズレます。

ついでにiframeの下にある要素との距離も詰まってしまう。

上下余白はそのままにしたい場合は次の左右余白のみを消すコードをお使いください。

左右の余白のみを消す

[html]
<body style="margin:auto 0;padding:auto 0;"><!– 左右余白だけ消す –>
[/html]

こちらであれば左右の余白のみ消えるので、上下要素との距離は変わりません。

ただ、あとで位置や余白を微調整するなどメンテナンス性を考えれば、余白はiframeの中身ではなくiframe本体につけたCSSなどでコントロールした方が楽です。

といってもコーディングルール的に間違いではないので、お好きな方を使うと良いでしょう。

iframeの中身に余白ができてしまう理由

先述の通り、iframeに余白がついているのではなく、iframeの中身となる<body>タグに余白がついています。

もともとブラウザ自体が各種要素(タグ)に対してデフォルトでCSSをもっており、bodyタグにmarginをつけるために余白ができてしまうのです。

そこでbodyタグにstyle属性で0指定し、余白を消すってわけです。

ちなみに、デフォルトCSSはブラウザによっても違いがあります。私が確認した限りchromeではbodyがmarginを持っていました。

ほかにもpaddingがのるブラウザもあるかもしれないので、ついでにpaddingも0指定しています。

まとめ:width100%でも出てしまうiframeの余白を消す方法

  • iframeにwidth100%指定しても余白ができる場合、中身htmlのbodyタグにかかる余白がリセットされていない。
  • bodyタグのデフォルトmarginとpaddingをstyleで0指定することで消すことが可能。

イマドキのホームページはブラウザごとにCSSが違ってしまうと面倒なので、主なタグのデフォルトCSSをリセットしてから再指定する手法がとられます。

が、ちょっと読み込むだけのiframeパーツにはそこまでしなくても……って感じなので、今回のように必要な分だけ書き換えるのが一般的。

無駄にCSS読み込ませてもiframeの読み込み & 表示が遅くなってしまいますし。

ほかにもブラウザによってiframeの見た目が変わってしまい困っている、なんてときはブラウザのデフォルトCSSがかんでいる可能性が高いので確認してみてください。