background-color

border-radius

box-shadow

width

transition

padding

padding: 10px 20px 30px;

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

* {
  margin: 0;
  padding: 0;
  letter-spacing: 0.05rem;
  box-sizing: border-box;
  color: #333;
  font-family: sans-serif;
}

body {
  background-color: #f8f8f8;
  padding: 20px;
}

.card__list {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

/* 問題1. カードのスタイリング */
/* この下に解答してください */
.card__item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 280px;
  padding: 16px;
  transition: all 0.3s ease-in-out;
}


* {
  margin: 0;
  padding: 0;
  letter-spacing: 0.05rem;
  box-sizing: border-box;
  color: #333;
  font-family: sans-serif;
}

body {
  background-color: #f8f8f8;
  padding: 20px;
}

.card__list {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

/* 問題1. カードのスタイリング */
/* この下に解答してください */



    // =======================
    // テストコード
    // =======================
    const hint1 = `
  以下のコードを参考にしてください。
  ~~~css
  box-shadow: 4px 8px 4px #333;
  `;
    const hint2 = `
  以下のコードを参考にしてください。
  ~~~css
  transition: 動きの対象 動きの時間 動きの種類;
  `;
    const questions = [
        {
            title: 'カードのスタイリング',
            tests: [
                {
                    title: '`style.css`を開き、`*.card__item*`クラスの背景色を白`*#fff*`にしてください。',
                    hint: '`*background-color*`を使います。',
                    test: () => {
                        isContainTextInEditor('background-color: #fff;', 'style.css', '.card__item {', '}');
                    }
                },
                {
                    title: '`*12px*`の角丸にしてください。',
                    hint: '`*border-radius*`を使います。',
                    test: () => {
                        isContainTextInEditor('border-radius: 12px;', 'style.css', '.card__item {', '}');
                    }
                },
                {
                    title: 'カードの周りに、水平方向`*0*`、垂直方向`*4px*`、ぼかし`*8px*`、色`*rgba(0, 0, 0, 0.1)*`の影を実装してください。',
                    hint: hint1,
                    test: () => {
                        isContainTextInEditor('box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);', 'style.css', '.card__item {', '}');
                    }
                },
                {
                    title: '横幅を`*280px*`にしてください。',
                    hint: '`*width*`を使います。',
                    test: () => {
                        isContainTextInEditor('width: 280px;', 'style.css', '.card__item {', '}');
                    }
                },
                {
                    title: 'カードの上下左右の内側に余白を`*16px*`指定してください。',
                    hint: '`*padding*`を使います。',
                    test: () => {
                        isContainTextInEditor('padding: 16px;', 'style.css', '.card__item {', '}');
                    }
                },
                {
                    title: '`*transition*`を使って、アニメーションの対象は全て、アニメーション時間は`*0.3*`秒、アニメーションの種類は`*ease-in-out*`を指定してください。',
                    hint: hint2,
                    test: () => {
                        isContainTextInEditor('transition: all 0.3s ease-in-out;', 'style.css', '.card__item {', '}');
                    }
                }
            ]
        }
    ];


1枚目のカードの枠を実装2

list-style

classセレクタ

<ul>

<li>

margin

margin: 10px 20px 30px 40px;

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

display: flex;

justify-content

1枚目のカードの枠を実装1

display: block

text-decoration

<img>

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

height

カードにリンクと画像を実装

color

font-size

text-align

font-weight

カードにテキストを実装

2枚目のカードを実装

:hover

transform

3枚目のカードを実装

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


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

Web制作コース

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

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