2013.09.24
css

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

こちらの続きです。
今回は全てブラウザ(画面)の幅によってコンテンツ部分のWidthが変わるレイアウトのCSSです。
CSSレイアウト
ウェブサイトを作成するときの一番最初のレイアウトの枠組みのときに役に立てば嬉しいです。
HTMLとCSSをそのままコピペで使ってください。

5. 幅変動1カラムとメニュー

幅変動1カラムとメニュー

HTMLソース
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSSソース
body{ 
margin:0; 
padding:0; 
}
/* ----- ヘッダー ----- */
#header{ 
background-color:#009b9f;
height:150px;
}
/* ----- メニュー ----- */
#navigation{ 
background-color:#bee0ce; 
height:50px;
}
/* ----- メイン ----- */
#content { 
background-color:#f8f4e6; 
min-height:600px;
height:auto; 
}
/* ----- フッダー ----- */
#footer { 
clear:both;
background-color:#009b9f;
height:100px;
}

6. 幅変動2カラムで左サイドバー

幅変動2カラム左サイドバー

HTMLソース
<div id="header">
</div>
<div id="left">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSSソース
body{ 
margin:0; 
padding:0; 
}
/* ----- ヘッダー ----- */
#header{ 
background-color:#009b9f;
height:150px;
}
/* ----- 左サイド ----- */
#left{ 
float:left;
width:250px;
background-color:#bee0ce; 
min-height:650px;
height:auto;
}
/* ----- メイン ----- */
#content { 
margin-left:250px;
background-color:#f8f4e6; 
min-height:650px; 
height:auto;
}
/* ----- フッダー ----- */
#footer { 
clear:both;
background-color:#009b9f;
height:100px;
}

7. 幅変動2カラム右サイドバー

幅変動2カラム右サイドバー

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

8. 幅変動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{ 
margin:0; 
padding:0; 
}
/* ----- ヘッダー ----- */
#header{ 
background-color:#009b9f;
height:150px;
}
/* ----- 左サイド ----- */
#left{ 
float:left;
width:250px;
background-color:#bee0ce; 
min-height:650px;
height:auto;
}
/* ----- 右サイド ----- */
#right{ 
float:right;
width:250px;
background-color:#bee0ce; 
min-height:650px;
height:auto; 
}
/* ----- メイン ----- */
#content { 
margin-left:250px;
margin-right:250px;
background-color:#f8f4e6; 
min-height:650px; 
height:auto;
}
/* ----- フッダー ----- */
#footer { 
clear:both;
background-color:#009b9f;
height:100px;
}
関連する記事

コメントをどうぞ

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


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

*


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