CSSでボタンのロールオーバーをデザインする【1】テーブルレイアウトを卒業しようこのページに掲載されている内容は、2010年に作成されたものです。CSSでボタンのロールオーバーをデザインする【1】マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。:hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。先日の講座でもご質問いただいたので改めてご紹介します。根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。ポイントは、背景画像をずらす!です。no-repeat;}するとこうなります。background-positionの-45pxが今回のポイントです。a:hoverの時はマイナスの値を指定して、上にずらしています。すれば1つの画像ファイルでノーマル時とロールオーバー時両方デザインすることができます。画像数が減るのでファイル・コードの管理が楽ロールオーバー時に別画像を読み込まないので表示がはやいなどでしょうか。今回つかった背景画像はこうなっています。これを応用すれば、こんなことができます。背景画像系のテクニックは応用がきいて楽しいですね。)XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。Twitter大切にします個人情報m-Schoolは、お客さまのプライバシーを守ります。3分コーディングCSSでボタンのロールオーバーをデザインする【1。