iframe要素は、ウェブページの中に外部ページを丸ごと埋め込む際に利用します。
埋め込んだ部分はインラインフレームと呼びます。
インラインフレームでは、他のサーバー上にあるウェブページであっても、そのURLを指定するだけで自分のウェブページ内に埋め込むことができます。
iframe要素による方法の場合、記述するHTMLソースが短くて済みます。
フォームの入力欄から送信部分までをサービス側に任せてしまえるので、HTMLに慣れていない人にも導入しやすい手法でしょう。
まずは、インラインフレームを埋め込むためのHTMLファイルを新規作成します。
ファイル名はcontact_iframe としましょう。
前に作成したcontact_jisaku をコピーして、フォームの部分を削除してやるとファイル作成の手間が省けるでしょう。
作成したcontact_iframe は、以下のHTMLソースにしてください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="table.css"> <link rel="stylesheet" href="form.css"> <title>お問合せ｜ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index "><img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_subpage"> <img src="./images/img_contact.png" alt="お問合せ"> </div> <!-- サブメニュー（左カラム） --> <div id="submenu"> <h2>お問合せ</h2> <ul> <li><a href="#info0001">フォームからのお問合せ</a></li> <li><a href="#info0002">メールでのお問合せ</a></li> <li><a href="#info0003">お電話でのお問合せ</a></li> </ul> </div> <!-- インフォメーション（右カラム） --> <div id="info"> <h3 id="info0001">フォームからのお問合せ</h3> <hr> <h3 id="info0003">お電話でのお問合せ</h3> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/contact0001.png" alt="電話番号0000-000-000" class="infoimg_tel"> <div class="remarks"> <h4>受付時間</h4> 受付時間は、平日午前9時から午後5時までとなります。<br> </div> <hr> </div> <!-- フッタ --> <div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div> </div> </body> </html>
保存をしたらブラウザで表示してみましょう。
まだ、iframe要素は指定していないので、「フォームからのお問合せ」の部分には何も無い状態です。
このHTMLソースをベースにインラインフレームを埋め込んでいきます。
| <前へ | 目次へ | 次へ> |
