CSSで、画面全体とメニューのスタイルを調整していきます。
- 全体のスタイリング
- コンテイナーのスタイリング
- メニューのスタイリング
全体のスタイリング
・前回まででHTMLでのマークアップを終えました。
・今回はCSSでスタイリングをやっていきたいと思います。
・まずは全体のスタイリングをしていきます。今回は全体の文字の大きさを小さくしておきたいので14pxくらいにしておきましょう。
・セレクタはbodyでプロパティはfont-sizeにして値を14pxとしていきましょう。
・こんな感じですね
body {
font-size: 14px;
}
コンテイナーのスタイリング
・次にコンテイナーのスタイリングをしていきます。
・コンテイナーとはメニューリストとコンテンツを両方囲った親要素でその両方をスタイリングしていくという形になります。
・コンテイナーは上下に少し余白がほしいのと中央揃えにしていきます。また幅は500pxくらいにしていきます。
・まずセレクタは.containerですね。上下の余白と中央揃えはmarginで付けることができます。
・上下に30pxくらいの余白がほしいので値は30px auto;と書いていけばいいですね。
・次に幅ですが500pxにしたいのでwidth: 500px;と書いていきましょう。
・こんな感じですね。
.container {
margin: 30px auto;
width: 500px;
}
メニューのスタイリング
・最後にメニュータグをスタイリングしていきます。
・リストの黒円を取りたいのと調整しやすいように最初からついている余白を0にしたいのと横並びにしていきます。
・まずセレクタは.menuですね。
・次にリストの黒丸はlist-styleで調整できるので値をnoneにしておきます。
・余白はmarginとpaddingを0にしておけばいいのでそれぞれ設定していきます。
・横並びはdisplayプロパティを使い値はflexとしていきましょう。
・最後にクリックできる要素に関してのスタイリングをしていきます。このままだと幅の指定ができないのでinline-blockにしていきたいのと幅は100pxにしておきます。
・a要素は初期値ではinlineなので幅の指定ができません。どうすればいいかと言うとinline-blockに指定する必要があります。
・セレクタは.menu li aでいいですね。
・displayプロパティで値をinline-blockとしてあげましょう。
・後は幅を100pxに指定してあげれば100px間隔でメニューを表示してくれます。
・こんな感じです。
.menu li a {
display: inline-block;
width: 100px;
}