2015/06/15

カラム数の変更 - Foundationを使ったレスポンシブUI

 Foundation, CSS

 動作環境: Foundation5

ホームページやブログのレイアウトを途中で変更するのは、なかなか大変な作業です。
特に、自前でサイト構築している場合は、スタイルシートやHTMLの修正、動作確認など数日～数週間かかる場合もあります。

今回は、レスポンシブUIのフレームワークを使用しているケースを例に、カラムの変更手順をまとめてみました。



下のスクリーンショットは、1カラムのブログの例です。
UI FrameworkにはFoundationを使用しています。

修正前（1カラム）



以下は修正前のHTMLの内容です。

修正前（1カラム）

<section class="main-section">
  <div class="row">
    <div class="small-12 large-12 columns">
      <!-- ここに日付・タイトル -->
      <hr>
      <!-- ここに記事の内容 -->
    </div>
  </div>
</section>


（※レイアウトの「カラム」と、HTML内の"columns"は別物ですのでご注意ください）




これを2カラムのレイアウトに修正します。
具体的には、記事のエリアを2カラムに変更して、右側のカラムはサイドバーとします。

修正後（2カラム）

<section class="main-section">
  <div class="row">
    <div class="small-12 large-12 columns">
      <!-- ここに日付・タイトル -->
      <hr>
    </div>
  </div>
  <div class="row"> -> ①
    <div class="small-12 large-8 columns"> -> ②
      <!-- ここに記事の内容 -->
    </div>
    <div class="small-12 large-4 columns"> -> ③
      <!-- 追加されたカラム(サイドバー) -->
    </div>
  </div>
</section>


おおまかな修正手順は以下になります。

  • class=rowのDIVタグを分割して、記事の部分を別にする。（サンプルコード①）
  • 記事用のDIVタグを作成する。columns幅指定は small-12 large-8 とする。（サンプルコード②）
  • 追加するカラム(サイドバー)用のDIVタグを作成する。columns幅指定は small-12 large-4 とする。（サンプルコード③）

タイトル部分は１カラムのままとして、記事とサイドバーを8:4の割合(largeの場合)でレイアウトします。
また、レスポンシブの指定として、large（PCや大きめのタブレット）の場合は2カラム表示、small（スマホ等）の場合は1カラム表示（サイドバーは下に回り込む）とします。

修正の結果、以下のようになりました。

修正後（２カラム）



修正後 small（スマホ等）表示の場合



比較的簡単な修正でレイアウト変更できました。

多くの場合、Webサイトのレイアウトは設計段階で決定することを求められますが、Foundationのようなフレームワークを使用することにより、柔軟な対応ができるのではないかと思います。