floatを使ったレイアウト１５

基礎 CSS



☆★データーでの確認★☆


レイアウト全体をセンタリングする


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レイアウト全体をセンタリングする</title>

<link rel="stylesheet" href="css/style15.css" media="screen,print">

</head>
<body>

<div id="container">

<div id="header">
&lt;header&gt;<br>１段目<br>
</div><!-- / header -->

<div id="wrapper">

<div id="primary">
&lt;primary&gt;<br>１段目<br>２段目<br>３段目<br>４段目<br>５段目<br>６段目<br>７段目<br>８段目<br>９段目<br>１０段目<br>
</div><!-- / primary -->

<div id="secondary">
&lt;secondary&gt;<br>１段目<br>２段目<br>３段目<br>４段目<br>５段目<br>６段目<br>７段目<br>８段目<br>９段目<br>１０段目<br>
</div><!-- / secondary -->

</div><!-- / wrapper -->

</div><!-- / container -->

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";



body {
    text-align: center;/* テキストを中央揃えに指定 */
    background-color: #aa6;
    }


/* [ width,height ]を指定することにより[ background-color ]が表示される */
#container {
    width: 760px;
    margin: 0 auto;/* 左右のほう方向のマージンを[ auto ]に指定 */
    text-align: left;/* テキストを左揃えに指定 */
    background-color: #6c7;
    }

#header { 
    height: 50px;
    background-color: #ddd;
    }


/* [ width,height ]を指定することにより[ background-color ]が表示される */
#wrapper {
    position: relative;
    background-color: #ccd16c;
    }

#primary {
    position: absolute;
    left: 210px;
    top: 10px;
    width: 550px;
    background-color: #c7d5ed;
    }

#secondary {
    position: absolute;
    left: 0;
    top: 10px;
    width: 200px;
    background-color: #f9cfba;
    }

ブラウザで表示