完成コード
index.html
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
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」でも何でも大丈夫です！
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;
}
すると、このような見本と同じ見た目が完成します！