ホームページの作り方(ホームページの完成！)

ホームページを完成させよう！

ここで作ったあなたのホームページをもとにして、あなただけのすばらしいホームページの世界を広げていきましょう。
きっとオリジナリティあふれたすばらしいホームページが出来ますよ！

1.各ページを作ろう

まずは、CSSファイルに書き加える作業をしましょう。
ちなみに今回のホームページ作りでは、CSSファイルはこれで完成となります。

表を作る時のHTMLタグ「table」「td」についての設定です。
詳細は、HTMLを見ながら説明していきますね。

次は、HTMLファイルを作っていくわけですが、そのやり方は、前ページでお話したとおりです。
レイアウトに関係のない箇所、すなわち内容（コンテンツ）の部分だけを書き換えていけばいいんですよね。
更に、例えばメインコンテンツに「話題その３」を加えたければ
「<div class="ao_waku"><h2>〜</h2></div>」の部分をコピーして「話題その２」を構成している一番下の<p>〜</p>の下に貼り付けその下に内容（<p>〜</p>）を作っていけばいいんです。
サブコンテンツも同じようにして、広告欄を作ってみてもいいし「一言コーナー」を作ってみてもいいし・・

ホームページが出来たら色々改造してみてください！

ここでは、目標のホームページが決まっているので、時間短縮のため違うやり方でHTMLソースを作ってしまいます。
まず、サンプルの ホームページ を開いていただいて、ソースを表示させて下さい。
画面の任意の場所（画像の上以外）で右クリック→「ソースの表示」でしたよね。

ソース（メモ帳）が出てきたら、左上の「編集(E)」→「すべて選択(A)」をクリックすると反転文字になります。反転文字の任意の場所で右クリック→「コピー」をクリック

ここで、このメモ帳は消してしまってかまいません。
次に、あなたが先ほど作った「page2」のソース（メモ帳）を出してください。

同じように「編集(E)」→「すべて選択(A)」反転文字の任意の場所で右クリック→「貼り付け」をクリック
上書き保存をして「page2.html」は、できました。

但しこの時、ページの一番下に広告が表示されてしまいます。
これは、プロバイダーの広告で自動的に挿入されているものです。
気になる方は、HTMLファイルの</head>直前の
<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" />の部分と
</body>直前の
<div class="tdftdiv">〜</div>を削除してください。

前ページとこのページを参考にして、「page2.html」と、同じようにあなたの「homepage」フォルダに「link.html」を作ってみて下さい。

かなり楽に作っちゃいましたが、あなたのオリジナルのホームページを作る時は、前ページの方法で作っていきましょう！

最後に「page2.html」に出てきた表（table)の話を少しだけ・・・

2.tableについて

表を表示する時に<table>タグを使用します。
「table」「tr（行）」「td（列）」が主な表に構成タグです。
CSSでは、tableで全体の設定を　tdでそれぞれの枠の設定をしています。 「border-collapse: collapse;」は、「それぞれの境界線は重なり合わす」という設定です。
境界線を重ねない場合は、××の部分が「separate」となります。
<table>タグは、その気になれば表を作る以外にもページのレイアウトとしても使用することが出来ます。
しかし、HTMLソースが複雑になるうえにSEO的にもあまり好ましくないそうです。
やはり、レイアウトはCSSに任せておいたほうがいいと思います。

3.ホームページの内容について

これで一応目標のホームページ作りが完成しました。
よかったよかった！感無量ですね！
・・・ってそれほどでもないか

まあともかくこれまで、勉強（？）してきたのは、どちらかというとホームページ作りの技術的な話です。
ホームページの価値のほとんどは、その内容によって決まってきます。
あなたのホームページのテーマは何でしょうか？
本当は、それを考えるのが一番大変なのかもしれませんね！
一生懸命考えてすばらしいホームページを作ってみて下さい！！