ボタンのスタイルを整え、ボタンを動的に生成するための準備をしていきます。
- ボタンのスタイリング
- ボタンのコメント化
CSS
コメント
ボタンのスタイリング
・前回でHTMLを使ってボタンの配置をしてきました。
・今回はCSSでスタイリングをしていきたいと思います。
・スタイリングは大きさの調整と丸い形を作っていきカーソルをホバーした時にクリックできそうな感じにしていきます。
・またボタンの位置も真ん中に持ってきて少し間隔を開けていきます。更に現在地で指定したクラス属性のcurrentはちょっとだけ濃くしていきます。
・大きさの調整と丸くしていき、ボバーでクリックできる感じにしていきます。
ボタンのスタイリング
・まずセレクタはnav buttonとしていけばボタンを指定できますね。
・とりあえず境界線を取っておきます。border: none;としてあげればいいですね
・大きさを調整したいのでwidthとheightをいじっていきましょう。width: 16px; height: 16px;で良いでしょう。
・丸い形と色をスタイリングします。色はbackground: #ddd;としてあげて形はborder-radius: 50%;で丸い形を作ることが出来ます。
・カーソルをホバーした時にクリックできそうな感じにしていきたいのでcursor: pointer;と書いていきます。
・次にボタンの位置も真ん中に持ってきて少し間隔を開けていきます。
ナビタグのスタイリング
・セレクタはnavと指定してあげましょう。
・上の画像との隙間が少ないので間隔を開けて上げましょう。margin-top: 16px;としてあげましょう。
・ボタンは真ん中に持ってきます。text-align: center;としてあげましょう。
・最後に現在地であるcurrentクラスをスタイリングしていきます。
カレントのスタイリング
・セレクタはnav .currentとしてあげて色はちょっと濃い目でbackground: #999;と指定してあげましょう。
全体
・全体でこんな感じですね。
nav {
margin-top: 16px;
text-align: center;
}
nav button {
border: none;
width: 16px;
height: 16px;
background: #ddd;
border-radius: 50%;
cursor: pointer;
}
nav .current {
background: #999;
}
ボタンのコメント化
・ではここまでスタイルが出来たのでこのボタン自体をJavascript生成していきたいと思います。
・なので一旦HTMLのボタンはコメントで消しておきます。
・コメントはVS Codeの場合command + / のショートカットが用意されています。
・JavaScriptでボタンを生成することでで画像が増えた時にや動的な動きができるようになったりします。
・次回Javascriptをいじっていきましょう。