インラインフレーム

HTMLのインラインフレームという機能を使えば、ページの一部に別のページを埋め込むことができます。 HTML文書の中でインラインフレームを使う方法を見ていきましょう。

インラインフレームを作るための要素

インラインフレームを作るには、iframe要素を使います。 インラインフレームを使うと、あるページの中に別のページを埋め込むことができます。 このため、複数のページで共通する部分を一つのHTMLファイルとして分離することができます。 共通する部分を変更するとき、一つのHTMLファイルを編集するだけですむので便利です。 iframe要素の内容は、インラインフレームが表示できない場合に限り表示されます。

iframeはinline frameを略したものです。

HTML4以前ではフレームを作るためのframe要素が使えましたが、HTML5ではframe要素は廃止されました。

表 3-16 : iframe要素の基本情報
開始タグ 終了タグ 分類 内容となるもの
必須 必須 インライン要素 ブロックレベル要素、インライン要素、テキスト
表 3-17 : iframe要素に指定できる主な属性
属性の書式 説明
src="ページのURL" インラインフレーム内に表示されるページのURLを指定できます。
width="幅" インラインフレームを表示するときの幅を指定できます。 値は、ピクセル数を表す整数か、パーセンテージを指定します。
height="高さ" インラインフレームを表示するときの高さを指定できます。 値は、ピクセル数を表す整数か、パーセンテージを指定します。
name="フレーム名" インラインフレームに名前を付けることができます。 付けた名前をa要素のtarget属性に指定すれば、リンク先のページをインラインフレーム内で表示することができます。

iframe要素で別のページを埋め込む

「iframe_sample01.html」は、iframe要素を使って別のページを埋め込む例です。 埋め込まれるページは「embedded.html」です。

iframe_sample01.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>インラインフレームで別のページを埋め込む</title>
    </head>
    <body>
        <iframe src="embedded.html" width="320" height="240">
            このテキストは、インラインフレームが表示できない場合に限り表示されます。
        </iframe>
    </body>
</html>
embedded.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>埋め込まれるページ</title>
    </head>
    <body>
        <p>
            これは埋め込まれるページの内容です。
        </p>
    </body>
</html>
手順
  1. 「ch03」フォルダーの中に「iframe_sample01」フォルダーを作る。
  2. 「iframe_sample01」フォルダーの中に「iframe_sample01.html」を作る。
  3. 「iframe_sample01.html」のコードを入力し保存する。
  4. 「iframe_sample01」フォルダーの中に「embedded.html」を作る。
  5. 「embedded.html」のコードを入力し保存する。
  6. 「iframe_sample01.html」をブラウザで開く。
図 3-39 : エディターで「iframe_sample01.html」、「embedded.html」のコードを入力する

「iframe_sample01.html」をブラウザーで開くと、インラインフレームの中に「embedded.html」の内容が埋め込まれた状態で表示されます。

図 3-40 : 「iframe_sample01.html」をGoogle Chromeで開いた

Aptana Studio 3 ワンポイント アドバイス

テキストの検索と置換

コード中のテキストを検索したり置換する方法について解説します。 検索や置換のスコープ（範囲）は、「ワークスペース全体」、「選択されたリソース（ファイルやフォルダー）」、「エンクロージング・プロジェクト」、「ワーキング・セット」などを指定することができます。

テキストを検索する

「iframe_sample01」フォルダーの中にあるファイルで、「ページ」というテキストを検索してみましょう。 まず、[App Explorer]で「iframe_sample01」フォルダーをクリックして選択し、ツールバーの[検索]ボタンをクリックします。

図 3A-32 : [App Explorer]で「iframe_sample01」フォルダーを選択して、[検索]ボタンをクリックする

[検索]ダイアログでは、今回は二つの項目だけを指定しておきます。まず、[含まれるテキスト]に検索したいテキストを入力します。 今回は「ページ」と入力しておきます。 次に、[スコープ]で[選択されたリソース]を選択しておきます。 予め、[App Explorer]で「iframe_sample01」フォルダーを選択してありますので、このフォルダーの中にある「iframe_sample01.html」と「embedded.html」だけが検索対象となります。 最後に[検索]ボタンをクリックします。

図 3A-33 : [検索]ダイアログで[含まれるテキスト]等を入力し、[検索]ボタンをクリックする

[検索]ビューが開き、検索の結果が表示されます。 [検索]ビューの中には3個の一致が表示され、「ページ」というテキストがハイライトされているはずです。 このうちの一つをダブルクリックすると、エディターでも対応するコードが表示され、「ページ」というテキストがハイライトされます。

図 3A-34 : [検索]ビューが開き、検索結果が表示された
テキストを置換する

次はテキストの置換について説明します。 「iframe_sample01」フォルダーの中にあるファイルで、「ページ」というテキストを「Webページ」に置換してみましょう。 まず、検索のときと同様に、[App Explorer]で「iframe_sample01」フォルダーをクリックして選択し、ツールバーの[検索]ボタンをクリックします。

図 3A-35 : [App Explorer]で「iframe_sample01」フォルダーを選択して、[検索]ボタンをクリックする

[検索]ダイアログでは、[含まれるテキスト]に置換したいテキストを入力します。 今回は「ページ」と入力しておきます。 [スコープ]で[選択されたリソース]を選択しておきます。 予め、[App Explorer]で「iframe_sample01」フォルダーを選択してありますので、このフォルダーの中にある「iframe_sample01.html」と「embedded.html」だけが検索・置換の対象となります。 次に[置換]ボタンをクリックします。

図 3A-36 : [検索]ダイアログで[含まれるテキスト]等を入力し、[置換...]ボタンをクリックする

[テキスト一致の置換]ダイアログで、[置換]に「ページ」と書かれていることを確認し、[次と]に「Webページ」と入力してから、[OK]ボタンをクリックします。

図 3A-37 : [テキスト一致の置換]ダイアログで、[次と]を入力して[OK]ボタンをクリックする

エディターで「ページ」というテキストが、すべて「Webページ」に置換されたことを確かめます。

図 3A-38 : テキストの置換が完了した