CSS練習問題 #002 ～hoverに挑戦～

![eyecatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/4f2ec66f-78aa-7bfe-8de7-1bbe30828c9a.png)

[CSS練習問題 #001](https://qiita.com/sun19017/items/994b63525a0aa82dea5e)に続き、CSS練習問題第二弾です:sparkles:

前回は既にあるCSSに何かを付け足すような「足し算の概念」だけで解ける問題でしたが、今回の問題はそれだけではなく既存のCSSを打ち消すような「引き算の概念」が必要な問題もいくつか用意しました。

![codepen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/e2be6b9a-1b60-cfc7-6abb-2589da674ef0.gif)
各問題の右上にあるこのロゴをクリックすると、自分で手を動かして実際に仕上がりを確認しながら問題に取り組めます。

**※ルールーは以下の通りです**
 
 * CSSを編集してマウスオーバーしたときのボタンの外観をデザイン画に近づける
 * HTMLの変更は禁止
 * 画像の使用は禁止
 * before疑似要素、after疑似要素のcontentは""にすること(文字や記号を入れない)
 * 検索はどんどんしてください

#Q1.文字と背景の色を反転してください

![q1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/0299dc5f-b8a4-ecbe-d709-d9f2e7b62448.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="eYpdmox" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q1">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/eYpdmox">
  CSS練習問題 2 ～見出し～ Q1</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="yLYaNLQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～A1">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/yLYaNLQ">
  CSS練習問題 2 ～見出し～A1</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
\#001をクリアした方には簡単な問題かと思います。
colorとbackground-colorに指定されている色を逆にします。
</details>

#Q2.ワントーン明るくしてください

![q2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/ffdbd441-a091-262a-01d9-1ad34e10d63d.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="jObMPeo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q2">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/jObMPeo">
  CSS練習問題 2 ～見出し～ Q2</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="XWmjbGd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A2">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/XWmjbGd">
  CSS練習問題 2 ～見出し～ A2</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
不透明度を80%ぐらいにします。
ただし、背景が黒などの場合はこの方法だと逆に暗くなってしまうので、その場合はbackground-colorに明るめの色を指定するなどの方法が良いと思います。
</details>

#Q3.四角い角を丸くしてください

![q3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/80b79691-9884-8b14-f2d6-e12c8b7ea2f0.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="yLYaNWy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q3">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/yLYaNWy">
  CSS練習問題 2 ～見出し～ Q3</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="abvmvYE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A3">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/abvmvYE">
  CSS練習問題 2 ～見出し～ A3</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
\#001のおさらいです。
50%を指定するとボタン全体が楕円形になってしまうので、注意が必要です。
</details>

#Q4.丸い角を四角くしてください

![q4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/df3cb142-e7ea-5570-d286-5f8f9be35227.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="VwvKvEq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q4">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/VwvKvEq">
  CSS練習問題 2 ～見出し～ Q4</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="ExVgVME" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A4">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/ExVgVME">
  CSS練習問題 2 ～見出し～ A4</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
もともと指定されているborder-radiusをどうやって打ち消すかがキーになります。
</details>

#Q5.グラデーションの方向を逆にしてください

![q5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/26312925-312e-e624-3a22-c3656f2fc6cd.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="wvKzKbM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q5">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/wvKzKbM">
  CSS練習問題 2 ～見出し～ Q5</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="qBOabOL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A5">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/qBOabOL">
  CSS練習問題 2 ～見出し～ A5</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
回答例ではグラデーションの向きをto rightからto leftに変更しましたが。
カラーコードを逆にするという方法もあります。
</details>

#Q6.線を二重にしてください

![q6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/079886f5-e926-e920-78f1-9e516273e1fa.png)
:mega: border-styleをdoubleにする以外の方法を考えてください

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="PoPGZmz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q6">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/PoPGZmz">
  CSS練習問題 2 ～見出し～ Q6</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="ExVgPmO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A6">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/ExVgPmO">
  CSS練習問題 2 ～見出し～ A6</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
before属性を使ってボタンよりも1周り小さい四角を描画します。
また、position:absolute;指定の要素にmarginを指定するというテクニックは覚えておくと何かと便利です。
</details>

#Q7.右上と左下だけ角を丸くしてください

![q7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/1ff98800-54fe-ef5c-bd4a-df3850c3975c.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="wvKzMpJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q7">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/wvKzMpJ">
  CSS練習問題 2 ～見出し～ Q7</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="ZEbpQjM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A7">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/ZEbpQjM">
  CSS練習問題 2 ～見出し～ A7</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
border-radiusの1つ目の25pxで左上と右下、2つ目の0pxで右上と左下を同時に指定しています。
</details>

#Q8.影を消して位置を下げてください

![q8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/4f47305d-8d84-437e-c565-a943b8f78724.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="YzyGqWN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q8">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/YzyGqWN">
  CSS練習問題 2 ～見出し～ Q8</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="YzyGqNZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A8">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/YzyGqNZ">
  CSS練習問題 2 ～見出し～ A8</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
box-shadowを打ち消すには、初期値のnoneを指定します。
何かを打ち消す場合はそのプロパティの初期値を指定するのが基本です。
また、position:relative;の意味や役割を理解しましょう。
</details>

#Q9.上下を逆にしてください

![q9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/d4146c18-e4ce-94c5-f1be-0368808d5870.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="bGVwprj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q9">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/bGVwprj">
  CSS練習問題 2 ～見出し～ Q9</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="OJyRNzZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A9">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/OJyRNzZ">
  CSS練習問題 2 ～見出し～ A9</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
「上下を逆にする」というと、transform: rotate(180deg);を使う方も多いかと思いますが、この問題のデザイン画は回転ではなく反転して上下逆にするので、transform: scale(1, -1);が正解です。
![q9_rotate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/4d5120d5-4919-970d-415c-f70f3ee4f9fa.png)
**↑transform: rotate(180deg);を指定した場合**
![q9_scale.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/b30f6b8e-7a9a-e269-c0e5-0d1687c3efde.png)
**↑transform: scale(1, -1);を指定した場合**
</details>

#Q10.左右を逆にしてください

![q10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/432a2425-2864-0a7e-ca1c-d5dca7684b76.png)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="gOawryj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ Q10">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/gOawryj">
  CSS練習問題 2 ～見出し～ Q10</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<details>
<summary>**回答例** (クリックすると表示されます)</summary>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="sun19017" data-slug-hash="OJyRNKa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS練習問題 2 ～見出し～ A10">
  <span>See the Pen <a href="https://codepen.io/sun19017/pen/OJyRNKa">
  CSS練習問題 2 ～見出し～ A10</a> by sun19017 (<a href="https://codepen.io/sun19017">@sun19017</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</details>

<details>
<summary>**解説** (クリックすると表示されます)</summary>
transform: scale(1, -1);で上下が反転するので、左右の反転はtransform: scale(-1, 1);になります。
</details>