CSS

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

テーブル

Foundation5では特にテーブル(table)用のスタイルは用意されていません。
また、Bootstarap3にはない値段表などで使えるPricing Tablesというリストのスタイルが用意されています。

通常のテーブル

特にスタイルの指定はなく、標準で行の背景がスプライトのテーブルになります。

見出し ユーザ名
1 佐藤 太郎 satou
2 鈴木 rin_suzu
3 高橋 かおり sakura
      <table>
        <thead>
          <tr>
            <th width="100">見出し</th>
            <th width="200">姓</th>
            <th width="150">名</th>
            <th width="150">ユーザ名</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>...</td>
            ...
          </tr>
        </tbody>
      </table>

Pricing Tables

商品などの値段表に利用できるテーブルです。tableと名前はついていますがtableタグは使わずリストタグを使用します。
ulタグに.pricing-tableと指定します。それぞれのリストにはタイトル用の.title、値段表記用の.price、概要説明用の.description、商品の特徴などを表記する.bullet-item、ボタン設置用の.cta-buttonのスタイルが用意されています。

  • タイトル
  • 100,000円
  • 概要説明
  • 安い
  • 早い
  • 旨い
  • 今すぐ購入
  • タイトル
  • 5,000,000円
  • 概要説明
  • 高い
  • 遅い
  • まずい
  • 今すぐ購入
      <ul class="pricing-table">
        <li class="title">タイトル</li>
        <li class="price">100,000円</li>
        <li class="description">概要説明</li>
        <li class="bullet-item">安い</li>
        <li class="bullet-item">早い</li>
        <li class="bullet-item">旨い</li>
        <li class="cta-button"><a class="button" href="#">今すぐ購入</a></li>
      </ul>
      
© 2015 foudation5-guide.com