検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML の iframe

HTML の iframe

WBOY
WBOYオリジナル
2024-09-04 16:41:33571ブラウズ

HTML の iframe は、HTML ドキュメントに別の HTML ドキュメントを追加するために使用されるインライン フレームに他なりません。これは主に、Web ページや Web 開発プロセスで、その Web ページ上の広告など、別のソースを通じて他のコンテンツを組み込むために使用されます。

ほとんどの Web デザイナーは、Web サイトまたは Web ページ上にインタラクティブなアプリケーションを表示するために Iframe を使用します。 JavaScript または HTML の target 属性を使用して可能になります。

iframe の主な目的は、Web ページを別の Web ページ内に表示することです。インラインフレームは

例:

<iframe src ="www.educba.com" ></iframe>
  • 次のように、ピクセル形式で iframe に特定の高さと幅を指定することもできます。
<iframe src ="URL" height="value" width="value"></iframe>
  • 上記の構文では、すべてが同じになります。さらに、高さと幅をピクセル形式で指定し、
    • として定義できます。

例:

<iframe src ="www.educba.com" height="300" width="300"></iframe>
  • CSS を通じて値を使用して iframe の高さと幅を定義するもう 1 つの方法を、以下の構文に示します。
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
  • 値の指定を変更するだけで、すべて上記と同じです。

例:

<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
  • iframe に追加されるもう 1 つの機能は、border none プロパティを使用して、フレームに既に定義されている境界線を削除できることです。この構文は次のとおりです:
<iframe src ="URL" style="border : none;"></iframe>
  • CSS を使用すると、境界線のサイズを変更したり、境界線に色を適用したりするなど、境界線でさまざまな操作を行うこともできます。

iframe は、次の構文を使用してリンクのターゲットとして使用できます。

<iframe src ="URL" name="iframe_a"></iframe>
  • 上記の構文では、src は通常の URL です。ここで、リンクの target 属性は iframe タグの name 属性を参照します。

例:

<iframe src ="www.educba.com" name="iframe_a"></iframe>

iframe タグ属性

Iframe ではさまざまな属性タグが使用されます。それらは次のとおりです:

  • Src: この属性は、フレームに含める必要があるファイルを挿入するために使用されます。 URL は、iframe 内にロードされるターゲット Web ページを指定します。
  • Name: Name は、フレームに識別名を付けるために使用される属性です。これは、別の Web ページを開くためのリンクを作成する場合に最も役立ちます。
  • allowfullscreen: この属性を使用すると、フレームを全幅形式で表示できます。したがって、この関数に適用するには値を true に設定する必要があります。
  • Frameborder: これは、フレームに境界線を表示するかどうかを指定できる便利な属性です。値 1 は境界線を表示し、0 はフレームの境界線を表示しません。
  • Marginwidth: フレームの左側と右側の間のスペースを定義できます。
  • Marginheight: これにより、フレームの上部と下部の間のスペースを定義できます。
  • Scrolling: これらの属性は、フレーム内にスクロールバーを表示するかどうかを制御します。含まれる値は、「yes」、「no」、または「auto」です。
  • 高さ: フレームの高さを定義するために使用されます。 % またはピクセル
  • Width: フレームの幅を定義するために使用されます。 % またはピクセル
  • Longdesc: この属性を使用すると、フレームのコンテンツの長い説明を含む別のページにリンクできます。

HTML の iframe の例

HTML の Iframe の例をいくつか示します。以下で説明します。

例 #1

特定の高さと幅を持つ iframe を作成する方法を示す一例を考えてみましょう。

コード:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes Demo</h2>
<p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p>
<iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe>
</body>
</html>

出力:

HTML の iframe

例 #2

特定の高さと幅を持つ iframe を作成する方法を示す別の例を考えてみましょう。ただし、この例では CSS を通じて高さと幅を指定しています。ここでは、コンテンツ サイズごとにスクロール バーが調整されていることがわかります。

コード:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes Demo</h2>
<p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p>
<iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe>
</body>
</html>

出力:

HTML の iframe

Example #3

Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.

Code:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes Demo</h2>
<p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p>
<iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe>
</body>
</html>

Output:

HTML の iframe

Example #4

Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Iframe Demo- Target for a Link</h2>
<iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html>

Output:

HTML の iframe

Target Output:

As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.

HTML の iframe

Conclusion

An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.

以上がHTML の iframeの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html define for format include auto using Attribute Property Event function this display border iframe
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML テキストの装飾次の記事：HTML テキストの装飾

関連記事

続きを見る