サブメニューのスタイリング★マウスカーソルを乗せたときに変化を与える前々回、サブメニューをクリックしやすくするためにa要素をブロック表示にしました。その結果、リンク領域どうしが隣接して、リンクの境目にカーソルを乗せた際に、これからどちらのリンクをクリックしようとしているのか分かりにくくなっています。そこで、サブメニュー部分にマウスカーソルが乗ったらリンクテキストの下線を表示させるスタイルを指定しようと思います。マウスカーソルが乗った要素にスタイルを指定するには、:hover疑似クラスというセレクタを使います。base.cssに以下の記述を追加してください。{clear:both;/*回り込みを解除する*/}保存をしたらブラウザで表示してみましょう。リンク部分にマウスが乗った際に該当するリンクテキストに下線が表示されるようになれば成功です。リンク部分にマウスを乗せた際に下線が表示されることで、ユーザーがこれからどのリンクをクリックするのか明確になりました。わずかな改善ではありますが、この変化を付けてやることで、リンクの境界が明確になって、ほんの少しですが使い勝手が良くなったと思います。ユーザー体験ユーザーはウェブサイトを操作しながら、どの部分がメニューで、どうすれば自分が求めている情報を得られるかなどを学習していきます。一連のユーザー体験を通してそのウェブサイトへの信頼を高めたり、反対に不満や不信感を抱いたりします。今回のようにスタイルのディテールを詰めながら、ウェブサイトの操作性を向上させていきます。ここまでの制作段階で、サンプルサイトは以下の状態となっています。