<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>
<div class="box4"><span>ボックス4</span>右に余白を入れてみよう</div>


div {
  margin: 0;
  width: 300px;
}
.box1 {
  background: skyblue;
  /* 問題1. 四角形の外側の左に余白を入れてみよう */
  margin-left: 20px;
}
.box2 {
  background: yellow;
  /* 問題2. 四角形の外側の上に余白を入れてみよう */
  margin-top: 20px;
}
.box3 {
  background: red;
  /* 問題3. 四角形の外側の下に余白を入れてみよう */
  margin-bottom: 20px;
}
.box4 {
  background: green;
}
.box4 span {
  color: #000;
  /* 問題4. テキスト「ボックス4」の右に余白を入れてみよう */
  margin-right: 20px;
}


margin

margin: 10px 20px 30px 40px;

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

div {
  margin: 0;
  width: 300px;
}
.box1 {
  background: skyblue;
  /* 問題1. 四角形の外側の左に余白を入れてみよう */
}
.box2 {
  background: yellow;
  /* 問題2. 四角形の外側の上に余白を入れてみよう */
}
.box3 {
  background: red;
  /* 問題3. 四角形の外側の下に余白を入れてみよう */
}
.box4 {
  background: green;
}
.box4 span {
  color: #000;
  /* 問題4. テキスト「ボックス4」の右に余白を入れてみよう */
}



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


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

font-weight

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

color

文字の色を変えてみよう

font-size

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

text-align

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

width

height

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

background-color

背景色を付けてみよう

border

枠線を表示してみよう

padding

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

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

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

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

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

padding: 10px 20px 30px;

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

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

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