最後にサブページのヘッダー部分にサイト訪問者に上位ページへナビゲートするための パンくずリストと検索ボックスの入ったボックスを追加 します。

■ ヘッダーのボックスをもう一つ追加する

<div id="header2" align="center">・・・・の後に id名がheader3のボックスを記述します。

追加するヘッダーのソース

<div id="header3">
<div class="small1">
<a href="index.html">TOP</a> >
<a href="joui.html">上位ページ</a> >
下位ページ
</div>
<div class="small2">
ここに検索ボックスのソース
</div>
<br clear="all">
</div>

【ブラウザ表示】↓ このページの尺の都合で表示例は横幅650pxにしています

■ サブページの外部ファイルにCSSを追記する

サブページの外部ファイルの方には上記のブラウザ表示のように3つ目のヘッダーボックスの中に 小さいボックスを2個入れます。（ボックスを単に2個並べた場合、右側のボックスに 検索ボックスを入れるとheight属性を指定しないと左右のボックスの高さが揃わないので大きいボックスの 中に小さいボックスを2個入れます。 右側のボックスに普通のテキストを入れるだけならボックスを単に2個並べるだけで良いです）

小さい左のボックスと右のボックスは両者の間に隙間が できないように2個共にfloat:left;の指定をします。
3つ目のヘッダーボックスは1pxの枠線を指定します。 3つ目のヘッダーボックスの中の左のボックスの枠線は、大きいボックスの境界線になるよう右側の枠線だけ指定します。
3つ目のヘッダーボックスの中の右のボックスは左側、上側、右側、下側の枠線は左のボックスと大きいボックス の枠線を そのまま右のボックスの枠線に使えるので枠線の指定はしません。

後は、2つ目のヘッダーの後に3つ目のヘッダーが配置されるので 前のページのid名がheader2のボックスのCSSのmargin-bottom:5px; の指定は削除します。
2つ目のヘッダーボックスの下の枠線は3つ目のヘッダーボックスの 上の枠線を利用できるので左右の枠線だけしか指定しません。
以上まとめると以下のようなCSSになります。

最後にページ下まで閲覧する訪問者がTOPページへ 戻りやすいようにページ上部だけでなくページ下部にも トップリンクを設置しておきます。

<a href="index.html">TOP</a>
Copyright (C) 2000-2011 サイト名 All rights reserved.

下記リンクから解説その4(サブページのサンプルのページ)に移動して下さい。

・HTMLソースの編集
・CSSファイルの編集
・サブページのサンプル

HTMLタグ一覧
スタイルシート一覧

Follow @hp_master_2003