これで解決！iframeの文法エラーの原因と解消法を解説します【HTML,CSS】
目次
はじめに
こんにちは！今日はiframe要素に関するお話です。
例えばYouTube動画やGoogleマップの地図などをウェブページに埋め込む際、公式サイトやネット上からHTMLコードをコピペして使用する方法が一般的ですよね。
ですがそのコードには既にサポートされていない属性が含まれていることがあり、そのまま使用するとHTMLの文法エラーとなる場合があります。
この記事では文法エラーの具体例を挙げ、その原因やどのように修正していくかを分かりやすく解説します。
原因が分かってしまえば簡単に修正できますので、ぜひ参考にしてみてください！
そもそもiframeとは
iframeは、HTMLで別のウェブページやコンテンツを埋め込むために使用されるタグです。
例えば…
- ・YouTube動画の埋め込み
- ・Googleマップの地図表示
- ・外部ウェブサイトやアプリケーションの埋め込み（例: PDFビューアやCodePenなど）
こういったものをWEB上で表示させたい場合に使用していきます。
iframeを使うことで簡単に外部コンテンツを表示することができますが、過去に使用されていた一部の属性が現在では非推奨となっている状態で、これが文法エラーの原因となっています。
文法エラーの例
ではここからは、2024年12月現在で起こってしまう具体的な文法エラーの例を紹介していきます。
frameborder属性
枠線の有無を指定するための属性で、設定値は"0"もしくは"1"が入ります。
現在HTML5では非推奨の属性となっています。
<iframe src="https://www.example.com" frameborder="0"></iframe>W3Cバリデーターツールでチェックをかけると、以下のようなエラーが表示されます。
scrolling属性
スクロールバーの表示を制御するための属性で、設定値には"yes"、"no"が入ります。
こちらもHTML5では非推奨の属性です。
<iframe src="https://www.example.com" scrolling="no"></iframe>W3Cバリデーターツールでチェックをかけると、以下のようなエラーが表示されます。
marginwidth / marginheight属性
内部コンテンツの余白を指定するための属性で、設定値には具体的な数値が入ります。
こちらもHTML5では非推奨の属性です。
<iframe src="https://www.example.com" marginwidth="10" marginheight="20"></iframe>W3Cバリデーターツールでチェックをかけると、以下のようなエラーが表示されます。
上の3種類のエラーはいずれも、もう使用されていない属性なので代わりにCSSで設定しましょう。
という案内が出ている形です。
CSSを用いた解決策
ではここからは解決策をご紹介します！
サポートされていない属性は削除し、CSSを使用して同じデザインにしてあげればOKです。
以下にてそれぞれの属性の具体的な修正方法を解説します。
1. frameborderの解決策
frameborder属性の記述を削除し、CSSでborder: none; を命令することで枠線を非表示にすることができます。
<iframe class="custom-iframe" src="https://www.example.com"></iframe>.custom-iframe {
border: none; /* 枠線を非表示 */
}2. scrollingの解決策
scrolling属性の記述を削除することで文法エラー自体を解消できます。
ただし、iframe要素内のコンテンツのスクロールバーの制御はできないため注意しましょう。
<iframe src="https://www.example.com"></iframe>3. marginwidth / marginheightの解決策
それぞれの属性の記述は削除し、余白の設定はCSSのpaddingプロパティで行ってあげましょう。
<iframe class="custom-iframe" src="https://www.example.com"></iframe>.custom-iframe {
padding: 20px 10px; /* 上下に20px、左右に10pxの余白を設定 */
}まとめ
文法エラーが出るとつい焦ってしまいますが、まずは落ち着いて原因を確認し対策を行っていきましょう！
今回ご紹介したiframeタグに含まれる古い属性を削除してCSSで調整することで、HTMLの文法エラーを防ぎ、保守性の高いコードを作成することができます。
ぜひこの記事がみなさまの参考になれば嬉しいです。
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！
