戻る
ページ 全体構成枠の作り方
ー 2カラム レイアウトー （ 片サイドにメニュー欄を作る）
まず、ヘッダー・フッター部分を作成します。
● ヘッダー部分とはタイトルとグローバルナビが表示されている部分
divタグは幅の指定をしない場合、記述した部分の範囲内で100％表示されます。
左右に寄せる部分は、左右を含む全体枠（<div id="inner"> 〜 </div><!-- /inner END --> ）をあらかじめ作り、次に左右の枠を作っていきます。
2カラムレイアウト − clear指定は忘れずに
header部分
HPのシンボルとなる画像やホームページタイトル名を書く。
ナビゲーションメニュー表示
|
|
左サイド欄
「グローバルメニュー」を書きます。
|
コンテンツ部分
2カラムレイアウトの最後の仕上げは、「clear」による「左右の回り込みの解除」です。
この解除指定を行わない場合、外枠がうまく内枠の下まで伸びていかないなど、崩れの原因になりますので、忘れずに指定するようにしましょう。
この解除指定はCSSでレイアウトした全てのページで使いますので、
外部ファイルで指定しておくと便利です。
|
|
フッター部分はコピーライト記載部分になります。
|
[HTMLの記述]
<html>
<head>
<title>ホームページのタイトル</title>
<link rel="stylesheet" type="text/css" href="拡張子(.css)のURL">
</head>
<body>
<div id="Wrap">
<div id="header">
ホームページタイトル名、
グローバルナビゲーションメニュー
</div><!-- /header END -->
<div id="inner">
<div id="mainWrap">
（コンテンツ部分）
</div><!-- /mainWrap END -->
<div id="leftsideWrap">
（左サイドメニュー部分）
</div><!-- /lefttsideWrap END -->
<div class="clear"><hr /></div>
</div><!-- /inner END-->
<div id="footer">
コピーライトなど を記入
</div><!-- /footer END -->
</div><!-- /Wrap END -->
</body>
</html>
[cssの記述]
CSSファイル名：「hptenplate.css」
body { text-align:center; }
#wrap {border:1px solid green; width:780px; text-align:left; margin:0 auto; }
#inner { margin:0 10px; }
#mainWrap { float:right; width:460px; }
#leftsideWrap { float:left; width:160px; }
#footer {width:780px; text-align:center; padding:2px;}
.clear { clear:both; }
戻る
ー 3カラムレイアウト ー （ 両サイドにメニュー欄を作る）
カラムができたら、広い方の枠内にさらに2段の枠を作成します。
幅は事前に決めておき、再度2カラムレイアウトを施してください。 【参照：CSSレイアウト実践講座】
|
ヘッダー部header タイトル
|
|
ナビメニュー
|
|
左
サ
イ
ド
leftsideWrap
|
メ
イ
ン
mainWrap
|
右
サ
イ
ド
rightsideWrap
|
|
フッター部 footer
|
Header
＝ タイトル＋ナビメニュー
largeWrap ＝ mainWrap + leftsideWrap
←Inner = largeWrap
+ rightsideWrap
↑ Footer
戻る
[HTMLの記述] （注）番号は説明のために付けています。実際のコーディングでは番号は付けません。
1. <html>
2. <body>
3. <div id="wrap">
4. <div id="header">
5. タイトルなどを記入
6. </div><!-- /header -->
7. <div id="inner">
8. <div id="largeWrap">
9. <div id="mainWrap">
10. メインスペース （コンテンツ記入）
11. </div><!-- /mainWrap END -->
12. <div id="leftsideWrap">
13. 左サイドバーの設定
14. </div><!-- /leftsideWrap END -->
15. <div class="clear"><hr /></div>
16. </div><!-- /largeWrap END -->
17. <div id="rightsideWrap">
18. 右サイドバーの設定
19. </div><!-- /rightsideWrap END -->
20. </div><!-- /inner -->
21. <div class="clear"><hr /></div>
22. </div><!-- /wrap -->
23. <div id="footer">
24. コピーライトなどを記入する。
25. </div><!-- /footer -->
26. </body>
27. </html>
[CSSの記述]
1. body { text-align:center; }
2. #wrap { width:780px; text-align:left; margin:0 auto; }
3. #inner { margin:0 10px; }
4. #largeWrap { float:left; width:630px; }
5. #mainWrap { float:right; width:460px; }
6. #leftsideWrap { float:left; width:160px; }
7. #rightsideWrap { float:right; width:120px; }
8. #footer {width:780px; text-align:center; padding:2px;}
9. .clear { clear:both; }
10. .clear hr { display:none; }
注意：
footerブロックを最下部に正しく表示させるためには、
上記の【21. <div class="clear"><hr /></div> 】を、
親ブロックの終わる直前に、
つまり、【22. </div><!-- /wrap --> 】 の直前に置き、
その直後に、 【23. <div id="footer"> 】と続けると良い。
もし、【21. <div class="clear"><hr /></div> 】を、
【22. </div><!-- /wrap --> 】 の直後に置くと、
footerブロック部分は、wrapブロックの中に入って表示されてしまう。