HTMLテンプレート【ベースHTML４：ヘッダー部分】

ども、サンデーアマグラマーNorimakiです。
現在、取り上げているテーマはこちら。

「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」

です。今回はちょいと思うところがあるのでちゃっちゃといきます。


前回、HTMLソースの簡単な解説をしましたが、これまで言ってきたように
ソースは大きく分けて４つのパーツに別れています。繰り返しますが、

・ヘッダー
・本文
・サイドバー
・フッター

この４つです。で、これらを Container という ID で括ってまとめている。
という形になっています。


では早速、ヘッダーを見てみます。

<div id="Container">
<h1>{$サイトキーワード}</h1>

<div id="Header">
<h2 class="SiteTitle"><a href="http://........">ここにサイトタイトルを</a></h2>
<p class="SubTitle">ここにサブタイトルを<br>ここにサブタイトルを<br></p>
<p class="SiteExp">ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。。</p>
<p class="AfBanner">
<a href="http://....."><img src="./images/banner.jpg"></a></p>
</div>

こうなっています。
先ほども説明したとおり、最初の div はコンテンツ全体を
まとめる部分です。

h1タグが Header ブロックから外れていますが、できるだけBody直下に
置きたかったというのがあります。だったら div よりも上に置けって
話になっちゃいますが、ま、今回はこれで行きます。

Headerブロックの中身としては、今までご説明してきたとおりですが、

・サイトタイトル
・サブタイトル
・サイト説明文
・バナー

が置かれています。ここは特に難しい部分はないと思います。
リンクの貼り方が分かれば書き換えは可能でしょう。


今までの解説では、グローバルメニューとリンクもHeader内に置く
ということでしたが、諸事情があって Headerブロックからは外しています。

順番としては次に出てくるんですけども。

<div id="GlobalNavi">
<ul id="GL3">
  <li class="GL1"><a href="URL">リスト</a></li>
  <li class="GL2"><a href="URL">リスト</a></li>
  <li class="GL3"><a href="URL">リスト</a></li>
</ul>
</div>

<div id="Links">
<ul>
  <li class="Link1"><a href="URL1">リンク１</a> | </li>
  <li class="Link2"><a href="URL2">リンク２</a> | </li>
  <li class="Link3"><a href="URL3">リンク３</a></li>
</ul>
</div>

特にここは問題ないでしょう。先程と同様にリンクが貼ってあるだけです。
具体的なデザインに関しては、スタイルシートが担当なので、そちらに
任せます。

あと、ひとつだけ。

グローバルメニューのID,クラス指定ですが、クラスはそのままで
問題ないのですが、IDについては、どのページを表示しているか
ということを表しています。

ここでは GL3 となっていて、３番目のページを表示しているということを
意味します。それと同時に、グローバルメニューの３番目のリンクだけが
色違いで表示されています。

スクリーンショットをご覧ください。そうなっています。




ここはスタイルシートの担当部分ですが、HTML部分でも用意すべき
ところがあるので取り上げておきました。

とりあえず今回はこんな感じで。


ではでは。
Norimaki。



無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ