擬似クラス

細かい部分のスタイルを調整とホバー擬似クラスをつけていきます。

• 細かいスタイリング
• 擬似クラス

細かいスタイリング

・前回activeクラスをつけてそちらのスタイルを整えてきました。

・今回はさらに見やすくなるように細かいところのスタイリングをしていきます。

・コンテンツは高さをある程度固定したいのと文字にゆったりとした感じをつけたいのでそのへんの設定をしていきます。

・セレクタは.content.activeの方に書いていきましょう。

・コンテンツの高さは最低150pxくらいにしておきたいのでmin-height: 150px;として、文字のゆったりさはpadding: 12px;で調整します。

・次にメニュータブの上部を丸めたいので.menu li aに対してborder-radius: 4px 4px 0 0;と指定してあげましょう。

・こんな感じですね。

.menu li a {

  display: inline-block;

  width: 100px;

  text-align: center;

  padding: 8px 0;

  color: #333;

  text-decoration: none;

  border-radius: 4px 4px 0 0;

}

.content.active {

  background: #555;

  color: #fff;

  min-height: 150px;

  padding: 12px;

  display: block;

}

擬似クラス

・次にサイト概要以外の箇所をホバーするとふわっと文字色が薄くなるアニメーションを付けていきます。

・つまりサービス内容よお問い合わせをホバーしたら文字色が薄くなってクリックができる感じを強調していきます。

・これはセレクタに癖があるのですが結論から言うと.menu li a:not(.active):hover とセレクタを指定しましょう。

・これは.menuの中のliの中のaの.activeがついていないところ（じゃない方）をホバーしたときと言うような意味になります。

・後は薄くしていきたいのと0.4秒ほどかけてアニメーションしていきたいのでopacity: 0.5;とtransition: opacity 0.4s;を指定してあげましょう。

・こんな感じですね

.menu li a:not(.active):hover {

  opacity: 0.5;

  transition: opacity 0.4s;

}