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

基礎 CSS



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

本文の段組を可変にする


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>本文の段階を可変にする</title>

<link rel="stylesheet" href="css/style18.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 id="footer">
&lt;footer&gt;<br>１段目<br>
</div><!-- / footer -->

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

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";



/* [ container,wrapper ]の幅を指定しているため[ backgorund-color ]が表示している */

body {
    /* [ text-align ]の指定を削除 */
    background-color: #aa6;
    }


#container {
    /* [ text-align ]の指定を削除 */
    /* [ margin ]の指定を削除 */
    width: 100%;/* ボックス幅を指定 */
    background-color: #6c7;
    }

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

#wrapper {
    position: relative;
    width: 100%;
    margin: 10px 0;
    background-color: #ccd16c;
    }

#primary {
    margin-left: 210px;
    background-color: #c7d5ed;
    }

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

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

ブラウザで表示