:hover

box-shadow

opacity

<h1>カード型レイアウトを実装してみよう</h1>

<div class="card">
  <img
    class="card-img"
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/fac05dd7-0b3f-4e1d-9657-54ae7d1c24fa.jpg"
    alt="マーガレットの花"
  />

  <div class="card-content">
    <h2>マーガレット</h2>
    <p>11月～5月にかけて花を咲かせるキク科の植物です。</p>
    <a class="card-button" href="">詳細を見る</a>
  </div>
</div>


h1 {
  font-size: 28px;
}
a {
  text-decoration: none;
}

.card {
  max-width: 320px;
  /* 問題2 カード全体に影を指定 */
  /* この下に解答してください  */
  box-shadow: 2px 2px 4px gray;
}

.card-img {
  width: 100%;
}

.card-content {
  padding: 24px 16px;
}

.card-button {
  display: block;
  width: 100px;
  color: #fff;
  background-color: #26a69a;
  padding: 8px;
  text-align: center;
  margin-left: auto;
  border-radius: 8px;
}

.card-button:hover {
  /* 問題1 マウスカーソルが当たった時にボタンが半透明になるように指定 */
  /* この下に解答してください  */
  opacity: 0.5;
}


h1 {
  font-size: 28px;
}
a {
  text-decoration: none;
}

.card {
  max-width: 320px;
  /* 問題2 カード全体に影を指定 */
  /* この下に解答してください  */
}

.card-img {
  width: 100%;
}

.card-content {
  padding: 24px 16px;
}

.card-button {
  display: block;
  width: 100px;
  color: #fff;
  background-color: #26a69a;
  padding: 8px;
  text-align: center;
  margin-left: auto;
  border-radius: 8px;
}

.card-button:hover {
  /* 問題1 マウスカーソルが当たった時にボタンが半透明になるように指定 */
  /* この下に解答してください  */
}


ボタンにホバーエフェクトとカード全体に影の実装

<img>

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

max-width

width

カード内の画像を実装

padding

padding: 10px 20px 30px;

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

<h2~h6>

カード内のコンテンツを実装

display

カード内にボタンを追加

color

text-align

background-color

margin

margin: 10px 20px 30px 40px;

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

border-radius

ボタンの装飾

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

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

Web制作コース

【中級編💼】レイアウトとレスポンシブ対応を学ぼう

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