#sidebar部分｜positionレイアウトホームページ作成講座

Loading

スポンサードリンク

CSSデザインサンプルのホームページ制作の流れをご確認下さい。

CSSのコピー

下記ソースをコピーして下さい。

HTMLファイル指定部分

プレーン表示コピー印刷?
  1. <body>  
  2. <div id="wrapper">  
  3.   
  4. <div id="header">  
  5. *** ヘッダー部分 ***  
  6. </div>  
  7.   
  8. <div id="container">  
  9.   
  10.     <div id="contents">  
  11.     *** コンテンツ部分 ***  
  12.     </div>  
  13.   
  14.     <!--sidebar部分-->  
  15.     <div id="sidebar">  
  16.     *** サイドバー部分 ***  
  17.     </div>  
  18.   
  19. </div>  
  20.   
  21. <div id="footer">  
  22. *** フッター部分 ***  
  23. </div>  
  24.   
  25. </div>  
  26. </body>  

CSSの解説

プレーン表示コピー印刷?
  1. /*-------------------------sidebarの指定*/  
  2. #sidebar {  
  3.   width: 180px;  
  4.   margin: 0;  
  5.   padding: 0;  
  6.   position: absolute;  
  7.   top: 0;  
  8.   left: 0;  
  9. }  

サイドバー部分の要素です。

width: 180px;

サイドバー部分の横幅を指定しています。

position: absolute;

絶対配置指定です。この絶対配置指定の基準は#containerです。

top: 0; left: 0;

基準の#containerに対して上から0px、左から0pxに配置という事です。

実際のサンプル

右側に配置したい場合は下記のようにします。

プレーン表示コピー印刷?
  1. /*-------------------------contentsの指定*/  
  2. #contents {  
  3.   margin: 0 0 0 200px;  
  4.   padding: 0;  
  5. }  
  6.   
  7. /*-------------------------sidebarの指定*/  
  8. #sidebar {  
  9.   width: 180px;  
  10.   margin: 0;  
  11.   padding: 0;  
  12.   position: absolute;  
  13.   top: 0;  
  14.   left: 0;  
  15. }  
  16.   
  17. ----------------------------------------------  
  18. 変更後  
  19. ----------------------------------------------  
  20.   
  21. /*-------------------------contentsの指定*/  
  22. #contents {  
  23.   margin: 0 <span>200px</span> 0 0;  
  24.   padding: 0;  
  25. }  
  26.   
  27. /*-------------------------sidebarの指定*/  
  28. #sidebar {  
  29.   width: 180px;  
  30.   margin: 0;  
  31.   padding: 0;  
  32.   position: absolute;  
  33.   top: 0;  
  34.   <span>left: 620px;</span> もしくは right: 0;  
  35. }  

#contentsで右側にサイドバー分の余白を指定、サイドバーの配置を左からなら620px、右からなら0で配置。

ホームページ作成のポイント

前頁で#contents部分を600pxとしたので、今回サイドバー部分は200pxでは,,,,

もちろん200pxで正解です。今回はサイドバーを180px にする事で、#contentsと#sidebarとの間に、自然な形で余白(20px)を設けているだけです。

スポンサードリンク