<div class="top">四角形の内側の上に余白を入れてみよう</div>

<div class="bottom">四角形の内側の下に余白を入れてみよう</div>

<div class="left">四角形の内側の左に余白を入れてみよう</div>

<div class="right">四角形の内側の右に余白を入れてみよう</div>


div {
  width: 200px;
  margin-bottom: 20px;
}
.top {
  border: 1px solid #000000;
  /* 問題1. 四角形の内側の上に余白を入れてみよう */
  padding-top: 20px;
}
.bottom {
  border: 1px solid #000000;
  /* 問題2. 四角形の内側の下に余白を入れてみよう */
  padding-bottom: 20px;
}
.left {
  border: 1px solid #000000;
  /* 問題3. 四角形の内側の左に余白を入れてみよう */
  padding-left: 20px;
}
.right {
  border: 1px solid #000000;
  /* 問題4. 四角形の内側の右に余白を入れてみよう */
  padding-right: 20px;
}


padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

div {
  width: 200px;
  margin-bottom: 20px;
}
.top {
  border: 1px solid #000000;
  /* 問題1. 四角形の内側の上に余白を入れてみよう */
}
.bottom {
  border: 1px solid #000000;
  /* 問題2. 四角形の内側の下に余白を入れてみよう */
}
.left {
  border: 1px solid #000000;
  /* 問題3. 四角形の内側の左に余白を入れてみよう */
}
.right {
  border: 1px solid #000000;
  /* 問題4. 四角形の内側の右に余白を入れてみよう */
}



    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: '四角形の内側の上に余白を入れてみよう',
            tests: [
                {
                    title: 'クラスセレクタ`.top`に対し、`*padding-top: 20px;*`を指定しましょう。',
                    hint: '手順にあるコードを、指定したセレクタにコピー&ペーストしてください',
                    test: () => isContainTextInEditor('padding-top: 20px;', 'style.css', '.top {', '}')
                }
            ]
        },
        {
            title: '四角形の内側の下に余白を入れてみよう',
            tests: [
                {
                    title: 'クラスセレクタ`.bottom`に対し、`*padding-bottom: 20px;*`を指定しましょう。',
                    hint: '手順にあるコードを、指定したセレクタにコピー&ペーストしてください',
                    test: () => isContainTextInEditor('padding-bottom: 20px;', 'style.css', '.bottom {', '}')
                }
            ]
        },
        {
            title: '四角形の内側の左に余白を入れてみよう',
            tests: [
                {
                    title: 'クラスセレクタ`.left`に対し、`*padding-left: 20px;*`を指定しましょう。',
                    hint: '手順にあるコードを、指定したセレクタにコピー&ペーストしてください',
                    test: () => isContainTextInEditor('padding-left: 20px;', 'style.css', '.left {', '}')
                }
            ]
        },
        {
            title: '四角形の内側の右に余白を入れてみよう',
            tests: [
                {
                    title: 'クラスセレクタ`.right`に対し、`*padding-right: 20px;*`を指定しましょう。',
                    hint: '手順にあるコードを、指定したセレクタにコピー&ペーストしてください',
                    test: () => isContainTextInEditor('padding-right: 20px;', 'style.css', '.right {', '}')
                }
            ]
        }
    ];


図形の内側の上下左右に余白を入れてみよう

font-weight

文字の太さを変えてみよう

color

文字の色を変えてみよう

font-size

文字の大きさを変えてみよう

text-align

テキストの配置を変えてみよう

width

height

図形の横幅と高さを指定しよう

background-color

背景色を付けてみよう

border

枠線を表示してみよう

図形の内側に余白をまとめて入れてみよう

margin

図形の外側の上下左右に余白を入れてみよう

図形の外側に余白をまとめて入れてみよう

まずはここから、CSSを体験してみよう。

「まずはここから！CSSを体験してみよう」レッスンの総復習クイズです。

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

図形の内側の上下左右に余白を入れてみよう

まずは必要なスキルを確認しましょう！