CSSフレームワークUIkitの使い方、レイアウト編

2014-03-05

現在様々なCSSフレームワークが公開され、web制作やコーディングが非常に楽になってきています。代表的なCSSフレームワークにはTwitterBootstrapがありますが、今回紹介するUIkitもそれらの内の１つ。

UIkitはBootstrapにはない便利な機能がたくさん内蔵されており、ぶっちゃけ乗り換えてもいいくらい。基本的な使い方もBootstrapを使ったことがある人なら、すぐに使いこなせるくらい簡単です。

この記事では便利なCSSフレームワークの１つであるUIkitの使い方を紹介します。まずはレイアウトから。

UIkitのはじめ方

まずはこちらの公式サイトからファイルをダウンロード。zipファイルを展開してフォルダ内にindex.htmlを作成します。

とりあえず動作確認ということで以下のように簡単なテンプレートを作成しておきます。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/uikit.min.css" />
</head>
<body>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/uikit.min.js"></script>
</body>
</html>

UIkitの基本的なグリッドレイアウト

UIkitのブレークポイント

UIkitのデフォルトでは以下のようなブレークポイントが設定されています。

Size	Breakpoints	Device
Mini	up to 479px	Phones portrait
Small	480px to 767px	Phones landscape
Medium	768px to 959px	Tablets portrait
Large	960px to 1199px	Desktops & tablets landscape
Xlarge	1200px and larger	Large Desktops

設定は変更可能なので必要に応じてカスタマイズしておきましょう。

グリッドの使い方、作り方

個別のカラムの前に全体を囲む.containerを作ります。センタリングする場合は.uk-container-centerも入れておきます。

<div class="uk-container uk-container-center">

</div>

また、カラムを作る場合は.uk-gridで囲むようにします。Bootstrapでは.rowでしたね。

<div class="uk-grid">
    
</div>

Bootstrapの場合は.col-md-4のように書きましたがUIkitでは以下のようになります。各カラムをuk-gridクラスを付けたdivで囲み、カラムにはグリッドの分子と分母を指定すればOK。分母は1,2,3,4,5,6,10が使えるようです。

<div class="uk-grid">
    <div class="uk-width-1-3">.uk-width-1-3</div>
    <div class="uk-width-1-3">.uk-width-1-3</div>
    <div class="uk-width-1-3">.uk-width-1-3</div>
</div>

<div class="uk-grid">
    <div class="uk-width-1-2">.uk-width-1-2</div>
    <div class="uk-width-1-2">.uk-width-1-2</div>
</div>

<div class="uk-grid">
    <div class="uk-width-3-10">.uk-width-3-10</div>
    <div class="uk-width-3-10">.uk-width-3-10</div>
</div>

グリッドのネスト

グリッドはBootstrapと同様ネストして使うことが可能です。ネストをうまく使うことでより柔軟なレイアウトを作ることができるようになります。

<div class="uk-grid">
        
        <div class="uk-width-1-2">.uk-width-1-2</div>
        
        <div class="uk-width-1-2">
            <div class="uk-grid">
                <div class="uk-width-1-2">.uk-width-1-2</div>
                <div class="uk-width-1-2">.uk-width-1-2</div>
            </div>
        </div>
        
    </div>

グリッド間の罫線

UIkitでは.uk-grid-dividerを入れるだけで横だけでなく、縦の罫線も簡単に作ることができます。

<div class="uk-grid uk-grid-divider">
    <div class="uk-width-medium-1-3">.uk-width-medium-1-3</div>
    <div class="uk-width-medium-1-3">.uk-width-medium-1-3</div>
    <div class="uk-width-medium-1-3">.uk-width-medium-1-3</div>
</div>

<hr class="uk-grid-divider" />

<div class="uk-grid uk-grid-divider">
    <div class="uk-width-medium-1-3">.uk-width-medium-1-3</div>
    <div class="uk-width-medium-1-3">.uk-width-medium-1-3</div>
    <div class="uk-width-medium-1-3">.uk-width-medium-1-3</div>
</div>

グリッドの順序の入れ替え

HTMLの構造上は先に読み込まれていても、前にもってきたいという場合に使えるのがSource ordering機能。.uk-width-middle-*と組み合わせなければいけないので注意。

<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">.uk-width-medium-1-2 .uk-push-1-2</div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">.uk-width-medium-1-2 .uk-pull-1-2</div>
</div>

UIkitのレスポンシブレイアウト

レスポンシブのクラス

画面サイズごとにカラム幅を変えたい場合などに使う機能。変更したいカラムに各クラスを追加すればOK。

<div class="uk-width-large-1-3 uk-width-medium-1-2">
    .uk-width-medium-1-2 / .uk-width-large-1-3
</div>

Class	Description
`.uk-width-*`	全てのデバイスで適用
`.uk-width-medium-*`	768px 以上の画面サイズで適用
`.uk-width-large-*`	960px 以上の画面サイズで適用

画面サイズごとの表示非表示

レスポンシブレイアウトを使用する場合によく使うのが、画面サイズごとの表示非表示機能。例えばPCサイズとタブレットサイズでは表示するが、スマホサイズでは非表示にしたい場合などに使う。

使い方はこんな感じで、表示を変えたいところにクラス名を入れるだけ。

<div class="uk-grid uk-visible-medium">
    <div class="uk-width-1-2">.uk-width-1-2</div>
    <div class="uk-width-1-2">.uk-width-1-2</div>
</div>

Class	Small (Phones) up to 767	Medium (Tablets) 768 to 959	Large (Desktops) 960 and larger
`.uk-visible-small`	Visible	Hidden	Hidden
`.uk-visible-medium`	Hidden	Visible	Hidden
`.uk-visible-large`	Hidden	Hidden	Visible
`.uk-hidden-small`	Hidden	Visible	Visible
`.uk-hidden-medium`	Visible	Hidden	Visible
`.uk-hidden-large`	Visible	Visible	Hidden