ばつ印アイコンとメニューをスタイリングしていきます。
- ばつ印のアイコンのスタイル
- メニューのスタイル
- 全体のスタイリング
ばつ印のアイコンのスタイル
・では、前回の続きをしていきたいと思います。前回まででマテリアルアイコンのメニューをクリックしたら出てくる画面を作っていたのでそのスタイリングをしていきたいと思います。
・ばつ印は位置や大きさ、あとカーソルを持っていったらクリックできることがわかるようにポインターになるようにしていきます。
・まず位置ですが上から16px右から16pxの絶対配置にしていきます。positionをabsoluteにしてtopとrightにそれぞれ16pxと指定してあげます。
・次に大きさですがマテリアルアイコンはfont-sizeで大きさを変えることができるのでfont-sizeを32pxにしておきましょう。
・最後にカーソルをばつ印のところに持っていったらクリックできることがわかるようにポインターにしておきたいのでcursorをpointerとしておきます。
・こんな感じです。
.overlay #close {
position: absolute;
top: 16px;
right: 16px;
font-size: 32px;
cursor: pointer;
}
メニューのスタイル
・次にメニューの方もスタイリングをしていきます。
・メニューは先頭の丸を取りたいのと余白を0にしたいのとメニューとメニューの間隔を少し開けていきたいのでそのようにスタイリングをしていきます。
・まずセレクタはulの方に先頭の丸を取り除くのと余白を0にするスタイリングを、liの方にメニューとメニューの間隔を開けるスタイリングをしていきます。
・ulの方ですが先頭の丸はlist-style-typeをnoneに指定します。そして余白をなくすためにmarginとpaddingを0にしましょう。
・liの方は間隔を開けたいのでmargin-topを24pxにしましょう。
・こんな感じですね。
.overlay ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.overlay li {
margin-top: 24px;
}
全体のスタイリング
・あとは全体的に真ん中にしておきたいのと余白を少し調節しておきます。
・またメニューをクリックしたらこの画面が出るようにしていきたいので最初は非表示になるように指定しておきましょう。
・全体のスタイリングは.overlayで指定できますね。
・真ん中にするにはtext-alignをcenterにしておきます。そしてpaddingを64px指定します。
・次に非表示ですが今回は透明にするというやり方で非表示にしておきましょう。後でアニメーションを付けるためにこのようにしておきます。
・透明はopacityで指定できます。0でいいでしょう。
・ただこのままでは透明にしただけで本文の上に固定配置されている状態になってしまうので本文をクリックできなくなってしまいます。その場合はpointer-events: none; としてしてあげましょう。
・こんな感じですね。
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255, 255, 255, 0.95);
text-align: center;
padding: 64px;
opacity: 0;
pointer-events: none;
}
