WEBページ　全体構成枠

 

 

2カラム　レイアウト −（ ヘッダー・フッターの設置 ）

左右に寄せる枠を作る前に、左右に寄せない部分＝ヘッダー・フッター部分を作成します。

 

[ブラウザ上の表示]　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　戻る

タイトルなど

 

 

●　ヘッダー部分とはタイトルとグローバルナビが表示されている部分

 

divタグは幅の指定をしない場合、記述した部分の範囲内で100％表示されます。

左右（left、right）に寄せる部分は、左右を含む全体枠をあらかじめ作り、次に左右の枠を作っていきます。

 

2カラムレイアウト − clear指定は忘れずに

2カラムレイアウトの最後の仕上げは、「clear」による「左右の回り込みの解除」です。

この解除指定を行わない場合、外枠がうまく内枠の下まで伸びていかないなど、崩れの原因になりますので、忘れずに指定するようにしましょう。この解除指定はCSSでレイアウトした全てのページで使いますので、外部ファイルで指定しておくと便利です。

 <div class="clear"><hr /></div>  

 

　　　

●　フッター部分はコピーライト記載部分になります。

 

[HTMLの記述]

<html> <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 --> 

   　  <div id="footer">  

 コピーライトなど を記入 

  </div><!-- /footer END -->  

 </div><!-- /Wrap END -->

　</body>

</html>

 

 [cssの記述]

1.  body { text-align:center; } 

2.  #wrap { width:780px; text-align:left; margin:0 auto; } 

3.  #inner { margin:0 10px; }  

4.  #mainWrap { float:right; width:460px; }  

5.  #leftsideWrap { float:left; width:160px; } 

6.  #footer {width:780px; text-align:center; padding:2px;} 

7.　.clear { clear:both; }  

 

 

 

 

3カラムレイアウト − 3カラムに仕上げる

 

2カラムができたら、広い方の枠内にさらに2段の枠を作成します。

幅は事前に決めておき、再度2カラムレイアウトを施してください。（ by「CSSレイアウト実践講座」 ）

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　戻る

 

3カラムレイアウト − 3カラムに仕上げる

2カラムができたら、広い方の枠内にさらに2段の枠を作成します。幅は事前に決めておきます。

[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 -->   
  1. </body>
  2. </html>

<div id="wrap">

  <div id="header">

   タイトルなど

  </div><!-- /header -->

  <div id="inner">

   <div id="largeWrap">

     <div id="mainWrap">

      メインスペース

     </div><!-- /mainWrap -->

     <div class="sideAlphaWrap">

      左サイドバー

     </div><!-- /sideAlphaWrap -->

     <div class="clear"><hr /></div>

   </div><!-- /largeWrap -->

   <div class="sideBetaWrap">

     右サイドバー

   </div><!-- /sideBetaWrap -->

   <div class="clear"><hr /></div>

  </div><!-- /inner -->

  <div class="footer">

   コピーライトなど

  </div><!-- /footer -->

</div><!-- /wrap -->

 

 

[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">　】と続けると良い。  

もし、【22. </div><!-- /wrap --> 】  の直後に置くと、footerブロック部分は、wrapブロックの中に表示される。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　戻る                

 

 

 

 

 

ヘッダー部header　　　タイトル　　　　　

 

 

ナビメニュー

 

 

 

 

左

サ

イ

ド

 

leftsideWrap

 

 

 

 

 

 

 

 

 

 

メ

イ

ン

 

 

mainWrap

 

 

 

 

 

 

 

 

 

 

　　　　右

　　サ

　　イ

　　ド

 

rightsideWrap

 

 

 

 

 

 

 　

フッター部    footer

 

　　　　　

 

 

Header ＝ タイトル＋ナビメニュー

 

 

 

 

 

 

 

 

largeWrap ＝ mainWrap + leftsideWrap

 

 

←Inner  =  largeWrap + rightsideWrap

 

 

 

 

 

 

 

 

　Footer

 

 

 

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　   戻る