:hover

<div class="card">
  <img
    class="card-img"
    src="/images/lessons/flower.jpg"
    alt="マーガレットの花"
  />
  <div class="card-bottom">
    <p class="card-title">マーガレットのカード</p>
    <a class="card-btn" href="">Push</a>
  </div>
</div>


.card {
  max-width: 320px;
  box-shadow: 2px 2px 4px gray;
  text-align: center;
}

.card-img {
  width: 100%;
}

.card-bottom {
  padding: 32px 16px;
}

.card-title {
  margin-bottom: 16px;
}

.card-btn {
  border: solid 1px #333333;
  border-radius: 8px;
  padding: 8px;
  width: 100px;
  margin: 0 auto;
  display: block;
}

/* 問題1. ホバー時にボタンを半透明に変化させよう */
.card-btn:hover {
  opacity: 0.5;
}


.card {
  max-width: 320px;
  box-shadow: 2px 2px 4px gray;
  text-align: center;
}

.card-img {
  width: 100%;
}

.card-bottom {
  padding: 32px 16px;
}

.card-title {
  margin-bottom: 16px;
}

.card-btn {
  border: solid 1px #333333;
  border-radius: 8px;
  padding: 8px;
  width: 100px;
  margin: 0 auto;
  display: block;
}

/* 問題1. ホバー時にボタンを半透明に変化させよう */


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

<div>

<img>

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

max-width

width

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

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となる。

box-shadow

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

border

border-radius

text-align

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

レイアウトの構成に必要なCSSの知識を集中的に学び、Webページ制作の現場で求められるレイアウト技術を習得します。
カード型レイアウトなどの実践も含まれます。

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