ボタンのスタイリング

ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。

• ボタンのスタイリング
• ボタン位置の修正

ボタンのスタイリング

・前回はボタンの配置をやってきました。

・今回はそのボタンの配置を調節したりスタイリングをしていきます。

・まず完成図としては黒い背景に白い文字色で左右の矢印が自然な感じになるようなスタイリングをしていきます。

・セレクタは前回使った#prev,#nextに書いていきましょう。

・まず初期設定のままだと境界線であるborderがあるのでけしておきましょう。 border: none;としてあげると消せます。

・次に背景は黒にしていきたいのでrgbaで黒にしていきます。今回は少し半透明にしておきたいので4つ目の数字だけ.7にしておきます。 background: rgba(0, 0, 0, .7);と書いていけばおkですね。

・次に文字色は白でいいのでcolor: #fff;としていきましょう。また、文字サイズも24pxくらいにしていきたいのでfont-size: 24px;としておきましょう。

・後は矢印の位置を少し調整したくて左右と下に余白を作りたいのでpaddingを指定していきましょう。padding: 0 8px 4px;と書いていけばちょうどいい感じになりそうですね。

ボタン位置の修正

・次にボタンの位置ですが前回は適当に上から100pxに指定しましたがやはり中央揃えにしたいので位置の調整をしていきます。

・まずtopから50%に指定してあげれば上から50%の位置に持ってこれると思うかもしれませんがそれだけだと少し下に配置されてしまいます。

・これはトップから50%の位置に矢印の上端がきてしまうため少し下目に配置されます。

・これでもいいのですが真ん中にしたいのであればtop: 50%と一緒にtransform: translateY(-50%);と指定しましょう。

・これでbuttanの高さの半分だけ上方向に戻してくれます。

・つまり真ん中に矢印が来るのです。

・こんな感じですね

#prev,

#next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  border: none;

  background: rgba(0, 0, 0, .7);

  color: #fff;

  font-size: 24px;

  padding: 0 8px 4px;

}