BLOG 技術記事
BLOG 技術記事

BLOG 技術記事

これで解決！iframeの文法エラーの原因と解消法を解説します【HTML,CSS】 2024.12.25
  • CSS
  • その他
SHARE

目次

  • 1 はじめに
  • 2 そもそもiframeとは
  • 3 文法エラーの例
    • 3.1 frameborder属性
    • 3.2 scrolling属性
    • 3.3 marginwidth / marginheight属性
  • 4 CSSを用いた解決策
    • 4.1 1. frameborderの解決策
    • 4.2 2. scrollingの解決策
    • 4.3 3. marginwidth / marginheightの解決策
  • 5 まとめ

はじめに

こんにちは！今日は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サイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！

こちらの記事はいかがでしたか？ +1 1 +1 0 +1 0 +1 0 Facebook Twitter Email Related posts

【CSS】プロパティ・値・単位の一覧　基礎〜応用

【AI搭載エディタ】Cursorエディタとは？導入・使い方から制作を効率化するプロンプト（指示）を徹底紹介！

スクロールアニメーションに革命！CSSだけで実装する方法を解説します【JavaScriptなし】

【CSS】サイトレイアウトのまとめ

TWEET
  • PREV
  • BACK
  • NEXT

RECENT ENTRIES

  • Web制作会社がAIを導入して変わったこと｜実例付きメリット・デメリット
  • 【ローカルWordPress】https://localhost に勝手にリダイレクトされる原因と解決法｜SSLエラー「ERR_SSL_PROTOCOL_ERROR」の直し方
  • GEO・SGEとは？SEOとの違い | 導入方法や効果など徹底紹介
  • コーディング不要でハンバーガーメニュー作成！「Hamburger Menu Generator」の使い方と特徴を徹底解説

【Hamburger Menu Generator】ハンバーガーメニュー生成ツール

CATEGORIES

  • AI × Web制作
  • CSS
  • js/jQuery
  • Photoshop/Xd
  • Sass
  • Wordpress
  • ウェブ解析
  • その他
  • デザイン
📎📎📎📎📎📎📎📎📎📎
BOT