はじめに
<iframe> タグは、1 つのウェブページを別のウェブページに埋め込むために使用されます。この実験では、現在のウェブページ内に別のウェブページを表示するために <iframe> タグをどのように使用するかを学びます。
注:
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。
HTML ファイルに
HTML ファイルに <iframe> を追加するには、<iframe> の開始タグと終了タグを使用し、表示するウェブページの URL を指定する src 属性を含める必要があります。以下は <iframe> タグの例です。
<iframe src="https://www.example.com"></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> タグをサポートしていないブラウザ用の代替コンテンツを必ず含めてください。



