/* 問題2. カードの幅を調整しよう */
.card {
  max-width: 320px;
}

.card-img {
  width: 100%;
}


<div>

<img>

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

max-width

width

/* 問題2. カードの幅を調整しよう */


カード内の画像を実装しよう

padding

margin

box-shadow

カード下部のテキスト部分を作成しよう

border

border-radius

text-align

カード内にボタンを追加しよう

:hover

ボタンにホバーエフェクトを指定しよう

HTML&CSSのレイアウト作成に欠かせないタグについて学んでいきます。

「レイアウトに関わるCSSを学ぼう」レッスンの総復習クイズです。

padding: 10px 20px 30px;

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

margin: 10px 20px 30px 40px;

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

カード内の画像を実装しよう

まずは必要なスキルを確認しましょう！