横幅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がかんでいる可能性が高いので確認してみてください。