トップページ  > ウェブ制作チュートリアル  > HTMLファイルを複製する
第22章 動画を表示する

★HTMLファイルを複製する

HTMLファイルを複製する

広告

今回より「製品紹介」ページ(product.html)を作成していきます。 「会社概要」ページ(profile.html)や「お問合せ」ページ(contact.html)を作成したときと同様に、HTMLファイルの複製から始めましょう。

「会社概要」ページ(profile.html)をコピーして、新しいHTMLファイルを作ろうと思います。 複製してできたHTMLファイルの名前はproduct.htmlとしてください。このproduct.htmlを「製品紹介」ページとして作っていきます。

もちろん、ファイルの複製ではなく、テキストエディタでHTMLファイルをゼロから新規作成しても構いません。 この場合には、文字コードをUTF-8にして、ファイル名をproduct.htmlにして新規保存します。

product.htmlでは、画像ファイルとしてimg_product.png、product0001.png、product0002.pngを使用します。 ダウンロードしたサンプルファイルからこれらの画像ファイルをコピーして、あらかじめimagesフォルダに追加しておきます。

画像ファイル:img_product.png、product0001.png、product0002.png

product.htmlのHTMLソースを以下の内容にしてください。 以下のHTMLソースは、このチュートリアルで今までに学んだテクニックのみを使用しており、特に新しいHTMLタグなどは登場しません。 コピーしたファイルの内容を部分的に書き換えても良いですし、復習のつもりで、すべて手打ち入力しても良いでしょう。

HTMLソース(product.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.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_product.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>
		<p>
		<img src="images/product0001.png" alt="個人向け製品のイメージ画像" class="infoimg_subpage">
		あいうえおかきくけこさしすせそ、(中略)
		</p>
		<hr>

		<h3 id="info0002">法人向け製品</h3>
		<p>
		<img src="images/product0002.png" alt="法人向け製品のイメージ画像" class="infoimg_subpage">
		あいうえおかきくけこさしすせそ、(中略)
		</p>
		<hr>

		<h3 id="info0003">紹介ビデオ</h3>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

保存したらブラウザで表示してみましょう。以下のような画面になれば成功です。

「紹介ビデオ」のところはまだ何も記述していないので、動画は掲載されていない状態です。 次回、動画の掲載に挑戦してみましょう。

まとめ
  1. 新しいHTMLファイルを作成する際には、先に作成したHTMLファイルをコピーすると効率が良い
  2. 同じウェブサイト内のHTMLソースには共通部分が多いので、テンプレートとして利用できる
  3. コピーしたファイルの内容を部分的に書き換えても良いし、復習のつもりですべて手打ち入力しても良い
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ