1.sub_spcの詳細について
サンプル012-01 というとことまで来ました。
最初のころの サンプル004-01 から比べていつの間にか進歩してきたんですね！
しかもその進歩が目に見えるからいいですね！ホームページ作りは！
・・・さて、画面左側の「sub_spc」を作って、「index.html」を完成させましょう！
その他のページは、基本的な構造は同じなので、「index.html」を完成させるとだいぶ楽になると思いますよ！
例によって、CSSファイルに
width: 90%;
background-color: #dd9900;
padding: 5px;
border: 2px solid #dd9900;
text-align: center;
color: #ffffff;
}
.column {
width: 90%;
margin-bottom: 20px;
background-color: #ffffff;
padding: 5px;
border: 2px solid #dd9900;
text-align: left;
line-height: 120%;
color: #333333;
}
a:link {
text-decoration: underline;
color: #0000ff;
}
a:visited {
text-decoration: underline;
color: #0000ff;
}
a:hover {
text-decoration: underline;
position: relative; top: 1px; left: 1px;
color: #ff0000;
}
上の三つについては、もう大丈夫ですよね！
「a」が付いている三つについては、それぞれリンク（他のページを表示させる。）部分についての指定です。
○○の部分の標記の仕方が、他とは違っていますが「a:link」⇒「訪問前のリンク」、「a:visited」⇒「訪問後のリンク」、「a:hover」⇒「カーソルを乗せている時」と覚えておきましょう！
「text-decoration」の××で「none」を指定するとアンダーラインが消えます。
「position: relative; top: 1px; left: 1px;」の部分は、表示をずらす設定（この場合は、上から1px、左から1px）をしています。
○○が「a:hover」なので、「カーソルを乗せたときは、上から1px、左から1px表示をずらすんだよ」という意味になります。
下のHTMLソースを打ち込んだあと、あなたのホームページのリンクの部分（画面左側の「2.テーマ」「3.リンク」と青字で書いてある部分）にカーソルを持って行ってみましょう。
字が赤くなって少し動きますよね！
この部分もこのまま覚えておきましょう。
次に、HTMLファイルに
<div align="center">
<div id="field_spc">
<div id="top_waku">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
<div id="main_spc">
<div class="ao_waku"><h2>話題その１</h2></div>
<p>
話題その１について、色々なことを書いて見ましょう。<br>
どのようなホームページになるのかは、結局その内容によるんですね！
</p>
<p>
どんなに配置や見た目のよさを追求しても内容がよくなければ読んでもらえません。<br>
あなた独自のすばらしいホームページを作ってください。
</p>
<p>
目立たせたい部分は、<span class="hutomoji">字を太くしたり</span>、<span class="red">色を変えたり</span>しましょう。<br>
<span class="big">字を太く大きくすることも</span>効果的ですね！
</p>
<p>
大事な言葉や文章は、<strong>タグで囲みましょう。<br>
視覚的効果以外に<strong>検索エンジン対策</strong>にも有効です。
</p>
<p> </p>
<div class="ao_waku"><h2>話題その２</h2></div>
<img src="./img/photo01.jpg" style="float:left;margin-right:10px;border:3px ridge teal;" alt="美味しそう！">
<p>
楽しい写真を貼るとホームページもにぎやかになりますね！
</p>
<p>
枠線で飾ってみてもいいかもね！
</p>
</div>
<div id="sub_spc">
<div class="midashi">
<span class="big">目 次</span>
</div>
<div class="column">
<span class="hutomoji">1.トップページ</span><br>
<a href="./page2.html">2.テーマ</a><br>
<a href="./link.html">3.リンク</a>
</div>
<div class="midashi">
<span class="big">サブコンテンツ</span>
</div>
<div class="column">
<p>
「話題その１」「話題その２」から波及した話や、ちょっと一息つける話や勿論小さな画像を入れてもいいし・・・
</p>
<p>
スタイルシートでクラスを増やせば、いろんなことができます。
</p>
<p>
ホームページのレイアウトも無限に考えられますね！<br>
あなただけのすばらしいホームページが出来ますように！！
</p>
</div>
</div>
<br class="fe"><br>
<hr>
</div>
</div>
</body>
ここでも、「midashi」というボックスを作りサブコンテンツの見出し（製作中のホームページの例では、「目次」「サブコンテンツ」)を表示させています。
ただし、「目次」「サブコンテンツ」という言葉自体は、重要な言葉ではないので、<h2>は使わずに<span class="big">としています。
字の大きさや太さは、<h2>を使った場合と変わりませんが、論理的な重要度は、<span class="big">にはありません。
更に「column」というボックスを作り「midashi」の下に置いています。ここは、「background-color」を白に設定しています。「midashi」のmarginを設定していない（marginはゼロ）ので、「midashi」と「column」がくっついて見えますが、実はボックスを二つ縦に並べているのです。
同じ構造で、「サブコンテンツ」部分も成り立っています。「column」にはmargin:20px;を設定しているので「目次」の部分と「サブコンテンツ」の部分はその分離れて表示されていますね。
<a href="./page2.html">2.テーマ</a>の部分は、囲まれた部分（この例では「2.テーマ」）をクリックすると指定してあるページ（「./page2.html」）を表示させるタグです。ページの指定は、相対パス で表示してありますが、他のホームページへリンクする場合は、絶対パスを使うことになります。
（ちなみに「page2.html」「link.html」はこれから作っていくページです。）
これで、「index.html」は完成ですね！やりましたっ！
意外と簡単だったんじゃないですか！
HTMLファイルとCSSファイルの関係をしっかり理解していれば大丈夫です。
さて、勢いに乗って、２ページ目、３ページ目も作っちゃいましょう！
