トップページ  > ウェブ制作チュートリアル  > iframeを埋め込むHTMLファイルを作成する
第21章 フォームサービスを利用する

★iframeを埋め込むHTMLファイルを作成する

iframeを埋め込むHTMLファイルを作成する

広告

iframe要素は、ウェブページの中に外部ページを丸ごと埋め込む際に利用します。 埋め込んだ部分はインラインフレームと呼びます。 インラインフレームでは、他のサーバー上にあるウェブページであっても、そのURLを指定するだけで自分のウェブページ内に埋め込むことができます。

iframe要素による方法の場合、記述するHTMLソースが短くて済みます。 フォームの入力欄から送信部分までをサービス側に任せてしまえるので、HTMLに慣れていない人にも導入しやすい手法でしょう。

まずは、インラインフレームを埋め込むためのHTMLファイルを新規作成します。 ファイル名はcontact_iframe.htmlとしましょう。 前に作成したcontact_jisaku.htmlをコピーして、フォームの部分を削除してやるとファイル作成の手間が省けるでしょう。

作成したcontact_iframe.htmlは、以下のHTMLソースにしてください。

HTMLソース(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.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>
	
	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</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="info0002">メールでのお問合せ</h3>
		<p>
		xxx@xxxxxxxxxx.xxx
		までメールをお送りください。
		</p>
		<hr>

		<h3 id="info0003">お電話でのお問合せ</h3>
		<img src="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ソースをベースにインラインフレームを埋め込んでいきます。

まとめ
  1. iframe要素を使うと、URLを指定するだけで自分のウェブページ内に外部ページを丸ごと埋め込むことができる
  2. インラインフレームなら、フォームの入力欄から送信部分までをサービス側に任せてしまえる
  3. 記述するHTMLソースが短くて済むので、HTMLに慣れていない人にも導入しやすい
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ