タグ

2022年1月16日のブックマーク (2件)

  • CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!

    なぜCSSでボタンを作るのか?その前に、なぜCSSでボタンを作るのか?について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い!拡張性がある!解像度の心配がない!簡単!と言った理由ではないでしょうか? 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで

    CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!
  • Flexboxを使って ボタンを下側に揃えて配置する方法 | たねっぱ!

    以前は、高さを揃えるためにjQueryを使ったり、cssで作るにしても少し手間がかかりましたが… Flexboxなら簡単に実装できるので紹介します。 以前は、高さを揃えるためにjQueryを使ったり、cssで作るにしても少し手間がかかりましたが… Flexboxなら簡単に実装できるので紹介します。 今回は、コンテンツ量の異なるボックスを用意して、高さを揃える。 それから、ボックス内の下にボタンを配置するよくあるレイアウトをFlexboxで作ります。 Step1. Flexboxを使って高さを揃える 1)今回は「li」の高さを揃えたいので、その親要素ulに「display: flex;」を追加するだけ! (高さを揃えるプロパティはalign-items: stretch;ですが、flexを使うと初期値で設定されているので省いてます。) liが横並びになり、高さも揃います。 2)さらに、「ju

    Flexboxを使って ボタンを下側に揃えて配置する方法 | たねっぱ!