コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
マウスポインタを重ねたときのボタンの表現
このレッスンでは マウスポインタを重ねた時の ボタンのスタイルを 定めてみたいと思います。 今このボタンは、ちょっと出っ張ったような 影が付いている きれいな形になっているんですが、 マウスポインタを重ねても 何も反応がありませんね。 重ねた時に何か反応が欲しいところです。 こちらがHTMLドキュメントですけれども ボタンはこれですね。 p要素 class、button の中の a要素ということになっています。 そして先ほどの角丸の出っ張ったボタンは class、button のa要素ということで 設定がしてあるわけですね。 ではマウスポインタを重ねた時というのは 同じようにセレクタは、button と。 中のa要素ですね。 そしてポインタを重ねた時というのは 疑似クラスの hover と。 これで設定すればいいわけですね。 まず簡単なところからいってみましょう。 background-color ですね。 これを mediumaquamarine と。 ちょっと明るい色です。 まずは確認してみましょう。 ファイルを保存します。 ボタンにマウスポインタを重ねますと 明るくなると。 これだけでも悪くはないんですけれども もう少し手を加えていきたいと思います。 マウスポインタを重ねたとき、 位置を少しずらしましょう。 下にずらしたいと思います。 その場合には top というプロパティがありまして 上端位置ですね。 これを設定することができます。 下方向がプラスですので 2px というふうにすると 2px 下がるんですが、 ちょっと注意があります。 この段階で先に確認しておきましょう。 マウスポインタを重ねると カラーが変わるんですが、 位置はこれ、ずれないですね。 というのは ひとつ設定を加えておく必要があります。 この class、button のa要素、 元のほうですね。 こちらでポジションのプロパティを 設定します。 position を relative、 相対的ということですね。 相対的に位置が変えられると いうことになります。 これを設定して初めて この top の位置をずらすと いう効果が出てきます。 確認しましょう。 マウスポインタを重ねると 今度は下がりますね。 もう少し凝っていきましょう。 影の設定も変えることにします。 この box-shadow…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。