ロゴとメニューアイコン、本文のスタイルを調整していきます。
- ロゴのスタイル
- マテリアルアイコンのスタイル
- mainのスタイル
ロゴのスタイル
・ではもう少し細かいスタイリングをしていきたいと思います。
・まずヘッダーのロゴが大きくマテリアルアイコンが小さいのでフォントのサイズや行の高さなどを調節していきます。そしてついでにマテリアルアイコンはクリックできることを直感的に分かりやすいようにカーソルを持っていったときにポインターになるように設定していきます。
・またメインの文字も余白を作っていきます。
・セレクタはheader h1になります。
・まずロゴですがマージンを0にしておきフォントサイズは22に行の高さは64にしていきます。
・余白はmargin: 0;でいいですね。フォントサイズはfont-size: 22px;としておき、行の高さはline-height: 64px;としておきましょう。
・こんな感じですね。
header h1 {
margin: 0;
font-size: 22px;
line-height: 64px;
}
マテリアルアイコンのスタイル
・次にマテリアルアイコンのスタイリングに入ります。
・マテリアルアイコンは少し小さめなのでフォントサイズは32pxにして行の高さはロゴと同様に64pxに、そしてカーソルを持っていくとポインターになるようにしていきます.
・まずセレクタは.sp-menu #open になります。
・文字の大きさはfont-size: 32px;としてあげて、行の高さはline-height: 64px;として、カーソルはcursor: pointer;としてあげればいいでしょう。
・こんな感じです。
.sp-menu #open {
font-size: 32px;
line-height: 64px;
cursor: pointer;
}
mainのスタイル
・最後にメインの文章ですが左右に余白を入れたいの左右に１６pxの余白を作ってあげましょう。
・セレクタはmainでいいでしょう。
・上下は特にいじりたくないのでpadding: 0 16px;となります。
・こんな感じです。
main {
padding: 0 16px;
}