HTML5構文チェックツールには、以下のようなものがあります。
今回は、これらのバリデーションツールで、以下のようなエラーが出たときの解消方法を紹介したいと思います。
Error: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
Error: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
photo by Jeremy Keith
目次
エラーが出る原因
エラーが出ている箇所のソースは以下のようになっています。
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnelog.jp&width=680&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&appId=569002053185714" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:680px; height:290px;" allowTransparency="true"></iframe>
これは、Facebook Like Boxで作成したFacebookのライクボックスをなどを、サイトに挿入した時のタグです。
Facebookライクボックスとは、サイトなどでよく見かける以下のようなもののことです。
このライクボックスを表示させるのに必要なタグを取得するとき、iframeで取得すると、冒頭に書いたようなエラーが出ます。
これにより出るエラーは以下。
Error: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
iframe要素のscrolling属性は、古い時代遅れの書き方だから、代わりにCSSを使ってね。
scrolling属性は、フレームのスクロールを制御する属性です。
Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
iframe要素のframeborder属性は、古い時代遅れの書き方だから、代わりにCSSを使ってね。
frameborder属性は、フレームの境界線を消す属性です。
Error: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
iframe要素のallowtransparency属性は、古い時代遅れの書き方だから、代わりにCSSを使ってね。
allowtransparency属性は、インラインフレームの背景を透過するタグです。
結局のところ、エラーが出ているものはすべて、iframeの属性でいろいろ設定していることが、古い仕様のやり方なのでエラーが出ます。
これらを解決するには、書いてある通り、すべてCSSでスタイルを代用してやることで解消されます。
エラーの解消方法
このエラーの解消するには、まずiframeのscrolling、frameborder、allowtransparency属性の部分を削除してやります。そして、スタイルをCSSで記入するため、class=”facebook-like-box”とクラスを追加しています。
こんな感じに。
<iframe class="facebook-like-box" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnelog.jp&width=680&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&appId=569002053185714"></iframe>
削除した部分は以下です。
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:680px; height:290px;" allowTransparency="true"
style属性でエラーが出ているわけではありませんが、どうせCSSで設定するならまとめて行おうと、ついでに削除しました。
そして、消してしまったiframe属性の代わりとなるCSSを書き、削除したstyle属性の補間となるスタイルシートを以下のように記入して、スタイルシートファイルに貼り付けます。
/*Facebookライクボックスのiframeのスタイル*/ iframe.facebook-like-box{ border: 0; background-color: transparent; overflow: hidden; width: 680px;/*ライクボックスの幅を指定*/ height:290px;/*ライクボックスの高さを指定*/ }
WordPressの場合は、style.cssなどにです。
まとめ
このようにすることで、Facebook Like Boxで生成されたiframeの属性によるHTML5構文エラーを消すことができます。
ただ、今回のエラーは、Facebookライクボックスに限らず、iframeにscrolling、frameborder、allowtransparency属性が指定されていると表示されます。
ですので、ライクボックス以外のiframeでエラーが出たとしても、エラーで指摘されている属性部分を削除してやり、属性の代わりとなるCSSを指定してやれば、対処することができると思います。