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

Pocket

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

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

この記事では便利なCSSフレームワークの1つである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が使えるようです。
uikitのグリッドレイアウト

<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と同様ネストして使うことが可能です。ネストをうまく使うことでより柔軟なレイアウトを作ることができるようになります。
uikit-gridのネスト

<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を入れるだけで横だけでなく、縦の罫線も簡単に作ることができます。
uikit-grid罫線

<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-*と組み合わせなければいけないので注意。
uikit-grid順序

<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

非レスポンシブ化

グリッドの機能は使いたいけどレスポンシブにしたくない、というときは以下のようにCSSに1行加えるだけでレスポンシブを解除することが可能です。

.uk-container{width: 960px;}

このあとは・・・?

今回はグリッドとレスポンシブの基本的な使い方を紹介しましたが、まだまだ使える機能がたくさんあります。

このあとはUIkitのナビゲーションやパネル、フォームなどのコンポーネントについて紹介していきます。