CSS

Foundationで用意されているCSSの説明。

ボタン

用意されたクラスを指定することでボタンの見た目を変更できます。
通常のボタンの他にグループ化したボタンなどもあります。
こちらでは紹介してないですがドロップダウンメニューを表示するボタンも用意されています。

基本のボタン

.buttonを指定すると角が直角の四角い青ベースのボタンになります。

Default Button
      <a href="#" class="button">Default Button</a>
ボタンのサイズ

ボタンのサイズは指定の無い標準サイズの他に最小の.tiny、小さめの.small、大きめの.large、横幅一杯になるブロックレベルの.expandクラスが用意されています。

Tiny Button Small Button Default Button Large Button Expanded Button
      <a href="#" class="button tiny">Tiny Button</a>
      <a href="#" class="button small">Small Button</a>
      <a href="#" class="button">Default Button</a>
      <a href="#" class="button large">Large Button</a>
      <a href="#" class="button expand">Expanded Button</a>
      
ボタンの形

ボタンの形は指定無しの角が直角の四角い標準のボタンの他に角が少し丸くなる.radius横が半円状態になる.roundのスタイルが用意されています。

標準ボタン 角丸ボタン 半円ボタン
      <a href="#" class="button">標準ボタン</a>
      <a href="#" class="button radius">角丸ボタン</a>
      <a href="#" class="button round">半円ボタン</a>
      
ボタンの色

Bootstrapと同様に決められたクラスを指定することでボタンの色を変更できます。
標準の色を含めて5種類と表示上リンク無効の.disabledがあります。(リンク機能は実際には無効にはなりません。)

指定なし .success指定 .secondary指定 .alert指定 .info指定 .disabled指定
      <a href="#" class="button">指定なし</a>
      <a href="#" class="button success">.success指定</a>
      <a href="#" class="button secondary">.secondary指定</a>
      <a href="#" class="button alert">.alert指定</a>
      <a href="#" class="button info">.info指定</a>
      <a href="#" class="button disabled">.disabled指定</a>
      

ボタングループ Button Groups

リストタグに.button-groupを指定し、ボタンをリスト内に入れることでグループ化したボタンを作成できます。
画面サイズを小さくした時に内容が横幅が足りなくなるとカラム落ちのような表示になります。画面を小さくして確認してみてください。
こちらはBootstrap3にはないスタイルです。

      <ul class="button-group">
        <li><a href="#" class="button">Button 1</a></li>
        <li><a href="#" class="button">Button 2</a></li>
        <li><a href="#" class="button">Button 3</a></li>
      </ul>

単独のボタンと同様に両端の形を.radius.roundを指定することで変更可能です。

均等分割ボタン

.even-数字を指定することで横幅一杯を均等分割した形にもできます。最大分割数は8までになっています。

      <ul class="button-group even-3">
      ...
      </ul>

      <ul class="button-group even-4 round">
      ...
      </ul>
      

縦並びボタン Stacking

.button-group指定と併記して.stackを指定することで縦に積み重なるボタンを作成できます。
また、.stack-for-smallを指定することでスマホサイズ(640px以下)は縦並び、それ以上では、横並びのボタンを設置することも可能です。
画面サイズを変更して確認してみてください。


      <ul class="stack button-group">
      ...
      </ul>

      <ul class="stack-for-small button-group">
      ...
      </ul>
      

複数ボタンを横並びに Button Bars

複数の.button-groupを横並びにする.button-barというスタイルがあります。単純に.button-barを指定したdivで複数のボタングループを囲むだけです。
小さな画面ではこちらもカラム落ちする形になるので注意が必要かもしれません。

      <div class="button-bar">
        <ul class="button-group">
         ...
        </ul>
        <ul class="button-group">
         ...
        </ul>
      </div>
      

ボタングループの形や色が違っても大丈夫です。

© 2015 foudation5-guide.com