PR

1. マウスオーバーでボタンのビジュアルが変わる

 今回は、マウスオーバーによってボタンの背景色や文字色が切り替わるメニューを作ってみます。

 マウスオーバーとは、マウスカーソルの矢印マークを、画像やボタンなどの上にかざすことを言います。クリックはしていない状態のことです。

 ボタンのビジュアルを切り替えられると、いかにもWebサイトらしい、視覚的な効果を与えることができますね。

 まずは、以下からサンプルファイルをダウンロードしてください。HTMLファイルや画像ファイル、CSSファイルが入っています。さらに、HTMLファイルを分かりやすく説明しているPDFファイルも同梱しています。

HTMLファイル・説明PDFファイルなどをダウンロード

 ダウンロードしたファイルを解凍したら、「backchange.html」をWebブラウザーのアイコンにドラッグ・アンド・ドロップしてWebページとして開きましょう。

 このようなWebページが開くはずです。「1年ドキュメント」や「手作りオモチャ」などのボタンをマウスオーバーすると、ボタンのビジュアルが切り替わるのが分かりますね。

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
日経電子版セット今なら2カ月無料