基本

Foundationとは何か?使用するための準備、基本のグリッドシステムなどの説明。

ブロックグリッド Block Grid

Bootstrap3には用意されていないスタイルで、 グリッドシステムのように.rowにカラムを入れる形ではなく、リストタグに.[大きさ]-block-grid-[数字]を指定するだけでウインドウサイズごとに横幅を均等に分割した配置ができまます。コード的にも簡単に使用できて便利なスタイルです。
ウィンドウ幅が大きい時は横並びに数多く並べ、小さいときは数を減らして縦に並べることが可能なので商品などが増えていくページなどで有効かと思います。
.[大きさ]-block-grid-[数字]で指定した数字で横幅を均等に分割して表示します。最大分割数は12。大きさはsmall、medium、largeの三種類でグリッドシステムのブレイクポイントと一緒になります。

ブロックグリッド

下記は.medium-block-grid-3を指定した例です。タブレットサイズ(641px)以上では、3カラムになります。スマホサイズの指定はないため(640px)以下では1カラムで表示されます。ウインドウサイズを変更して挙動を確認してみてください。

  • 落ち着きのある旅館の和室
  • 大宴会場と座席
  • 広々とした和室
      <ul class="medium-block-grid-3">
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
      
ブレイクポイントごとに指定した例

ブレイクポイントごとにスタイルを指定することでウインドウサイズによりカラムの数を変更でききます。下記は.small-block-grid-2.medium-block-grid-3.large-block-grid-4を指定したデモでスマホサイズでは2カラム、タブレットサイズでは3カラム、PCサイズ以上では4カラムで並びます。一つ一つの縦の幅が違いますが、上辺が揃うように表示されていきます。

  • 落ち着きのある旅館の和室落ち着きのある旅館の和室
  • 大宴会場と座席大宴会場と座席
  • 広々とした和室広々とした和室
  • 旅館の大浴場旅館の大浴場
  • 温泉宿で食べるしゃぶしゃぶ温泉宿で食べるしゃぶしゃぶ
  • 刺し身の盛り合わせ刺し身の盛り合わせ
  • 伊東の海と街並み伊東の海と街並み
  • ホテルのロビーホテルのロビー
      <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
        <li>...</li>
        <li>...</li>
        <li>...</li>
         ...
      </ul>
      
© 2015 foudation5-guide.com