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

CSS練習問題 #001に続き、CSS練習問題第二弾です

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

各問題の右上にあるこのロゴをクリックすると、自分で手を動かして実際に仕上がりを確認しながら問題に取り組めます。

※ルールーは以下の通りです

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

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

See the Pen CSS練習問題 2 ～見出し～ Q1 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～A1 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

\#001をクリアした方には簡単な問題かと思います。 colorとbackground-colorに指定されている色を逆にします。

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

See the Pen CSS練習問題 2 ～見出し～ Q2 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A2 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

不透明度を80%ぐらいにします。 ただし、背景が黒などの場合はこの方法だと逆に暗くなってしまうので、その場合はbackground-colorに明るめの色を指定するなどの方法が良いと思います。

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

See the Pen CSS練習問題 2 ～見出し～ Q3 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A3 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

\#001のおさらいです。 50%を指定するとボタン全体が楕円形になってしまうので、注意が必要です。

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

See the Pen CSS練習問題 2 ～見出し～ Q4 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A4 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

もともと指定されているborder-radiusをどうやって打ち消すかがキーになります。

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

See the Pen CSS練習問題 2 ～見出し～ Q5 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A5 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

回答例ではグラデーションの向きをto rightからto leftに変更しましたが。 カラーコードを逆にするという方法もあります。

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

border-styleをdoubleにする以外の方法を考えてください

See the Pen CSS練習問題 2 ～見出し～ Q6 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A6 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

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

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

See the Pen CSS練習問題 2 ～見出し～ Q7 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A7 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

border-radiusの1つ目の25pxで左上と右下、2つ目の0pxで右上と左下を同時に指定しています。

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

See the Pen CSS練習問題 2 ～見出し～ Q8 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A8 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

box-shadowを打ち消すには、初期値のnoneを指定します。 何かを打ち消す場合はそのプロパティの初期値を指定するのが基本です。 また、position:relative;の意味や役割を理解しましょう。

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

See the Pen CSS練習問題 2 ～見出し～ Q9 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A9 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

「上下を逆にする」というと、transform: rotate(180deg);を使う方も多いかと思いますが、この問題のデザイン画は回転ではなく反転して上下逆にするので、transform: scale(1, -1);が正解です。  **↑transform: rotate(180deg);を指定した場合**  **↑transform: scale(1, -1);を指定した場合**

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

See the Pen CSS練習問題 2 ～見出し～ Q10 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 2 ～見出し～ A10 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

transform: scale(1, -1);で上下が反転するので、左右の反転はtransform: scale(-1, 1);になります。