JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLページ内でiframeタグを使ってインラインフレームを作成する方法

iframeタグとは？

<iframe>タグは、インラインフレーム（inline frame）を定義するために使用されます。インラインフレームとは、現在表示しているHTMLドキュメントの中に、別のドキュメントを埋め込むための仕組みです。たとえば、他のWebページや動画などを自分のページの一部として表示したい場合に活用できます。

iframeの作成自体は非常にシンプルで、基本的な属性を指定するだけで簡単に実装できます。

iframeタグで使える主な属性

属性
説明
height
iframeの高さをピクセル単位で指定します。
name
iframeの名前を指定します。リンクのターゲットとして利用する際などに役立ちます。
src
埋め込みたいドキュメントのURLを指定します。iframeには必須の属性です。
width
iframeの幅をピクセル単位で指定します。パーセンテージでの指定も可能です。

HTMLページ内でiframeタグを使ってインラインフレームを作成する方法

実装例

以下のコードを実行すると、HTMLページ内にインラインフレームを作成できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML iframe Tag</title>
   </head>
   <body>
      <iframe src="https://www.qries.com" width="100%">
      </iframe>
   </body>
</html>

この例では、src属性で読み込むページのURLを指定し、width属性を「100%」に設定することで、画面幅いっぱいにインラインフレームを表示しています。

補足：より使いやすくするためのポイント

  • height属性の追加： 高さを明示的に指定しないと、ブラウザによってはコンテンツが切れて表示されることがあります。
  • loading="lazy"属性： ページの読み込み速度を改善したい場合は、遅延読み込みを有効にするこの属性の活用がおすすめです。
  • title属性の設定： アクセシビリティ向上のため、iframeの内容を説明するtitle属性を付与することが推奨されています。
  1. divタグを使ってHTML要素のスタイルを設定する方法

    <div>タグを使用すると、HTMLドキュメント内の特定のセクションを簡単に定義できます。複数のHTML要素をひとつのブロックにまとめ、そのまとまりに対して一括でスタイルを適用できるのが大きな特徴です。<div>タグはブロックレベル要素として扱われ、ページのレイアウト構造を作る際によく利用されます。次のコードを実行すると、<div>タグを使ってHTML要素にスタイルを適用する方法を実際に確認できます。ここでは、id=container を持つ要素に対してスタイルルールが適用されます。このように、id属性はCSSセレクターとして機能します。サンプルコード<

  2. HTMLの<var>タグを使って変数をフォーマットする方法

    HTMLの<var>タグとはHTMLの <var> タグは、文書内のテキストを「変数」としてフォーマットするための要素です。主に数学的な式やプログラムコードの中で、変数を表す際に使用されます。<var> タグで囲まれたテキストは、多くのブラウザではイタリック体（斜体）で表示されます。これにより、数式の中の変数が視覚的に区別しやすくなります。基本的な使い方以下は、数式内の変数を <var> タグでマークアップするシンプルな例です。<!DOCTYPE html> <html>    <head>