HTMLファイルを複製する－ウェブ制作チュートリアル

トップページ > ウェブ制作チュートリアル > HTMLファイルを複製する

第17章　テーブル（表）を作成する

★HTMLファイルを複製する

HTMLファイルを複製する

ここからは、「会社概要」のページ（profile.html）を作成していきます。すでに完成したトップページのHTMLファイルindex.htmlをベースにすると効率が良いので、これを複製してprofile.htmlを作成します。

会社概要のページについては、「仮のリンク先ページを作る」で作成したprofile.htmlが存在していますが、これはリンク切れを起こさないために作成した仮ファイルです。この仮ファイルは、削除してしまいましょう。

既存のprofile.htmlが削除できたら、index.htmlをコピーしてファイルを複製します。複製したファイルの名前をprofile.htmlと変更したうえで、profile.htmlを開いてHTMLソースの内容を編集します。

index.htmlをベースにして不必要な部分を削除します。削除するのは、「インフォメーション（右カラム）」の部分です。

この時点でのprofile.html のHTMLソースは、以下の通りです。

HTMLソース（profile.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_index">
	<img src="./images/img_index.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>
		<hr>
	
		<h3 id="info0003">環境への取り組み</h3>
		<hr>
	</div>

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

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

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

上記のHTMLソースをベースにして、「会社概要」ページ（profile.html）を作成していきます。まだ、ヘッダ画像やサブメニューのテキストなどが「会社概要」の内容になっていないので、次回これらの部分を書き換えていきましょう。

まとめ

新しいHTMLファイルを作成する際には、先に作成したHTMLファイルをコピーすると効率が良い
同じウェブサイト内のHTMLソースには共通部分が多いので、テンプレートとして利用できる
最初はひとつひとつのパーツ作成に時間が掛かるが、一度作れば使いまわしがきくので徐々に制作速度が上がる

<前へ

目次へ

次へ>