トップページ  > ウェブ制作チュートリアル  > 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)を作成していきます。 まだ、ヘッダ画像やサブメニューのテキストなどが「会社概要」の内容になっていないので、次回これらの部分を書き換えていきましょう。

まとめ
  1. 新しいHTMLファイルを作成する際には、先に作成したHTMLファイルをコピーすると効率が良い
  2. 同じウェブサイト内のHTMLソースには共通部分が多いので、テンプレートとして利用できる
  3. 最初はひとつひとつのパーツ作成に時間が掛かるが、一度作れば使いまわしがきくので徐々に制作速度が上がる
<前へ 目次へ 次へ>
▲ページ先頭へ
トップページ  > ウェブ制作チュートリアル  > HTMLファイルを複製する
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ