2013.09.22
css

サイトを作るときに役立つ一番シンプルなCSSレイアウトのソース 幅固定

ウェブサイトを一番最初から作るとき、まずレイアウトを考えるかと思います。
2カラム、3カラム、幅を固定にするか、ブラウザのサイズによって幅を変動させるか…などなど。
CSSレイアウト
そんなときにきっと役立つ最低限のソースで超シンプルなレイアウトのソースを紹介します。
HTMLとCSSをそれぞれコピペして使ってください。

1. 幅固定1カラムとメニュー

1カラムとメニュー

HTMLソース
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSSソース
body {
width:980px;
margin:0 auto;
}
/* ----- ヘッダー ----- */
#header {
height:150px;
background-color:#009b9f;
}
/* ----- メニュー ----- */
#navigation {
height:40px;
background-color:#009b9f;
margin-top:10px;
}
/* ----- メイン ----- */
#content { 
min-height:450px;
height:auto; 
background-color:#009b9f;
margin-top:10px;
}
/* ----- フッダー ----- */
#footer { 
height:100px;
background-color:#009b9f;
margin-top:10px;
}

2. 幅固定2カラムで左サイドバー

2カラム左サイドバー

HTMLソース
<div id="header">
</div>
<div id="left">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSSソース
body {
width:980px;
margin:0 auto;
}
/* ----- ヘッダー ----- */
#header {
height:150px;
background-color:#009b9f;
}
/* ----- 左サイド ----- */
#left {
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:left;
margin-top:10px;
}
/* ----- メイン ----- */
#content { 
margin-left:260px;
width:720px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
/* ----- フッター ----- */
#footer { 
margin-top:10px;
width:980px;
height:100px;
background-color:#009b9f;
}

3. 幅固定2カラム右サイドバー

2カラム右サイドバー

HTMLソース
<div id="header">
</div>
<div id="right">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSSソース
body {
width:980px;
margin:0 auto;
}
/* ----- ヘッダー ----- */
#header {
height:150px;
background-color:#009b9f;
}
/* ----- 右サイド ----- */
#right {
width:250px;
min-height:500px;
height:auto ;
background-color:#009b9f;
float:right;
margin-top:10px;
}
/* ----- メイン ----- */
#content { 
width:720px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
/* ----- フッター ----- */
#footer { 
height:100px;
background-color:#009b9f;
margin-top:10px;
}

4. 幅固定3カラム

3カラム

HTMLソース
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSSソース
body {
width:980px;
margin:0 auto;
}
/* ----- ヘッダー ----- */
#header {
height:150px;
background-color:#009b9f;
}
/* ----- 左サイド ----- */
#left {
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:left;
margin-top:10px;
}
/* ----- 右サイド ----- */
#right {
width:250px;
min-height:500px;
height:auto;
background-color:#009b9f;
float:right;
margin-top:10px;
}
/* ----- メイン ----- */
#content { 
margin-left:260px;
width:460px;
min-height:500px;
height:auto;
background-color:#009b9f;
margin-top:10px;
}
/* ----- フッター ----- */
#footer { 
margin-top:10px;
height:100px;
background-color:#009b9f;
}

ブラウザの幅によってコンテンツの幅を変える幅変動のソースはこちら

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP