前回記事Webサイトを作ろう！【5】トップページと画像を用意にて大体の準備が整ったかと思いますので、それらを使ってトップページを作成していきます。
まず今回は、こんな感じの完成形を目指そう！というページの例を、更に次の記事にてコード記述やタグ記述の詳細をご説明します。
ページ作成例とタグ記述の説明を並べてご覧いただくと分かりやすいかと思います。
トップページの一例
まずは弊社を例にしてシンプルな企業紹介のページを作ってみます。
【 作成例 】
ソースコード
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>
<meta content=”text/css” http-equiv=”Content-Style-Type”>
<title>サイトの名前</title>
<meta name=”keywords” content=”サイトに関連するキーワード,あんまりいっぱい入れちゃ逆効果,多くても10個くらいで,例えば『 猫,犬,ペットショップ,高松市 』のように単語を入れてください,区切りは『 , 』で”>
<meta name=”description” content=”検索結果に出てくるサイト名の下の説明文。”>
<!– ここから上はおまじないのような物と思って今は深く考えずに使ってください –>
<!– 文字の背景色を変える –>
<style type=”text/css”>
.blue {
background-color:#0000ff;
color:#ffffff;
}
</style>
</head>
<!– ここから下がページのメインコンテンツです –>
<body>
<header>
<img src=”image/top.gif” alt=”トップ画像”>
</header>
<h1>【 見出しh1 】 パソコン修理のエヌシステム <a name=”top”> </a> </h1>
<!– 地平線を引く –>
<hr>
<h2>【見出しh2】 宅配パソコン修理サービスのパソピア 全国対応可能！</h2>
<img src=”image/main.gif” width=”378″ height=”229″ alt=”パソコン修理” align=”left” hspace=”10″> <br>
<br clear=left>
<p>形状・メーカーを問わず、液晶画面修理、HDDやSSDの交換、DVDドライブの交換、</p>
<p>マザーボード修理など幅広くパソコン修理に対応いたします。</p>
<p>お問合せやお見積りはお電話、FAX、<a href=”mailform.html” target=”_blank”>メールフォーム</a>から
お気軽にご相談ください。 </p>
<h3>【見出しh3】 会社概要</h3>
<!– テーブル（表）で複数項目の見た目を整える –>
<table border=”1″>
<tr>
<td>社名</td>
<td>有限会社 エヌシステム</td>
</tr>
<tr>
<td>店舗所在地</td>
<td>〒761-8033 <a href=”http://www.mapfan.com/m.cgi?MAP=E134.0.8.9N34.18.38.6&s1=%A2%A9761%2D8033%20%B9%E1%C0%EE%B8%A9%B9%E2%BE%BE%BB%D4%C8%D3%C5%C4%C4%AE%A3%B2%A3%B3%2D%A3%B3″ target=”_blank”>香川県高松市飯田町２３－３</a><br clear=left>
（クリックで地図サイトMapFanが開きます）</td>
</tr>
<tr>
<td>TEL/FAX</td>
<td>TEL：087-813-0481 FAX：087-813-0482</td>
</tr>
<tr>
<td>営業時間</td>
<td>月～金 9：00～17：00</td>
</tr>
<tr>
<td>設立</td>
<td>平成14年12月10日</td>
</tr>
<tr>
<td>事業内容 </td>
<td>パソコンの修理、及びパーツ販売</td>
</tr>
<tr>
<td>主要取引銀行</td>
<td>ジャパンネットバンク・楽天銀行・ゆうちょ銀行</td>
</tr>
</table>
<br clear=left>
<h3>【見出しh3】 業務内容</h3>
<!– 下線 –>
<u>パソコン修理</u>
<!– リスト –>
<ul>
<li>液晶画面修理
<li>電源修理
<li>マザーボード基板修理
<li>HDD・SSD修理
<li>CD・DVD・Blu-rayドライブ修理
<li>キーボード・タッチパッド修理
<li>その他、各種修理可能
</ul>
<br clear=left>
<!– 一番上で指示したCSSがここに対応しています –>
<span class=”blue”> ご依頼お待ちしております </span> <br clear=left>
<br clear=left>
<a href=”#top”>▲このページの上部に戻る</a>
</div>
<hr>
<!– フッター –>
<div class=”footer”> <br>
Copyright (C) 2005-2014 N-System Co,Ltd. All Rights Reserved.<br>
</div>
</body>
</html>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>
<meta content=”text/css” http-equiv=”Content-Style-Type”>
<title>サイトの名前</title>
<meta name=”keywords” content=”サイトに関連するキーワード,あんまりいっぱい入れちゃ逆効果,多くても10個くらいで,例えば『 猫,犬,ペットショップ,高松市 』のように単語を入れてください,区切りは『 , 』で”>
<meta name=”description” content=”検索結果に出てくるサイト名の下の説明文。”>
<!– ここから上はおまじないのような物と思って今は深く考えずに使ってください –>
<!– 文字の背景色を変える –>
<style type=”text/css”>
.blue {
background-color:#0000ff;
color:#ffffff;
}
</style>
</head>
<!– ここから下がページのメインコンテンツです –>
<body>
<header>
<img src=”image/top.gif” alt=”トップ画像”>
</header>
<h1>【 見出しh1 】 パソコン修理のエヌシステム <a name=”top”> </a> </h1>
<!– 地平線を引く –>
<hr>
<h2>【見出しh2】 宅配パソコン修理サービスのパソピア 全国対応可能！</h2>
<img src=”image/main.gif” width=”378″ height=”229″ alt=”パソコン修理” align=”left” hspace=”10″> <br>
<br clear=left>
<p>形状・メーカーを問わず、液晶画面修理、HDDやSSDの交換、DVDドライブの交換、</p>
<p>マザーボード修理など幅広くパソコン修理に対応いたします。</p>
<p>お問合せやお見積りはお電話、FAX、<a href=”mailform.html” target=”_blank”>メールフォーム</a>から
お気軽にご相談ください。 </p>
<h3>【見出しh3】 会社概要</h3>
<!– テーブル（表）で複数項目の見た目を整える –>
<table border=”1″>
<tr>
<td>社名</td>
<td>有限会社 エヌシステム</td>
</tr>
<tr>
<td>店舗所在地</td>
<td>〒761-8033 <a href=”http://www.mapfan.com/m.cgi?MAP=E134.0.8.9N34.18.38.6&s1=%A2%A9761%2D8033%20%B9%E1%C0%EE%B8%A9%B9%E2%BE%BE%BB%D4%C8%D3%C5%C4%C4%AE%A3%B2%A3%B3%2D%A3%B3″ target=”_blank”>香川県高松市飯田町２３－３</a><br clear=left>
（クリックで地図サイトMapFanが開きます）</td>
</tr>
<tr>
<td>TEL/FAX</td>
<td>TEL：087-813-0481 FAX：087-813-0482</td>
</tr>
<tr>
<td>営業時間</td>
<td>月～金 9：00～17：00</td>
</tr>
<tr>
<td>設立</td>
<td>平成14年12月10日</td>
</tr>
<tr>
<td>事業内容 </td>
<td>パソコンの修理、及びパーツ販売</td>
</tr>
<tr>
<td>主要取引銀行</td>
<td>ジャパンネットバンク・楽天銀行・ゆうちょ銀行</td>
</tr>
</table>
<br clear=left>
<h3>【見出しh3】 業務内容</h3>
<!– 下線 –>
<u>パソコン修理</u>
<!– リスト –>
<ul>
<li>液晶画面修理
<li>電源修理
<li>マザーボード基板修理
<li>HDD・SSD修理
<li>CD・DVD・Blu-rayドライブ修理
<li>キーボード・タッチパッド修理
<li>その他、各種修理可能
</ul>
<br clear=left>
<!– 一番上で指示したCSSがここに対応しています –>
<span class=”blue”> ご依頼お待ちしております </span> <br clear=left>
<br clear=left>
<a href=”#top”>▲このページの上部に戻る</a>
</div>
<hr>
<!– フッター –>
<div class=”footer”> <br>
Copyright (C) 2005-2014 N-System Co,Ltd. All Rights Reserved.<br>
</div>
</body>
</html>
この記述を書いたテキストファイルをサーバー上にアップロードすれば、上の画像のようなページが表示されます。
ちょっとした店舗や企業のページであればこれを丸々コピーして画像やテキストを適宜修正していただくと何とかなると思います。
それでは次回、タグの構成や意味などをご説明します。
一番上でも申し上げましたが、こんな感じでウィンドウを横に並べて、一連のタグ（ご自分のテキストエディタにコピー＆ペーストしたもの）と個別の説明（次の記事を開いたブラウザ）を見比べていただくと分かりやすいかもしれません。
Webサイトを作ろう！：シリーズ記事
【1】レンタルサーバーとドメイン
【2】必要なソフトを準備する
【3】ページの構成を考える
【4】テーマカラーを決める
【5】トップページと画像を用意
【6】トップページの一例（この記事です）
【7】HTMLソースコードの解説①
【8】HTMLソースコードの解説②
【9】複数ページを作る
【10】横並びメニューをCSSで作る
【11】縦並びメニューをCSSで作る
【12】スタイルシート（CSS）の解説
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
「Webサイトはこうしてもらえると嬉しい」という個人的な希望
