ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >サブページのサンプル

サブページのサンプル

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タグ一覧
スタイルシート一覧


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.