display

background-color

padding

padding: 10px 20px 30px;

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

border-radius

color

font-weight

text-align

:hover

opacity

transition

<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>
  <p class="card-price"><span class="text-large">980</span>円/月（税込）</p>
  
  <a href="" class="card-btn">Buy Now</a>
</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;
  margin-bottom: 24px;
}

.card-menu {
  list-style-type: circle;
  padding-left: 24px;
  line-height: 2;
  margin-bottom: 24px;
}

.text-large {
  font-size: 40px;
}

.card-price {
  margin-bottom: 20px;
}

/* 問題2. ボタンをスタイリングしよう */
.card-btn {
  display: block;
  background-color: #ff5f5f;
  padding: 16px 0;
  border-radius: 32px;
  color: #fff;
  text-align: center;
  transition: opacity 0.3s;
}

/* 問題3. ボタンにホバーエフェクトを設定しよう */
.card-btn:hover {
  opacity: 0.5;
}


<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>
  <p class="card-price"><span class="text-large">980</span>円/月（税込）</p>
  
</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;
  margin-bottom: 24px;
}

.card-menu {
  list-style-type: circle;
  padding-left: 24px;
  line-height: 2;
  margin-bottom: 24px;
}

.text-large {
  font-size: 40px;
}

.card-price {
  margin-bottom: 20px;
}

/* 問題2. ボタンをスタイリングしよう */

/* 問題3. ボタンにホバーエフェクトを設定しよう */



    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'ボタンを実装しよう',
            tests: [
                {
                    title: '`a`要素を追加し、`href`属性を *""* で指定してください',
                    hint: '`*<a href=""></a>*`を実装してください',
                    test: () => {
                        isContainTextInEditor('<a href="">' && '</a>', 'index.html');
                    }
                },
                {
                    title: '`a`要素に*card-btn*クラスを指定してください',
                    hint: '`*<a href="" class="card-btn"></a>*`を実装してください',
                    test: () => {
                        isContainTextInEditor('class="card-btn"', 'index.html');
                    }
                },
                {
                    title: '`a`要素内に文字列*Buy Now*を実装してください',
                    hint: '`*<a href="" class="card-btn">Buy Now</a>*` を実装してください',
                    test: () => {
                        isContainTextInEditor('<a href="" class="card-btn">Buy Now</a>', 'index.html');
                    }
                }
            ]
        },
        {
            title: 'ボタンをスタイリングしよう',
            tests: [
                {
                    title: '`.card-btn`に*display*プロパティを*block*で指定してください',
                    hint: '`.card-btn`に`*display: block;*`を実装してください',
                    test: () => {
                        isContainTextInEditor('display: block;', 'style.css', '.card-btn {', '}');
                    }
                },
                {
                    title: '`.card-btn`に*background-color*プロパティを *#ff5f5f* で指定してください',
                    hint: '`.card-btn`に`*background-color: #ff5f5f;*`を実装してください',
                    test: () => {
                        isContainTextInEditor('background-color: #ff5f5f;', 'style.css', '.card-btn {', '}');
                    }
                },
                {
                    title: '`.card-btn`に*padding*プロパティを*16px 0*で指定してください',
                    hint: '`.card-btn`に`*padding: 16px 0;*`を実装',
                    test: () => {
                        isContainTextInEditor('padding: 16px 0;', 'style.css', '.card-btn {', '}');
                    }
                },
                {
                    title: '`.card-btn`に*border-radius*プロパティを*32px*指定してください',
                    hint: '`.card-btn`に`*border-radius: 32px;*`を実装してください',
                    test: () => {
                        isContainTextInEditor('border-radius: 32px;', 'style.css', '.card-btn {', '}');
                    }
                },
                {
                    title: '`.card-btn`に*color*プロパティを *#fff* で指定してください',
                    hint: '`.card-btn`に`*color: #fff;*`を実装してください',
                    test: () => {
                        isContainTextInEditor('color: #fff;', 'style.css', '.card-btn {', '}');
                    }
                },
                {
                    title: '`.card-btn`に*text-align*プロパティを*center*で指定してください',
                    hint: '`.card-btn`に`*text-align: center;*`を実装してください',
                    test: () => {
                        isContainTextInEditor('text-align: center;', 'style.css', '.card-btn {', '}');
                    }
                },
                {
                    title: '`.card-btn`に*transition*プロパティを*opacity 0.3s*指定してください',
                    hint: '`.card-btn`に`*transition: opacity 0.3s;*`を実装してください',
                    test: () => {
                        isContainTextInEditor('transition: opacity 0.3s;', 'style.css', '.card-btn {', '}');
                    }
                }
            ]
        },
        {
            title: 'ボタンにホバーエフェクトを設定しよう',
            tests: [
                {
                    title: '`.card-btn:hover`に*opacity*プロパティを*0.5*指定してください',
                    hint: '`.card-btn:hover`に`*opacity: 0.5;*`を実装してください',
                    test: () => {
                        isContainTextInEditor('opacity: 0.5;', 'style.css', '.card-btn:hover {', '}');
                    }
                }
            ]
        }
    ];


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

<div>

max-width

margin

margin: 10px 20px 30px 40px;

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

box-shadow

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

<h1>

font-family

letter-spacing

font-size

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

<ul>

<li>

list-style

line-height

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

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

<span>

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

Webページ内でよく見る料金紹介カードの実装を通して、具体的なデザインスキルを学びます。
テキストとボタンデザインに加え、ホバーエフェクトの追加も扱います。


0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

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