CSS レイアウト

33このレイアウトをCSSで作成する。

CSSには、下記を記述。

header」が上段、「left」が左、「middle」が真ん中、「right」が右、「footer」が下段を意味しています。 「my_body」で2段目全体の幅を設定しています。 3列のレイアウトは、2列のレイアウトよりも条件が厳しいらしく、 幅の長さをきちんと設定しないと、ブラウザによっては、サイドバーが下に落ちたり、ずれたりするいわゆる「カラム落ち」をする。

<style type=”text/css”>
#my_body {
width : 600px ;
}

#header {
width : 100% ;
background-color: #ff8c00;
}

#left {
width: 200px;
float: left;
background-color: #7fff00;
}

#middle {
width: 200px;
float: left;
background-color: #cccccc;
}

#right {
width: 200px;
float: left;
background-color: #00bfff;
}

#footer {
background-color: #b22222;
width : 100% ;

clear: both;
}

</style>

 

HTMLの方には、

<body>と</body>の間に、 以下の記述

<div id=”header”>
本文『上、幅100%色ff8c00』
</div>

<div id=”my_body”>

<div id=”left”>
本文『左、幅200px色7fff00』
</div>

<div id=”middle”>
本文『中、幅200px色cccccc』
</div>

<div id=”right”>
本文『右、幅200px色00bfff』
</div>

</div>

<div id=”footer”>
本文『下、幅100%色b22222』
</div>

 

 

「CSS レイアウト」への1件のフィードバック

  1. #header{
    width:920px;
    background-color: #fff;
    margin: 0 auto;
    overflow:hidden;
    }

    下記の項目を追加するとheaderのimgの設定をすることが可能になる。

    #header img{

    margin: 0px 0px -6px 0px;
    }

コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください