Classとid ワーク回答 #CSS

完成コード

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <div class="inner">
      <h2>ボタンを作ってみよう！</h2>
      <a href="#" class="button blue">ボタン</a>
      <a href="#" class="button red">ボタン</a>
      <a href="#" class="button green">ボタン</a>
    </div>
  </body>
</html>

style.css

.button {
  background-color: #333;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 3px 3px 0px #8e8e8e;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
/* 以下のコードは見た目を整えるためなので、編集する必要はありません */
.inner {
  width: 960px;
  margin: 100px auto 0;
}

完成見本

解説

みなさん、どうだったでしょうか？ちょっと難しかったかもしれません！
できなかった方もこの解説を見て、理解できれば大丈夫なのでご安心ください！
まず、今回の問題を解く上で着目すべき点は、「3つのボタンの何が共通していて、何が異なっているのか？」という点です。
これをそれぞれ整理すると、以下のようになります。
共通点：ボタンの形、影
相違点：ボタンの色
共通点と相違点をそれぞれ整理したら、まずは共通点である「ボタンの形、影」を実装するCSSを書きます。今回は形・影どちらも一括で「buttonクラス」としてまとめてしまいましょう。
※ちなみにclass名は「button」でなくても「btn」でも何でも大丈夫です！
html:index.html <div class="inner"> <h2>ボタンを作ってみよう！</h2> <a href="#" class="button">ボタン</a> <a href="#" class="button">ボタン</a> <a href="#" class="button">ボタン</a> </div>

style.css

.button {
  background-color: #333;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 3px 3px 0px #8e8e8e;
}
???? {
  background-color: blue;
}
???? {
  background-color: red;
}
???? {
  background-color: green;
}
/* 以下のコードは見た目を整えるためなので、編集する必要はありません */
.inner {
  width: 960px;
  margin: 100px auto 0;
}

すると、以下のような見た目になるはずです。ちなみに、ボタンが黒色になっているのは、「button」クラスに「background-color: #333;」を当てているからです。

以上で、共通点の部分を作ることができました。続いて、相違点である「ボタンの色」を実装するCSSを書きます。
今回はそれぞれのボタンの色に応じて「blue、red、green」クラスを用意します。
そして今回一番難しかったところが、htmlにclassを記述する部分だったかと思います。
ヒントでも少し触れましたが、実はclassは1つだけでなく、複数指定することができます。以下のコードでは、「button」クラスで当てている黒色の背景色を、それぞれの「blue、red、green」クラスで上書きしているという仕組みになっています。

index.html

<div class="inner">
  <h2>ボタンを作ってみよう！</h2>
  <a href="#" class="button blue">ボタン</a>
  <a href="#" class="button red">ボタン</a>
  <a href="#" class="button green">ボタン</a>
</div>

style.css

.button {
  background-color: #333;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 3px 3px 0px #8e8e8e;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
/* 以下のコードは見た目を整えるためなので、編集する必要はありません */
.inner {
  width: 960px;
  margin: 100px auto 0;
}

すると、このような見本と同じ見た目が完成します！