:hover

transform

<li>

<img>

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

classセレクタ

box-shadow

<ul class="card__list">
 <li class="card__item">
 <a href="#service">
 <img
 class="card__image"
 src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/7e0b026e-a7e1-426a-9d9d-4c881d2d59fc.jpg"
 alt="Webデザイン参考画像"
 />
 Design
 Webデザイン
 
 魅力的で使いやすいデザインを提供し、最新のトレンドを取り入れ、
 ユーザーにとって見やすく、使いやすいデザインを制作いたします。
 
 </a>
 </li>
 <li class="card__item">
 <a href="#service">
 <img
 class="card__image"
 src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/d8b615e8-c677-4496-8004-9b09374de4a3.jpg"
 alt="ホームページ制作参考画像"
 />
 Home page
 ホームページ制作
 
 企業や個人の魅力を最大限に引き出すホームページを制作します。
 目的やターゲットに合わせた、効果的なサイトを構築します。
 
 </a>
 </li>
 
 
 
 <li class="card__item">
 <a href="#service">
 <img
 class="card__image"
 src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c8f1af9b-56f1-4857-a633-e36325f0d5bd.png"
 alt="ランディングページ制作参考画像"
 />
 Landing page
 ランディングページ制作
 
 集客や販売促進を目的としたランディングページを作成します。
 ターゲットに響くデザインと構成で、高いコンバージョンを実現します。
 
 </a>
 </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;
}

.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);
  overflow: hidden;
  width: 280px;
  padding: 16px;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.card__item a {
  display: block;
  text-decoration: none;
}

/* 問題3. ホバー機能の実装 */
/* この下に解答してください */
.card__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card__image {
  width: 100%;
  height: auto;
}

.card__subTitle {
  color: #888;
  font-size: 12px;
  margin: 8px 0 4px;
  text-align: center;
}

.card__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}


<ul class="card__list">
 <li class="card__item">
 <a href="#service">
 <img
 class="card__image"
 src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/7e0b026e-a7e1-426a-9d9d-4c881d2d59fc.jpg"
 alt="Webデザイン参考画像"
 />
 Design
 Webデザイン
 
 魅力的で使いやすいデザインを提供し、最新のトレンドを取り入れ、
 ユーザーにとって見やすく、使いやすいデザインを制作いたします。
 
 </a>
 </li>
 <li class="card__item">
 <a href="#service">
 <img
 class="card__image"
 src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/d8b615e8-c677-4496-8004-9b09374de4a3.jpg"
 alt="ホームページ制作参考画像"
 />
 Home page
 ホームページ制作
 
 企業や個人の魅力を最大限に引き出すホームページを制作します。
 目的やターゲットに合わせた、効果的なサイトを構築します。
 
 </a>
 </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;
}

.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);
  overflow: hidden;
  width: 280px;
  padding: 16px;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.card__item a {
  display: block;
  text-decoration: none;
}

/* 問題3. ホバー機能の実装 */
/* この下に解答してください */

.card__image {
  width: 100%;
  height: auto;
}

.card__subTitle {
  color: #888;
  font-size: 12px;
  margin: 8px 0 4px;
  text-align: center;
}

.card__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}


// =======================
 // テストコード
 // =======================
 const answer1 = `
 <a href="#service">
 <img
 class="card__image"
 src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c8f1af9b-56f1-4857-a633-e36325f0d5bd.png"
 alt="ランディングページ制作参考画像"
 />
 Landing page
 ランディングページ制作
 
 集客や販売促進を目的としたランディングページを作成します。
 ターゲットに響くデザインと構成で、高いコンバージョンを実現します。
 
 </a>
 `;
 const hint1 = `
 以下のコードを参考にしてください。
 ~~~css
 box-shadow: 4px 8px 4px #333;
 `;
 const questions = [
 {
 title: '画像の差し替え',
 tests: [
 {
 title: '3枚目のカードの画像の`alt`属性を`*ランディングページ制作参考画像*`に、`src`属性を`*https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c8f1af9b-56f1-4857-a633-e36325f0d5bd.png*`に変更してください。',
 hint: '',
 test: async () => {
 await isAttrValueEqual('li:nth-of-type(3) img', 'src', 'https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c8f1af9b-56f1-4857-a633-e36325f0d5bd.png');
 await isAttrValueEqual('li:nth-of-type(3) img', 'alt', 'ランディングページ制作参考画像');
 }
 }
 ]
 },
 {
 title: 'テキストの差し替え',
 tests: [
 {
 title: '3枚目のカードのサブタイトルを`*Landing page*`に変更してください。',
 hint: '`class`属性はそのままにします。',
 test: () => {
 isContainTextInEditor('Landing page', 'index.html');
 }
 },
 {
 title: '3枚目のカードのタイトルを`*ランディングページ制作*`に変更してください。',
 hint: '`class`属性はそのままにします。',
 test: () => {
 isContainTextInEditor('ランディングページ制作', 'index.html');
 }
 },
 {
 title: '3枚目のカードのテキストを`*集客や販売促進を目的としたランディングページを作成します。ターゲットに響くデザインと構成で、高いコンバージョンを実現します。*`に変更してください。',
 hint: 'テキストのみ変更します。',
 test: () => {
 isContainTextInEditor('集客や販売促進を目的としたランディングページを作成します。ターゲットに響くデザインと構成で、高いコンバージョンを実現します。', 'index.html');
 }
 },
 {
 title: 'カードの要素を正しい順番で設置してください。',
 test: () => {
 isContainTextInEditor(answer1, 'index.html');
 }
 }
 ]
 },
 {
 title: 'ホバー機能の実装',
 tests: [
 {
 title: '`style.css`を開き、`*.card__item*`クラスにホバーアニメーションを実装してください。',
 hint: '擬似クラス`*:hover*`を使います。',
 test: () => {
 isContainTextInEditor('.card__item:hover {', 'style.css');
 isContainTextInEditor('}', 'style.css');
 }
 },
 {
 title: 'ホバーすると下に`*-5px*`移動するアニメーションを実装してください。',
 hint: '`*transform*`を使います。',
 test: () => {
 isContainTextInEditor('transform: translateY(-5px);', 'style.css', '.card__item:hover {', '}');
 }
 },
 {
 title: 'ホバー時は、カードの影が、水平方向`*0*`、垂直方向`*8px*`、ぼかし`*16px*`、色`*rgba(0, 0, 0, 0.15)*`となるように実装してください。',
 hint: hint1,
 test: () => {
 isContainTextInEditor('box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);', 'style.css', '.card__item:hover {', '}');
 }
 }
 ]
 }
 ];

3枚目のカードを実装

list-style

<ul>

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

width

transition

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

display: block

text-decoration

height

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

color

font-size

text-align

font-weight

カードにテキストを実装

2枚目のカードを実装

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


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

Web制作コース

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

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