HTML で埋め込んだ HTML ページ

はじめに

<iframe> タグは、1 つのウェブページを別のウェブページに埋め込むために使用されます。この実験では、現在のウェブページ内に別のウェブページを表示するために <iframe> タグをどのように使用するかを学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。

Skills Graph

HTML ファイルに <iframe> タグを追加する

HTML ファイルに <iframe> を追加するには、<iframe> の開始タグと終了タグを使用し、表示するウェブページの URL を指定する src 属性を含める必要があります。以下は <iframe> タグの例です。

<iframe src="https://www.example.com"></iframe>

<iframe> の高さと幅を設定する

必要に応じて、height および width 属性を使用して <iframe> のサイズを調整できます。height および width 属性は、ピクセル、パーセント、またはエム単位の値をとります。以下は例です。

<iframe src="https://www.example.com" height="500" width="500"></iframe>

sandbox および allow 属性を使った表示機能の制御

sandbox および allow 属性を使って、<iframe> の様々な機能を制御できます。たとえば、フルスクリーン表示の許可や、<iframe> 内でのスクリプトの実行の許可などです。以下は例です。

<iframe
  src="https://www.example.com"
  sandbox="allow-modals allow-forms"
></iframe>

代替コンテンツの使用

ブラウザがインラインフレームをサポートしていない場合、<iframe> タグには表示する 代替 コンテンツを使用することが推奨されます。代替テキストは、<iframe> タグの開始タグと終了タグの間に追加でき、<iframe> タグがサポートされていない場合に表示されます。以下は例です。

<iframe src="https://www.example.com" height="500" width="500"
  >Your browser does not support inline frames.</iframe
>

まとめ

おめでとうございます！現在のウェブページ内に別のウェブページを表示するために <iframe> タグをどのように使用するかを学びました。表示したいウェブページの URL に src 属性を設定し、必要に応じて height および width 属性を使用して表示を調整することを忘れないでください。また、sandbox および allow 属性を使用して <iframe> の様々な機能を制御することもできます。さらに、<iframe> タグをサポートしていないブラウザ用の代替コンテンツを必ず含めてください。