HTML の iframe-htmlチュートリアル-php.cn

HTML の iframe

WBOY

リリース： 2024-09-04 16:41:33

オリジナル

541 人が閲覧しました

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

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

iframe の主な目的は、Web ページを別の Web ページ内に表示することです。インラインフレームはというタグを使用して表示する必要があります。これは Web ページ上の長方形のブロックのように機能し、ブラウザーはスクロールバーと境界線を備えた別のドキュメントを表示できます。</p> <p><strong>構文</strong></p> <ul> <li>次に、iframe がどのように正確に使用するかを見ていきます。</li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><iframe src ="URL"></iframe></pre><div class="contentsignin">ログイン後にコピー</div></div> <ul> <li>こちら <iframe>は、HTML iframe が定義されるタグです。インラインフレームページのURLを定義するために使用されるSrc属性が含まれます。

例:

<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 サイトの他の関連記事を参照してください。