ボタンの作り方が不安定だと心配していたらちょうどProgateさんが教えてくれた

コーディングのお仕事をしていて、なんか毎回ボタン作るのやり方決まってないし不安だなーと思っていて、何の気なしにProgateさんをやっていたところ、ちょうどボタンを作る回があり、説明が分かりやすかったので、忘れないようにアウトプットしておく。


そもそもa要素はインライン要素

a要素はインライン要素なので、display: inline-block; を使って、widthやheight、縦のmargin, padding を指定できるようにしましょう! というお話。

progate02.jpg

progate03.jpg

progate04.jpg


コーディング例

これまでa要素をdivで囲ってdivにwidthとheightを持たせて~~とかやってたので、ボタンのどの部分をマウスオーバーしてもopacityが変わるようにするのがちょっと時間かかっていたり、自信がなかったりした。a要素自体にwidthとheightを持たせることはこれまで何となく邪道な気がしていたが、絶対このほうがいいと思った。背景をbackground-colorで出す場合もbackground-imageで出す場合も大して変わることはないが、後者の場合、background-imageで出す画像のwidth,heightとa要素に指定するwidth,heightが異なるときは、background-size: cover; にするとよいと思われる。また、スマホ版のデザインの際もbackground-size: cover; は必要と思われる。言葉で説明しても微妙なのであとはコードを見てください。

progate05.jpg

progate01.jpg


参考

Progate HTML & CSS 学習コース 中級編トップ部分を作ろう5. ボタンを作ろう