CSSとXHTMLでメインを装飾
【STEP4】文字装飾,リンク設定,テーブルの設定
メイン部では、<H2>および<H3>と<p>の定義が必要です。他にはリンクのや、テーブル（表）もメイン部では良く使いますので、CSSで定義します。
まず、STEP4までの内容が全て織り込まれたファイルをダウンロードしてください。zip形式で圧縮されていますので、展開してご利用してください。
【STEP4】CSSファイル
#main a { }がリンクにマウスが乗っていないときの定義で、#main a:hover{ }がマウスが乗ったときの定義です。ここでは、予め、リンクだと想像しやすい色を指定し、マウスが乗ると同じ色のまま下線が出るようにしています。
#main table { }がテーブルの定義です。文字サイズとテーブルの次に入れる空白行を指定しています。
コメントを見れば全て何をやっているか判りますよね。＾＾
【STEP4】XHTMLファイル
今回は新しく出てきたXHTMLの記述の部分を掲載しました
リンクは<a>タグを使ってhrefに文字列を指定します。例えば、このページへのリンクであれば、href="http://hp.noteta.net/design4.php"となります。href="#"だとクリックしても何も起こりません。例題用ですね。
テーブルは情報をうまく纏めるのに便利ですが、XHTMLはなかなか難しいですね。
要点だけ説明すると、<tr>〜</tr>の数だけ行があって、各行には<td>〜</td>の数だけ列があります。（避ける方法はありますが）各行の列数が合わないとおかしなことになりますよ。テーブルは、このように字下げして書かないと頭が混乱してきますね。
CSSとXHTMLでメイン部装飾後のプレビュー結果
【STEP4】プレビュー実行
XHTMLをCrescnt Eveでプレビューしてみます。（プレビュー方法を知りたい方→プレビュー方法）
メイン部の便宜的に付けていた色は削除してあります。だんだんとホームページらしくなってきました。
もうお分かりだと思いますが、ノテータ式−ホームページ作成講座のベースになっているテンプレートが出来上がるんです。
ここでも、XHTMLとプレビュー結果とCSSを良く突き合わせて確認してみてくださいね。
「CSSとXHTMLでメインを装飾」は以上です
如何でしたか？次はサブ部を装飾します。メニューボタンも付いて、かなりホームページらしくなりますよ。
