list-style

classセレクタ

<ul>

<li>

padding

padding: 10px 20px 30px;

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

margin

margin: 10px 20px 30px 40px;

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

display: flex;

justify-content

<ul class="card__list">
  <li class="card__item"></li>
</ul>

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

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

/* 問題2. カード全体のスタイリング */
/* この下に解答してください */
.card__list {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}


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

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

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



    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'カード全体を囲むための要素を実装',
            tests: [
                {
                    title: '`index.html`を開き、`*ul*`タグを実装し、`*card__list*`クラスを指定してください。',
                    hint: 'クラスは`class="〇〇"`で指定します。',
                    test: () => {
                        isContainTextInEditor('<ul class="card__list">', 'index.html');
                        isContainTextInEditor('</ul>', 'index.html');
                    }
                },
                {
                    title: '`ul`タグの中に`*li*`タグを実装し、`*card__item*`クラスを指定してください。',
                    hint: 'クラスは`class="〇〇"`で指定します。',
                    test: () => {
                        isContainTextInEditor('<li class="card__item">', 'index.html');
                        isContainTextInEditor('</li>', 'index.html');
                    }
                }
            ]
        },
        {
            title: 'カード全体のスタイリング',
            tests: [
                {
                    title: '`style.css`を開き、`*.card__list*`クラスをフレックスボックス要素にしてください。',
                    hint: '`*display*`を使います。',
                    test: () => {
                        isContainTextInEditor('display: flex;', 'style.css', '.card__list {', '}');
                    }
                },
                {
                    title: 'フレックスアイテムを中央に配置してください。',
                    hint: '`*justify-content*`を使います。',
                    test: () => {
                        isContainTextInEditor('justify-content: center;', 'style.css', '.card__list {', '}');
                    }
                },
                {
                    title: 'カード間の余白を`*24px*`で指定してください。',
                    hint: '`*gap*`を使います。',
                    test: () => {
                        isContainTextInEditor('gap: 24px;', 'style.css', '.card__list {', '}');
                    }
                },
                {
                    title: 'リストのデフォルトのスタイルを無効にしてください。',
                    hint: '`*list-style*`を使います。',
                    test: () => {
                        isContainTextInEditor('list-style: none;', 'style.css', '.card__list {', '}');
                    }
                },
                {
                    title: '要素の内側の余白を`*0*`にしてください。',
                    hint: '`*padding*`を使います。',
                    test: () => {
                        isContainTextInEditor('padding: 0;', 'style.css', '.card__list {', '}');
                    }
                },
                {
                    title: 'カード全体を上下の余白を`*0*`にして、左右中央に配置してください。',
                    hint: '`*margin*`を使います。',
                    test: () => {
                        isContainTextInEditor('margin: 0 auto;', 'style.css', '.card__list {', '}');
                    }
                }
            ]
        }
    ];


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

background-color

border-radius

box-shadow

width

transition

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

display: block

text-decoration

<img>

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

height

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

color

font-size

text-align

font-weight

カードにテキストを実装

2枚目のカードを実装

:hover

transform

3枚目のカードを実装

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


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

Web制作コース

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

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

サービス紹介カードを作ってみようの総復習クイズ

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