こんにちは、Tomaです。
HTML基礎講座も第5回を迎えました。今回は、YouTube動画やX（旧Twitter）のポストを自分のブログの中に表示させる魔法のタグ、「iframe（アイフレーム）」について解説します。
「埋め込みコード」としてコピーして使うことが多いですが、中身を少し知っておくだけで、表示サイズを微調整したりできるようになりますよ。
第9章：別世界の窓を作る「iframeタグ」とは？
iframeは「Inline Frame」の略で、自分のWebページの中に別のWebページを「窓」のように埋め込むためのタグです。
動画、地図、SNSの投稿など、外部のコンテンツをそのまま持ってくる時に大活躍します。
1. iframeタグの基本形
基本的には、以下のように「src（読み込むURL）」と「サイズ（width/height）」を指定します。
<iframe src="埋め込みたいURL" width="560" height="315"></iframe>2. 実際の活用シーン
- YouTube動画： 攻略動画を記事の途中に差し込む
- X（Twitter）の投稿： 公式のアナウンスやユーザーの反応を引用する
- Googleマップ： 聖地巡礼や会場案内を載せる
【実際の表示イメージ】
（YouTubeなどの埋め込みイメージ）
YouTubeの動画プレイヤー
第10章：エンジニアが教える「埋め込み」とSEOの意外な関係
iframeを使う際、SEO（検索エンジン最適化）の観点で意識しておきたい重要なポイントが3つあります。ここを疎かにすると、せっかくの良い記事も評価が下がってしまうかもしれません。
① 中身は「自分のコンテンツ」にならない
もっとも重要なのは、iframe内のテキストや情報は、検索エンジンから「あなたの記事の内容」として評価されにくいという点です。動画を埋め込んだだけで満足せず、必ずその動画の内容を補足するテキストを自分の言葉で書き添えましょう。
② 読み込み速度（PageSpeed）への影響
iframeは外部サイトを読み込むため、ページ全体の表示速度を遅くする原因になります。Googleは表示速度を評価対象にしているため、対策として、スクロールして近づくまで読み込みを遅らせるloading="lazy"属性をタグに追加するのがエンジニア流の工夫です。
<iframe src="..." loading="lazy"></iframe>③ モバイルフレンドリー（レスポンシブ）
スマホで見た時にiframeが画面からはみ出していると、ユーザー体験が悪くなりSEO評価にマイナスです。幅をwidth="100%"にするなど、どんな端末でも綺麗に見えるよう調整しましょう。
まとめ：HTML編はこれで完結！次回からは「デザイン編」へ
全5回にわたってお届けしてきたHTML基礎講座、いかがでしたでしょうか？ 「骨組み」であるHTMLを理解したことで、ブログの裏側が少しずつ見えてきたのではないかと思います。
さて、次回からは新シリーズ「CSS編」がスタートします！
HTMLで作った骨組みに、色を塗ったり、配置を整えたりして、「自分らしさ」を出すためのデザイン術を解説していく予定です。おしゃれで読みやすいブログを目指して、一緒にステップアップしていきましょう！
