汎用的に使えるボタンのスタイル – OOCSS風 -

ボタンデザインはどんな種類のサイトでも使われると思います。CSSの勉強がてら、使い回しのできる汎用的なボタンのスタイルを作ってみました。

sponsored link

再利用ができる、汎用的なボタンスタイル

今回ボタンを作りにあたり、OOCSS(オブジェクト指向のCSS)というCSSの設計手法を使いました。
OOCSS(オーオーシーエスエス)というのは、部品(コンポーネント)ごとにclassでスタイルを指定して、レゴブロックのようにそれらを組み合わせることでページを構成しようというCSSの設計手法です。詳しいところは以下のslide shareが分かりやすかったです。

今回ボタンを作った手順はこのようになります。

  1. 共通のスタイルをbtnクラスに指定する
  2. フォントや背景のカラーを指定したクラスを用意する
  3. ボタンのサイズを変更するクラスを用意する
  4. レイアウト用のクラスを用意する

※CODEPENによるデモはスクロールができますし、ロゴの部分をクリックすると大きい画面でデモを見ることもできます。

ベースになるbtnクラス

まずはボタンのベースになるスタイルを指定したbtnクラスを作ります。このクラスはa要素とbutton要素のどちらを使う場合も同じように指定しておきます。また、計算をしやすくするためにborder-boxプロパティをページ全体に指定しています。

カラーを指定するクラス

btnクラスには基本的なスタイルしか指定されていないので、カラーはデフォルトスタイルシートが適応されます。カラーを変更する場合は3パターンあるクラスを指定します。btn-defaultクラスは黒系、btn-primaryクラスは青系、btn-alertクラスは赤系になっています。それぞれのクラスに-revと付けるとマウスオーバー時にカラーが反転します。

See the Pen Button-OOCSS by ManabuYasuda (@gaku) on CodePen.

サイズを指定するクラス

サイズに関してはpaddingしか指定していないため、ボタンの文字数によってボタンサイズ(横幅)が変わります。ボタンを小さくする時はbtn-smクラスを、大きくする時はbtn-lgクラス、親要素に対して最大まで広げたい時はbtn-fullクラスを追加で指定します。

See the Pen Button2-OOCSS by ManabuYasuda (@gaku) on CodePen.

基本は可変サイズを使用しますが、固定サイズにする場合は個別にクラスを作成します。

横並びにレイアウトするクラス

2つのボタンを横並びにレイアウトさせたい時はdivにbtn-tac2クラスをつけてボタンを囲みます。btnクラスにはinline-blockが指定されているのでtext-align: center;でセンタリングすることができます。iPhoneなどのスマホではボタンのテキストが2行になってしまうことがあるので、メディアクエリを使ってフォントサイズを小さくするようにしています。

センタリング以外にも、通常はtableプロパティを使っての横並びでタブレット以下になると2カラムになるbtn-group-cal2クラス、もしくは1カラムになるbtn-group-cal1クラスをul要素に指定できます。このクラスを使用する時には、レイアウトのためにbtn-groupクラスを、カラーのためにbtn-group-defaultクラスをul要素に指定します。子要素にはbtnクラスをつけてください。

See the Pen Button3-OOCSS by ManabuYasuda (@gaku) on CodePen.


使用する際の注意点

  • ボタンのサイズにもっと柔軟性をもたせたい場合はbtnクラスにpaddingを指定せず、btn-smなどのサイズを指定するクラスに加えてあげるといいかもしれません。ただし、サイズ用のクラス指定が必須になります
  • ボタンのサイズは基本的にheight: 44px;になるようにしていますが、フォントサイズに依存します。font-sizeとline-heightの値によってpaddingを調整してください
  • btn-froupクラスでCSS3の:nth-childプロパティを使っているのでIE8ではボーダーのスタイルが正しく表示されません

参考にしたエントリー