|
TOPページのソースと外部ファイルを編集してできたサブページ用の
ソースと外部ファイルは最終的に以下のようになります。
検索ボックスのタグはyahooやGoogle用の専用のコードをコピーして
貼り付けてください。
■サブページのソース
<HTML>
<HEAD>
<TITLE>サブページのタイトル</TITLE>
<link rel="stylesheet" href="subpage.css" type="text/css">
</HEAD>
<BODY>
<div id="body">
<div id="header">ホームページのタイトル</div>
<div id="header2" align="center">
<a href="menu1.html">メニュー1</a>
<a href="menu2.html">メニュー2</a>
<a href="menu3.html">メニュー3</a>
<a href="menu4.html">メニュー4</a>
<a href="menu5.html">メニュー5</a>
<a href="menu6.html">メニュー6</a>
</div>
<div id="header3">
<div class="small1">
<a href="index.html">TOP</a> >
<a href="joui.html">上位ページ</a> >
下位ページ
</div>
<div class="small2">
<form action="xxxxx.cgi" style="margin:0;">
<div>
<input type="text" name="q" size="25">
<input type="submit" name="sa" value="検索">
</div>
</form>
</div>
<br clear="all">
</div>
<div id="middle">
サブページのメインコンテンツ
</div>
<div id="footer">
<a href="aboutlink_sample.html">リンクについて</a>
<a href="menseki.html">免責事項</a>
<a href="mutuallylink_sample.html">相互リンク募集</a>
</div>
</div>
<a href="index.html">TOP</a>
Copyright (C) 2000-2011 サイト名 All rights reserved.
</BODY>
</HTML>
■サブページの外部ファイル
/∗ サブページのレイアウト全体を中央寄せ、行間1.4 ∗/
body{
text-align:center;
line-height:1.4;
}
/∗ サブページのレイアウト全体を囲む枠線無しのdivタグのボックス ∗/
div#body{
width:710px;
margin:auto;
text-align:left;
}
/∗ サブページのヘッダー ∗/
div#header{
padding:10px;
border:1px solid silver;
}
/∗ サブページのヘッダー2 ∗/
div#header2{
padding:10px;
border-right:1px solid silver;
border-left:1px solid silver;
}
/∗ サブページの3つ目のヘッダー ∗/
div#header3{
width:710px;
border:1px solid silver;
}
/∗ サブページの3つ目のヘッダー内の左のボックス ∗/
div.small1{
padding:5px;
border-right:1px solid silver;
width:370px;
float:left;
}
/∗ サブページの3つ目のヘッダー内の右のボックス ∗/
div.small2{
padding:5px;
width:330px;
float:left;
}
/∗ サブページのメインコンテンツ ∗/
div#middle{
border:1px solid silver;
line-height:1.2;
height:400px;
font-size:95%;
text-align:left;
margin:5px 0;
}
/∗ サブページのフッター ∗/
div#footer{
padding:10px;
border:1px solid silver;
text-align:center;
}
【ブラウザ表示】
サブページのサンプル
(このページはIE11ではレイアウトが崩れるためブラウザのツール→互換表示設定よりhmaster.netのドメインを
追加して閲覧下さい。Firefoxの場合はIE用のアドオンを入れて閲覧して下さい)
下のTOPページのサンプルから17のサブページ
のリンクを順番にクリックしていくとサブページへ切り替わっても
TOPページの
上部と下部のレイアウトと同じなので統一感があるのが
わかります。
トップページのサンプル
・HTMLソースの編集
・CSSファイルの編集
・ヘッダーを追加する
HTMLタグ一覧
スタイルシート一覧
|
