CSSファイルを作成して画面全体のスタイリングをしていきます。
- styles.cssの作成
- bodyのスタイル
- headerのスタイル
-
マテリアルアイコンのスタイル
styles.cssの作成
・前回まででHTMLでのマークアップがある程度終わったので今度はCSSでスタイルを作っていきます。
・まずCSSファイルを新しく作っていきたいのでファイルを読み込んでいきます。
・リンクタグを書いてファイル名を書いていけばいいのですがこのとき注意点としてマテリアルアイコンを読み込んだあとにCSSを読み込むようにしていきましょう。
・リンクタグはリレーション属性をstylesheetにしてあげてhref属性もcssフォルダの中にstyles.cssとしてあげましょう。
・こんな感じですね。
<link rel="stylesheet" href="css/styles.css">
・あとはVS Codeでしたらファイルをホバーしてcommand + クリックで新しいファイルを作ることができますね。
bodyのスタイル
・では早速スタイルをしていきます。
・まずは全体のスタイルとして余白を0にして文字の種類をもう少しいじっていきます。
・セレクタはbodyに指定し余白を0なのでmargin: 0;としてあげて文字の形もfont-familyを使ってverdana, sans-serifを指定してあげます。
・こんな感じですね
body {
margin: 0;
font-family: verdana, sans-serif;
}
headerのスタイル
・ロゴとマテリアルアイコンがあるheaderはまず左右にそれらを持ってきたいのと余白がないのでそれぞれ外側に余白を作って行きます。
・まず左右に持ってくるにはdisplay: flex;にしてあげます。横並びになります。
・そしてそれぞれの要素の外側に余白を付けたいのでpaddingの左右に16pxの余白を作っていきます。padding: 0 16px;としてあげましょう。
・こんな感じです
header {
display: flex;
padding: 0 16px;
}
マテリアルアイコンのスタイル
・ただこのままではheaderは左右に配置されただけで余白が思ったところに来ないので両端に配置したい場合について見ていきましょう。
・その場合はmargin-leftをautoに設定してあげます。margin-left: auto;ででいいですね。
・こんな感じです。
.sp-menu {
margin-left: auto;
}
・もう少し細かいスタイリングは次回以降やっていきます。