<div class="card">
  <h1 class="card-title">Basic</h1>
  
  <ul class="card-menu">
    <li>邦画3,000作品見放題</li>
    <li>洋画5,000作品見放題</li>
    <li>ストリーミング再生</li>
    <li>ダウンロード再生</li>
  </ul>
</div>

.card {
  width: 280px;
  padding: 20px;
  margin: 32px;
  border-radius: 12px;
  box-shadow: 0 0 6px #c8c8c8;
  color: #333;
  font-family: 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN',
    'HG丸ｺﾞｼｯｸM-PRO', sans-serif;
  letter-spacing: 0.05em;
}

.card-title {
  font-weight: bold;
  font-size: 24px;
  /* 問題1. タイトルの下部に余白を指定しよう */
  margin-bottom: 24px;
}

/* 問題3. メニューをスタイリングしよう */
.card-menu {
  list-style-type: circle;
  padding-left: 24px;
  line-height: 2;
  margin-bottom: 24px;
}


<ul>

<li>

list-style

line-height

.test {
  font-size: 20px;
  line-height: $(1);
}

<div class="card">
  <h1 class="card-title">Basic</h1>
  
</div>

.card {
  width: 280px;
  padding: 20px;
  margin: 32px;
  border-radius: 12px;
  box-shadow: 0 0 6px #c8c8c8;
  color: #333;
  font-family: 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN',
    'HG丸ｺﾞｼｯｸM-PRO', sans-serif;
  letter-spacing: 0.05em;
}

.card-title {
  font-weight: bold;
  font-size: 24px;
  /* 問題1. タイトルの下部に余白を指定しよう */
}

/* 問題3. メニューをスタイリングしよう */



    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'タイトルの下部に余白を指定しよう',
            tests: [
                {
                    title: '`.card-title`に、*margin-bottom*プロパティを*24px*指定してください',
                    hint: '`.card-title`に`*margin-bottom: 24px;*`を指定してください',
                    test: () => {
                        isContainTextInEditor('margin-bottom: 24px;', 'style.css', '.card-title {', '}');
                    }
                }
            ]
        },
        {
            title: 'メニューを箇条書きにしよう',
            tests: [
                {
                    title: '`ul`要素を追加し、*card-menu*クラスを指定してください',
                    hint: '`*<ul class="card-menu"></ul>*`を指定してください',
                    test: () => {
                        isContainTextInEditor('<ul class="card-menu">' && '</ul>', 'index.html');
                    }
                },
                {
                    title: '`li`要素を追加し、1つ目のメニュー*邦画3,000作品見放題*を記述してください',
                    hint: '`*<li>邦画3,000作品見放題</li>*`を記述してください',
                    test: () => {
                        isContainTextInEditor('<li>邦画3,000作品見放題</li>', 'index.html');
                    }
                },
                {
                    title: '`li`要素を追加し、2つ目のメニュー*洋画5,000作品見放題*を記述してください',
                    hint: '`*<li>洋画5,000作品見放題</li>*`を記述してください',
                    test: () => {
                        isContainTextInEditor('<li>洋画5,000作品見放題</li>', 'index.html');
                    }
                },
                {
                    title: '`li`要素を追加し、3つ目のメニュー*ストリーミング再生*を記述してください',
                    hint: '`*<li>ストリーミング再生</li>*`を記述してください',
                    test: () => {
                        isContainTextInEditor('<li>ストリーミング再生</li>', 'index.html');
                    }
                },
                {
                    title: '`li`要素を追加し、4つ目のメニュー*ダウンロード再生*を記述してください',
                    hint: '`*<li>ダウンロード再生</li>*`を記述してください',
                    test: () => {
                        isContainTextInEditor('<li>ダウンロード再生</li>', 'index.html');
                    }
                }
            ]
        },
        {
            title: 'メニューをスタイリングしよう',
            tests: [
                {
                    title: '`.card-menu`クラスに、*list-style-type*プロパティを*circle*指定してください',
                    hint: '`.card-menu`に`*list-style-type: circle;*`を指定してください',
                    test: () => {
                        isContainTextInEditor('list-style-type: circle;', 'style.css', '.card-menu {', '}');
                    }
                },
                {
                    title: '`.card-menu`クラスに、*padding-left*プロパティを*24px*指定してください',
                    hint: '`.card-menu`に`*padding-left: 24px;*`を指定してください',
                    test: () => {
                        isContainTextInEditor('padding-left: 24px;', 'style.css', '.card-menu {', '}');
                    }
                },
                {
                    title: '`.card-menu`クラスに、*line-height*プロパティを*2*指定してください',
                    hint: '`.card-menu`に`*line-height: 2;*`を指定してください',
                    test: () => {
                        isContainTextInEditor('line-height: 2;', 'style.css', '.card-menu {', '}');
                    }
                },
                {
                    title: '`.card-menu`クラスに、*margin-bottom*プロパティを*24px*指定してください',
                    hint: '`.card-menu`に`*margin-bottom: 24px;*`を指定してください',
                    test: () => {
                        isContainTextInEditor('margin-bottom: 24px;', 'style.css', '.card-menu {', '}');
                    }
                }
            ]
        }
    ];


箇条書きを装飾して実装しよう

<div>

max-width

padding

margin

border-radius

box-shadow

カードを作る事前準備をしよう

<h1>

color

font-family

letter-spacing

font-weight

font-size

カードタイトルを実装しよう

<span>

料金の数字を強調して実装しよう

display

background-color

text-align

:hover

opacity

transition

ボタンを実装してホバーエフェクトを設定しよう

今回は実践レッスンということで、Webサイトでよく見るような料金紹介カードを実装します。
今まで学習したスキルを総動員して、力試ししてみましょう。

「料金紹介カードを作ってみよう」レッスンの総復習クイズです。

コードを書いてみましょう！