言語を学ぶ

HTML&CSS3でつくるポップなメニュー

HTML&CSS3でつくるポップなメニュー

チャプター:6

このブックでは、当サイトのコンテンツである「はじめてのHTML」、「はじめてのCSS」及び「はじめてのCSS3」の学習を終えた人を対象として、マウスカーソルが乗せられたら色が変わって大きくなる「ポップなメニュー」をつくります。

1.メニューのHTML構造をつくろう

このチャプターでは、「ポップなメニュー」の土台となるHTML構造をつくります。

30P

2.リストの装飾をしよう

このチャプターでは、メニューのリストをきれいに揃えるために、CSSで装飾を行います。

30P

3.各メニューリンクの装飾をしよう

このチャプターでは、4つのメニューリンクへの装飾を行います。

46P

4.マウスが乗った時のリンクの装飾をしよう

このチャプターでは、マウスカーソルが各メニューリンクに合わせられた時のリンクを装飾していきます。

31P

5.メニューリンク位置を固定しよう

このチャプターでは、マウスカーソルを合わせても メニューリンクの位置がずれないよう メニューリンクの位置を固定します。

32P

6.要素を滑らかに変化させよう

このチャプターでは、メニューリンクにマウスカーソルが乗せられた時に、滑らかにメニューリンクが変化するようにします。※このチャプターで学習する機能はInternet Explorer 9以下のブラウザをご利用の方は使用することができません。

30P