HTMLのiframeタグの使い方を詳しく解説
HTML での iframe タグの使用法の詳細な説明
HTML の iframe タグは、Web に他の Web ページや画像、その他のコンテンツを埋め込むために使用されるメソッドです。ページ。 iframe タグを使用すると、1 つの Web ページ内に別の Web ページのコンテンツを表示することができ、Web ページのレイアウトの柔軟性と多様性を実現できます。この記事では、iframeタグの使い方と具体的なコード例を詳しく紹介します。
1. iframe タグの基本構文構造
HTML で iframe タグを使用するには、次の基本構文構造が必要です:
各属性の意味は以下のとおりです。
- src: 埋め込むWebページまたは画像のURLを指定します。相対パスまたは絶対パスを使用できます。
- name: ページ内での検索やその他の操作の実行に使用できる iframe の名前を指定します。
- scrolling: スクロール バーを表示するかどうかを指定します。「yes」(スクロール バーを表示する) または「no」(スクロール バーを表示しない) に設定できます。
- frameborder: 枠線を表示するかどうかを指定します。「1」(枠線を表示する)、「0」(枠線を表示しない)に設定できます。
- width: iframe の幅を指定します。ピクセル値またはパーセンテージとして設定できます。
- height: iframe の高さを指定します。ピクセル値またはパーセンテージとして設定できます。
2. Web ページの埋め込みの例
次は、iframe タグを使用して別の Web ページを埋め込む方法を示す簡単な例です:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>嵌入网页示例</title>
</head>
<body>
<h1 id="嵌入网页示例">嵌入网页示例</h1>
<iframe src="http://www.example.com" width="800" height="600" frameborder="0"></iframe>
</body>
</html>上記の例では、 http://www.example.com という名前の Web ページが現在のページに埋め込まれています。埋め込まれた iframe の幅は 800 ピクセル、高さは 600 ピクセルで、境界線は表示されません。
3. 画像の埋め込みの例
Web ページの埋め込みに加えて、iframe タグを使用して画像を埋め込むこともできます。 iframe タグを使用して画像を埋め込む方法を示す例を次に示します。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>嵌入图片示例</title>
</head>
<body>
<h1 id="嵌入图片示例">嵌入图片示例</h1>
<iframe src="images/example.jpg" width="800" height="600" frameborder="0"></iframe>
</body>
</html>上の例では、example.jpg という名前の画像を現在のページに埋め込みます。埋め込まれた iframe の幅は 800 ピクセル、高さは 600 ピクセルで、境界線は表示されません。
4. JavaScript を使用して iframe を制御する
基本的な使用法に加えて、JavaScript を使用して iframe タグの動作を制御することもできます。以下は、JavaScript を使用して iframe の URL を動的に変更する方法を示す例です。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>通过JavaScript控制iframe示例</title>
<script>
function changeURL() {
var iframe = document.getElementById("myFrame");
iframe.src = "http://www.newurl.com";
}
</script>
</head>
<body>
<h1 id="通过JavaScript控制iframe示例">通过JavaScript控制iframe示例</h1>
<input type="button" value="改变URL" onclick="changeURL()">
<iframe id="myFrame" src="http://www.example.com" width="800" height="600" frameborder="0"></iframe>
</body>
</html>上の例では、JavaScript を使用して関数changeURL() を定義します。これにより、次の ID を持つ iframe が変更されます。 「myFrame」のURL。ボタンをクリックすることで、iframe内に表示されるWebページを動的に変更できます。
概要:
iframe タグを使用すると、他の Web ページや画像、その他のコンテンツを Web ページに埋め込み、柔軟な Web ページ レイアウトを実現できます。 iframe を使用する場合は、埋め込まれた Web ページまたは画像の URL が正しいことを確認すること、iframe のサイズと必要に応じてスクロール バーや境界線を表示するかどうかを設定すること、iframe の動作に注意する必要があります。 JavaScript を通じて動的に制御できます。この記事の内容が、皆さんにとって iframe タグの使い方を理解するのに役立つことを願っています。
(総単語数: 571 単語)
以上がHTMLのiframeタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7548
15
1382
52
83
11
22
90
Dreamweaver Web デザインで写真を中央に配置する方法
Apr 08, 2024 pm 08:45 PM
Dreamweaver で画像を中央に配置する: 中央に配置する画像を選択します。 [プロパティ] パネルで、[水平方向の配置] を [中央] に設定します。 (オプション) 垂直方向の配置を中央または下に設定します。
一般的に使用される Flex レイアウト プロパティは何ですか?
Feb 25, 2024 am 10:42 AM
フレックス レイアウトの共通プロパティは何ですか? 特定のコード サンプルが必要です。フレックス レイアウトは、応答性の高い Web ページ レイアウトを設計するための強力なツールです。柔軟なプロパティのセットを使用して、Web ページ内の要素の配置とサイズを簡単に制御できます。この記事では、Flex レイアウトの一般的なプロパティを紹介し、具体的なコード例を示します。 display: 要素の表示モードを Flex に設定します。 .container{display:flex;}flex-directi
全角文字の定義と使用
Mar 25, 2024 pm 03:33 PM
全角文字とは何ですか?コンピュータ エンコード システムでは、全幅文字は 2 つの標準文字位置を占める文字エンコード方法です。これに対応して、標準の文字位置を占める文字エンコード方式を半角文字と呼びます。全角文字は通常、中国語、日本語、韓国語、その他のアジアの文字の入力、表示、印刷に使用されます。中国語の入力方法やテキスト編集では、全角文字と半角文字の使用シーンが異なります。全角文字の使用 中国語の入力方法: 中国語の入力方法では、通常、漢字や記号などの中国語の文字を入力するために全角文字が使用されます。
画面の高さをすばやく取得するための jQuery のヒント
Feb 24, 2024 pm 06:30 PM
jQuery のヒント: 画面の高さをすばやく取得する方法 Web 開発では、レスポンシブ レイアウトの実装、要素サイズの動的計算など、画面の高さを取得する必要がある状況によく遭遇します。 jQueryを利用すると画面の高さを取得する機能を簡単に実現できます。次に、jQueryを使って画面の高さを高速に取得する実装方法をいくつか紹介し、具体的なコード例を添付します。方法 1: jQuery の height() メソッドを使用して画面の高さを取得します。
ブートストラップは何で構成されていますか?
Apr 05, 2024 am 01:09 AM
Bootstrap フレームワークは次のコンポーネントで構成されています。 CSS プリプロセッサ: SASS および LESS レスポンシブ レイアウト システム: グリッド システムおよびレスポンシブ ユーティリティ クラス コンポーネント: UI 要素および JavaScript プラグイン テーマとテンプレート: 既成のスタイルおよび既成のページ ツールおよびユーティリティ: アイコンセット、jQuery、Grunt
CSS ビューポート ユニット vh を使用してモバイル画面に適応する Web ページ レイアウトを作成する方法
Sep 13, 2023 am 11:15 AM
CSSViewport ユニット vh を使用して携帯電話の画面に合わせた Web ページ レイアウトを作成する方法 携帯電話デバイスの普及と使用がますます普及しており、ますます多くの Web ページを携帯電話の画面に合わせる必要があります。この問題を解決するために、CSS3 では新しいユニットである Viewport ユニットが導入されました。これには vh (viewportheight) が含まれます。この記事では、vh ユニットを使用してモバイル画面に適応する Web ページ レイアウトを作成する方法を検討し、具体的なコード例を示します。 1つ
HTMLのiframeタグの使い方を詳しく解説
Feb 21, 2024 am 09:21 AM
HTMLのiframeタグの使い方を詳しく解説 HTMLのiframeタグは、Webページ内に他のWebページや画像などのコンテンツを埋め込むために使用されるメソッドです。 iframe タグを使用すると、1 つの Web ページ内に別の Web ページのコンテンツを表示することができ、Web ページのレイアウトの柔軟性と多様性を実現できます。この記事では、iframe タグの使い方を詳しく紹介し、具体的なコード例を示します。 1. iframe タグの基本構文構造 HTML で iframe タグを使用するには、次の基本言語が必要です。
レイアウトレイアウトとは何ですか？
Feb 24, 2024 pm 03:03 PM
レイアウトとは、Web ページの要素を特定の規則と構造に従って配置および表示するために Web デザインで採用される組版方法を指します。合理的なレイアウトにより、Web ページはより美しく、整然とし、優れたユーザー エクスペリエンスを実現できます。フロントエンド開発では、従来のテーブル レイアウト、フローティング レイアウト、位置決めレイアウトなど、多くのレイアウト方法から選択できます。しかし、HTML5 や CSS3 の推進により、Flexbox レイアウトやグリッド レイアウトなどの最新のレスポンシブ レイアウト技術が主流になりました。
