CSSフレームワーク・Kubeを使ってみました

投稿者: ねこやま猫道Web関連

CSSフレームワークをとにかく使ってみたかったので、Kubeを自分のサイトリニューアルの際に使ってみました。
注）使用したKubeのバージョンは4.0.2です（上記リンクはバージョン5）。
以降に出てくるKubeのリンクはバージョン4のリンクです。

リニューアルしたウェブサイト
http://nekoyamanekomichi.com/

image

Kubeはそれ以前にサイト制作のお手伝いをした際に試そうと思いましたが、KubeサイトのGet Startedに掲載されているテンプレート例がHello , world!でして、その当時は見た瞬間挫折してました。

今回のサイトリニューアルでは当初Foundationを使うつもりで、サイトのドキュメントの豊富さに勉強する気になって色々見ていたせいか、その後にKubeサイトを見た際にはFoundation同様にドキュメントもそれなりに揃っていることに気づき、なんとか実装までに至りました。

やったこと

  1. ウェブページの構成を決める
  2. Kubeの基本のマークアップを決める
  3. Kube以外のツールを当てはめる

1. ウェブページの構成を決める

コミケなどのZINE販売イベントや展示の告知はしたいので、インフォメーションは最初にあった方がよく、またこんな写真撮ってます的にスライドショーを設置したいと思いました。また、ZINEを作っているのでその情報も載せたく、作者プロフィールも多少あった方が良心的かなと思いました。それを１ページレイアウトにしたかったため、ページの内容は以下のように決めました。

  1. ナビゲーション（ウィンドウ上部に固定）
  2. トップ画像（スライドショー表示）
  3. 本文
    INFO（新着と過去分をタブで切り替える｜1カラム）
    ABOUT（プロフィールを簡単に書く）
    PC：2カラム、モバイル：1カラム
    ZINE（作成した本を紹介）
    PC：3カラム、モバイル：２カラム
    CONTACT（メールアドレスとFacebookページ｜1カラム）
  4. フッター（1カラム）

2. Kubeの基本のマークアップを決める

Kubeのドキュメントでほぼわかると思います。割と親切です。

ページで使用した基本のマークアップは以下のようにしました（2カラムの例）。
http://k1.imperavi.com/index.php?m=blocks

<div class=“units-row”>
<div class=“unit100″>     <!– 幅100%の1カラム –>
<!– その中に2つのブロック、ただしモバイルの場合は幅100%にする –>
<ul class=“blocks-2 blocks-mobile-100″>
<li>
<!– 1つめのブロック –>
</li>
<li>
<!– 2つめのブロック –>
</li>
</div>
</div>
</div>

 

結局、スライドショーにするトップ画像以外はKubeで用意されている、クラスやjavascriptで対応しました。

Kubeのjavascriptで使用したものは、以下です。

例えば、tabsの場合は、マークアップ時にdata-tools=“tabs”と指定するとスクリプトにひも付けられます。

3. Kube以外のツール

以下は別途探しました（リンクはツールに対する覚書です）。
スライドショー
トップに戻るボタン
ページのローディング表示

 

Kubeで困ったこと

メディアクエリが、PCか？モバイルか？という切り分けなので（ざっくりですが）、上記２に書いたPCで2カラム、モバイルで1カラムの場合だと、タブレットもスマホも1カラム表示になってしまい、タブレットは2カラムでいいのに、とか思いました（確かFoundationだと、PC、タブレット、スマホの三種類の切り分けができたような）。が、割り切ってそのまま使い、収まりがよいようにコンテンツの方で工夫した方がよいのかと思いました。