display: block

text-decoration

<img>

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

height

width

* {
  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;
}

.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;
}

/* 問題1. カードにリンクを指定 */
/* この下に解答してください */
.card__item a {
  display: block;
  text-decoration: none;
}

/* 問題2. 画像の表示 */
/* この下に解答してください */
.card__image {
  width: 100%;
  height: 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;
}

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

.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;
}

/* 問題1. カードにリンクを指定 */
/* この下に解答してください */

/* 問題2. 画像の表示 */
/* この下に解答してください */



    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'カードにリンクを指定',
            tests: [
                {
                    title: '`index.html`を開き、`li`タグの中に`*a*`タグを実装してください。リンク先は`*#service*`としてください。',
                    hint: 'リンク先は、`*href*`属性で指定します。',
                    test: () => {
                        isContainTextInEditor('<a href="#service">', 'index.html');
                        isContainTextInEditor('</a>', 'index.html');
                    }
                },
                {
                    title: '`style.css`を開き、`*.card__item a*`をブロック要素にしてください。',
                    hint: '`*display*`を使います。',
                    test: () => {
                        isContainTextInEditor('display: block;', 'style.css', '.card__item a {', '}');
                    }
                },
                {
                    title: 'リンクに元々ついている下線を非表示にしてください。',
                    hint: '`*text-decoration*`を使います。',
                    test: () => {
                        isContainTextInEditor('text-decoration: none;', 'style.css', '.card__item a {', '}');
                    }
                }
            ]
        },
        {
            title: '画像の表示',
            tests: [
                {
                    title: '`index.html`を開き、`a`タグの中に`*img*`タグを実装してください。クラス名は`*card__image*`としてください。',
                    hint: '`*img*`タグを使います。`*class*`属性を指定してください。',
                    test: async () => {
                        await isAttrValueEqual('li:nth-of-type(1) a img', 'class', 'card__image');
                    }
                },
                {
                    title: '画像のソースを`*https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/7e0b026e-a7e1-426a-9d9d-4c881d2d59fc.jpg*`に指定してください。',
                    hint: '`*src*`属性を使います。',
                    test: async () => {
                        await isAttrValueEqual('li:nth-of-type(1) a img', 'src', 'https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/7e0b026e-a7e1-426a-9d9d-4c881d2d59fc.jpg');
                    }
                },
                {
                    title: '画像の表示が失敗した場合に、`*Webデザイン参考画像*`というテキストが表示されるようにしてください。',
                    hint: '`*alt*`属性を使います。',
                    test: async () => {
                        await isAttrValueEqual('li:nth-of-type(1) a img', 'alt', 'Webデザイン参考画像');
                    }
                },
                {
                    title: '`style.css`を開き、`*.card__image*`クラスの横幅を`*100%*`、高さを`*auto*`にしてください。',
                    hint: '横幅は`*width*`、高さは`*height*`を使います。',
                    test: () => {
                        isContainTextInEditor('width: 100%;', 'style.css', '.card__image {', '}');
                        isContainTextInEditor('height: auto;', 'style.css', '.card__image {', '}');
                    }
                }
            ]
        }
    ];


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

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

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

background-color

border-radius

box-shadow

transition

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

color

font-size

text-align

font-weight

カードにテキストを実装

2枚目のカードを実装

:hover

transform

3枚目のカードを実装

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


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

Web制作コース

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

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

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

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