CSSフレームワーク 99Limeの簡単な使い方

このエントリーをはてなブックマークに追加
Pocket

CSSフレームワークを導入することでWeb開発が非常に効率良く行えるようになる。CSSフレームワークには人気の高いTwitterBootstrapの他にもいくつかあるが、ここでは99Limeを紹介しながら実際使ってみる。

99Limeのダウンロードと下準備

99Limeのダウンロード先はこちら→99Limeをダウンロード

99Limeを使用するには以下のタグをHTML内に埋め込めばOK。


<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="js/kickstart.js"></script>

<!-- css -->
<link rel="stylesheet" href="css/kickstart.css" media="all" />

公式サイトにも書かれているが、99LimeはHTML5で使用すること。また、IEには８以上に対応しているとのことなので使用する際は注意。

99Limeで使えるUIKitsをPSDファイルでダウンロードできる。これがあればサクッとプロトタイプを作れるので大変便利。

99LimeのUIKitはこちら
CSSフレームワーク 99Limeの使い方01

99Limeでグリッドを作る

99Limeでグリッドを作るには、

<div class="col_12">col_12</div>

のように単純にclass指定するだけ。Bootstrapの場合はcontainerやrowなどで囲む必要があったが、こちらの方が簡単でわかりやすくなっている。HTMLの構造もシンプルになるのでこっちの方が便利かも。

デフォルトでレスポンシブに対応しているが、フレキシブルにする場合は

<div class="col_12 flex">col_12</div>

のように書く。

また、デフォルトでは全て左寄せとなるため、グリッドレイアウトにしたい部分には

<div class="grid">

<!-- ここにレイアウト -->

</div>

で囲む必要がある。TwitterBootstrapのcontainerやrowみたいなもの。

さらに重要なのが、デスクトップとスマホ画面で表示／非表示を変えたい場合。これも以下のように簡単に設定可能。

<div class="col_12 show-desktop">col_12</div>

show,hideで表示／非表示、desktop,tablet,phoneで各デバイスに対応となる。


<!-- グリッドの例 -->
<div class="grid">
    <div class="col_12">col_12</div>
    <div class="col_1">col_1</div><div class="col_11">col_11</div>
    <div class="col_2">col_2</div><div class="col_10">col_10</div>
    <div class="col_3">col_3</div><div class="col_9">col_9</div>
    <div class="col_4">col_4</div><div class="col_8">col_8</div>
    <div class="col_5">col_5</div><div class="col_7">col_7</div>
    <div class="col_6">col_6</div><div class="col_6">col_6</div>
</div>

<!-- ４列表示 -->
<div class="grid">
    <div class="col_3">１列目</div>
    <div class="col_3">２列目</div>
    <div class="col_3">３列目</div>
    <div class="col_3">４列目</div>
</div>

99Limeのボタンを使う

次はボタン。ボタンを表示するには

<button>

タグを使うか

<a class="button" href="">A.button</a>

のようにクラスで指定する方法がある。classではカラー、サイズ、スタイルの指定が可能。さらにボタンには文字だけでなくアイコンも入れるとユーザビリティーにも貢献するデザインにできる。


<!-- タグを使う -->
<button>ボタン</button>

<!-- classを使う -->
<a class="button" href="">押したらリンク先に飛ぶ</a>

<!-- サイズの指定 -->
<button class="large">他にsmallとmedium</button>

<!-- サイズとカラーの指定 -->
<button class="medium green"><i class="icon-play-circle"></i>.緑とアイコン</button>

<!-- スタイルの指定 -->
<button class="square">スタイルは他にもあるよ</button>

<!-- ボタンバーを作る,最後のはアイコンだけのボタン -->
<ul class="button-bar">
    <li><a href=""><i class="icon-pencil"></i> 編集</a></li>
    <li><a href=""><i class="icon-tag"></i> タグT</a></li>
    <li><a href=""><i class="icon-upload-alt"></i> 更新</a></li>
    <li><a href=""><i class="icon-plus-sign"></i></a></li>
</ul>

CSSフレームワーク 99Limeの使い方02

99Limeでメニューを作る

こちらも非常に良く使うことになるメニュー。フレームワークやプラグインを使わずゼロからコードを書くと・・・頭が痛くなってしまうが、99Limeでは簡単に作成可能。ちょっと長いのでスニペットとして登録しておくと便利。


<!-- 横長メニュー -->
<ul class="menu">
<li class="current"><a href="">メニュー 1</a></li>
<li><a href="">メニュー 2</a></li>
<li><a href=""><i class="icon-inbox"></i> メニュー 3</a>
    <ul>
    <li><a href=""><i class="icon-cog"></i> サブメニュー 1</a></li>
    <li><a href=""><i class="icon-envelope-alt"></i> サブメニュー 2</a>
        <ul>
        <li><a href=""><i class="icon-wrench"></i> Sub Item</a></li>
        <li><a href=""><i class="icon-camera-retro"></i> Sub Item</a></li>
        <li><a href=""><i class="icon-coffee"></i> Sub Item</a></li>
        <li><a href=""><i class="icon-twitter"></i> Sub Item</a></li>
        </ul>
    </li>
    <li class="divider"><a href=""><i class="icon-trash"></i> li.divider</a></li>
    </ul>
</li>
<li><a href="">Item 4</a></li>
</ul>

<!-- 縦長メニュー -->
<ul class="menu vertical">
<li class="current"><a href="">メニュー 1</a></li>
<li><a href="">メニュー 2</a></li>
<li><a href="">メニュー 3</a>
    <ul>
    <li><a href="">長いタイトルも心配無用。見栄え的にはアイコンも一緒にセットしておいた方がよさそうです。</a></li>
    <li><a href="">サブメニュー</a>
        <ul>
        <li><a href="">Sub Item</a></li>
        <li><a href="">Sub Item</a></li>
        <li><a href="">Sub Item</a></li>
        <li><a href="">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="">サブメニュー</a></li>
    </ul>
</li>
<li><a href="">Item 4</a></li>
</ul>

CSSフレームワーク 99Limeの使い方03

99Limeでツールチップを使う

マウスオーバーで詳細説明などを表示してくれるツールチップ。こちらもフォームの入力で?をクリックするとよく出てくる。99Limeでもマウスオーバーとクリック両方対応しているので使う場面があれば使ってみよう。また、ツールチップの出てくる場所も上下左右から選択可能。


<!-- tooltipはtitleに入れた文が表示される -->
<span class="tooltip" title="This is a default (top) tooltip">.tooltip</span>

<!-- 出てくる場所を指定する、ここでは右側 -->
<span class="tooltip-right" title="This is a Right tooltip">.tooltip-right</span>

<!-- クリックしたときにコンテンツを表示 -->
<button class="tooltip medium blue pill" data-content= "#tooltipcontentID"  data-action="click">Click Me</button>

<!-- ツールチップで表示するコンテンツ、IDで指定する -->
<div class="tooltip-content" id="tooltipcontentID"><h5>HTML Content</h5>
<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
<p>This is more HTML content. You can place any HTML in this tooltip.</p></div>

CSSフレームワーク 99Limeの使い方04

99Limeでタブメニューを使う

タブメニューも非常に良く使うコンポーネントの一つ。jQueryを使ったり、CSSで調整したりと結構大変だったがこれも簡単に作ることが出来る。99Limeではタブの位置を左、中央、右に揃えることが出来る。


<!-- こちらは左揃え、classのleftをcenter,rightに変えるだけ -->
<ul class="tabs left">
<li><a href= "#tabr1" >Tab1</a></li>
<li><a href= "#tabr2" >Tab2</a></li>
<li><a href= "#tabr3" >Tab3</a></li>
</ul>

<!-- タブのコンテンツ -->
<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>

CSSフレームワーク 99Limeの使い方05

99Limeでパンくずリストを作る

こちらもなくてはならないもの。ulでリストを作りclassで指定するだけと、非常に簡単に設置できる。


<!-- alt1を外すとデフォルトの表示に -->
<ul class="breadcrumbs alt1">
    <li><a href="">Home</a></li>
    <li><a href="">Category</a></li>
    <li><a href="">Sub Category</a></li>
    <li><a href="">Page Title</a></li>
</ul>

CSSフレームワーク 99Limeの使い方06

99Limeでスライダーを作る

こちらもよく使うコンポーネント。jQueryプラグインでもたくさん出ているが、設定が細かかったりしてややこしいという印象だった。こちらのスライダーはulのリストのなかにimgを入れてclassを指定するだけで簡単に作れてしまう。


<!-- スライドショー -->
<ul class="slideshow">
    <li><img src="img/img.jpg" width="550" height="350" /></li>
    <li><img src="img/img.jpg" width="550" height="350" /></li>
    <li><img src="img/img.jpg" width="550" height="350" /></li>
    <li><h3>Slide Anything</h3><p>画像の他に、videoやiframeなんかもOK</p></li>
</ul>

CSSフレームワーク 99Limeの簡単な使い方08

99Limeでフォームを作る

最後にフォームの作成。こちらも使えるコンポーネントがたくさん用意されている。クリックすると消えるエラー警告文は結構使えそう。


<!-- 普通のテキストフィールド -->
<label for="text1">Text Field</label>
<input id="text1" type="text" />

<!-- プレースホルダーのテキストフィールド -->
<label for="text2">Placeholder</label>
<input id="text2" type="text" placeholder="Placeholder Text" />

<!-- 入力不可のテキストフィールド -->
<label for="text3" class="disabled">Disabled Field</label>
<input id="text3" type="text" disabled="disabled" />

<!-- チェックボックス -->
<input type="checkbox" id="check1" />
<label for="check1" class="inline">Checkbox Field</label>

<!-- ラジオボタン -->
<input type="radio" name="radio" id="radio1" />
<label for="radio1" class="inline">Option1</label>

<!-- セットで表示するとき -->
<fieldset>
<legend>Checkboxes</legend>
    <!-- フォームをここに記述 -->
</fieldset>

<!-- クリックで消えるエラー警告 -->
<div class="notice error"><i class="icon-remove-sign icon-large"></i> This is an Error Notice 
<a href= "#close"  class="icon-remove"></a></div>



以上で99Limeの使い方終了。印象としてはBootstrapより簡単な感じ。Bootstrapはコンポーネントを使うときにjQueryを弄ったりする必要があるのに対して、こちらはclassを設定するだけで使える。より簡単にサクッとプロトタイプを作るなら99Limeは結構使いやすそう。