activeクラスがついているメニューにスタイルをつけていきます。
- メニューのスタイリング
- コンテンツのスタイリング
- displayプロパティの操作
メニューのスタイリング
・前回までで全体のスタイリングをしていきました。
・今回はもう少し細かいところのスタイリングをしていきたいと思います。
・前回の続きでクリックできる要素のスタイリングをもう少しやっていきましょう。
・まず中のテキストは真ん中に持ってきて上下の余白を少し付け、文字色をもう少し優しい黒にしてリンクの下線は消しておきたいのでそのへんをスタイリングしていきます。
・まずセレクタは.menu li aでいいでしょう。
・文字を中央に持ってくるのはtext-align: center;としてあげます。上下の余白を8pxつけたいのでpadding: 8px;としてあげましょう。
・文字色は優しい色にしたいのでcolor: #333;としてあげて下線はtext-decoration: none;で消しておきましょう。
・前回のも合わせるとこんな感じですね。
.menu li a {
display: inline-block;
width: 100px;
text-align: center;
padding: 8px 0;
color: #333;
text-decoration: none;
}
コンテンツのスタイリング
・次にメニューでクリックされた項目を黒の背景に白抜きの文字で表示されるようにしていきます。
・まず初期値では最初の項目であるサイトの概要とそのコンテンツが選択されている状態にしておきたいのでクラスをつけていきます。
・HTMLの方のファイルのaタグの中にクラスをつけていけばいいです。今回はわかりやすいようにactiveと名前をつけておきましょう。class=”active”をaタグののなかに入れておけばいいですね。
・同様にコンテンツの方にもactiveというクラス名をつけておきます。
・sectionのほうはもともとクラス名があるので半角空白を入れてactiveと書いていけばいいでしょう。
・そうしたらCSSに戻ってスタイリングをしていきます。
・今回は黒の背景に白抜きの文字で表示していきます。
・セレクタはmenu li a.active{}と.content.active {}の両方に同じようなスタイリングをしていきます。
・背景を薄い黒にしていきたいのでbackground: #555;としていき、文字色は白くしていきたいのでcolor: #fff;と書いていきましょう。
displayプロパティの操作
・最後に今回付けた.activeのクラスがついてないコンテンツは非表示にしていきたいのでそのように書いていきましょう。
・.contentにに対してdisplay: none;にしてあげましょう。
・さらに.activeがついているコンテンツは表示しておきたいので.content.activeの方にはdisplay: block;としてあげましょう。
・これでactiveがついているコンテンツだけを表示させることができます。
