divの枠線と背景をマスターする

枠線と背景

・枠線の線種、カラー、サイズの指定をする
・上下左右の枠線をそれぞれ指定をする
・背景色と画像、背景画像の繰り返し方、位置を定義する
・背景画像を固定する（〜補講）
〜確認問題～　枠線と背景

html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="レベルアップ問題です。">
        <link rel="stylesheet" type="text/css" href="css/level3.css">
        <title>レベルアップ練習問題</title>
    </head>
    <body>
        <div class="box1">
        <p>見出しとかでつかえます♪</p>
        </div>
    </body>
</html>

css

.box1 p {
    border: #FF99CC 1px solid;
    width: 393px;
    height: 18px;
    padding: 2px 0px 0px 5px;
    font-size: 13px;
    font-weight: bold;
    color: #FF6699;
    background: url(haikei3.gif);
    background-position: bottom;
    background-repeat: repeat-x;
}

divのネスト

・divを１つだけネストする
・ネストしたdivの位置を定義する
・ネストしたdiv同士のタテの間隔を定義する
〜確認問題～　divのネスト

html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="レベルアップ問題です。">
        <link rel="stylesheet" type="text/css" href="css/level4.css">
        <title>レベルアップ練習問題</title>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
            </div>
            <div class="box3">
            </div>
        </div>
    </body>
</html>

css

.box1 {
    width: 180px;
    height: 100px;
    background: url(ichimatsu.gif)
}
.box2 {
    width: 20px;
    height: 20px;
    margin: 0px 0px 0px 120px;
    background-color: #FF9999;
}
.box3 {
    width: 20px;
    height: 20px;
    margin: 40px 0px 0px 60px;
    background-color: #FF9999;
}

divボックスの段組

・divボックスをヨコに２つ段組する
・枠線を定義したdivをつくる
・divボックスをヨコとタテに段組する
・スタイルシートで市松模様をつくる
〜確認問題〜　段組の中に段組していく

html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="レベルアップ問題です。">
        <link rel="stylesheet" type="text/css" href="css/level5.css">
        <title>レベルアップ練習問題</title>
    </head>
    <body>
        <div class="box1">
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="kaijyo">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="kaijyo">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="kaijyo">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="box1-1">
            </div>
            <div class="kaijyo">
            </div>
        </div>
        <div class="box2">
            <div class="box2-1">
            </div>
            <div class="box2-2">
            </div>
            <div class="kaijyo">
            </div>
            <div class="box2-2">
            </div>
            <div class="box2-1">
            </div>
        </div>
    </body>
</html

css

.box1 {
    width: 200px;
    height: 200px;
    background-color:#FFCCCC;
    float: left;
}
.box2 {
    width: 300px;
    height: 200px;
    background-color: #66CCFF;
    float: left;
}
.box1-1 {
    width: 50px;
    height: 50px;
    background-color: #CC0000;
    float: left;
}
.box2-1 {
    width: 200px;
    height: 100px;
    background-color: #3399FF;
    float: left;
}
.box2-2 {
    width: 100px;
    height: 100px;
    background-color: #666699;
    float: left;
}
.kaijyo {
    clear: left;
}

divについて

divの枠線と背景をマスターする

枠線と背景

divのネスト

divボックスの段組