UIkit3の使い方 – インストールからレイアウトまで

はじめに

軽量のCSSフレームワークとして有名なUIkitですが、その新バージョンであるUIkit3(2017-06-19時点でbeta25)も比較的安定していると感じましたので、別案件で使ってみました。
今回の「つくってみた」では、そのインストール方法からレイアウトの方法を中心に、UIkit3の使い方をご紹介いたします。
また、ReactやVueといったリアクティブなjsフレームワークとの親和性が高く、UIkit3のサイト自体がVueで作られていています。
ただ、jQueryが必須となっていますので、そこは妥協が必要かもしれません。

※レイアウト以外のコンポーネントについて

UIkit3のいろんなコンポーネントをつかってみた記事をアップしました(2017/09/20)。レイアウト以外のコンポーネントの簡単な解説をしています。

インストール

いずれかの方法で、既存プロジェクトにUIkitをインストールしてください。新規プロジェクトの場合はUIkitのGithubリポジトリからソースをビルドすると色々と楽です。

CDNで

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/css/uikit.min.css" />

<!-- jQuery is required -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit-icons.min.js"></script>

ダウンロードで

UIkit3 Downloadから最新版のUIkitをダウンロードします。
.zipファイルを解凍すると、css,jsフォルダが入っていますので中身を確認します。
必要なのはuikit.min.css、uikit.min.jsの2ファイルで、アイコンを使うときはuikit-icon.min.jsもコピーします。各ファイルをご自分のプロジェクト内に適宜配置し、CDNでのインストールを参考に適宜パスを書き換えてください。
※ダウンロードの場合jQueryファイルが含まれていません。UIkitはjQueryが必須ですのでGoogle Hosted Libraries等でjQueryのインストールをしておきます。

npmで

npm i -D uikit

Yarnで

yarn add uikit

基本

UIkitのクラス名は必ず’uk-‘のプレフィックスがつきます。

レイアウト

まずはUIkitのドキュメントをご確認ください。
左カラムにCOMPONENTSという項目があり、レイアウトで主に使うのは以下のコンポーネントです。

Section ・・・ コンポーネントの上下マージン
Container ・・・ コンポーネントの横幅
Grid ・・・ グリッド
Width ・・・ グリッドの分割
Visibility ・・・ 表示・非表示
Flex ・・・ flexboxでグリッドを生成する時

Section コンポーネント

基本

UIkitのSectionコンポーネントは、水平方向にコンテンツを区切るために使用します。Sectionコンポーネントをこまめに挟むことで、コンテンツ間にメリハリがついて、見やすいレイアウトに仕上がると思います。個人的に一番つかっているコンポーネントです。

<div class="uk-section">
    コンテンツ
</div>

スタイルの定義

Sectionコンポーネントには以下の背景色が用意されています。いずれも基本となる.uk-sectionクラスとマルチクラスとして使用します。

.uk-section-default
デフォルト(#ffffff)が敷かれます
Default
.uk-section-muted
グレー(#f8f8f8)が敷かれます
Muted
.uk-section-primary
プライマリーカラーに指定されているブルー(#1e87f0)が敷かれます
Primary
.uk-section-secondary
セカンダリーカラーに指定されているブラック(#222222)が敷かれます
Secondary
.uk-section-media
画像が敷かれます
Media

サンプルコード

<!-- 背景を青に -->
<div class="uk-section uk-section-primary">
    プライマリー(青色)になります。
</div>

<!-- 背景を画像に -->
<div class="uk-section uk-section-media uk-background-cover" style="background-image: url('PATH/TO/IMAGE.jpg')">
    .uk-background-coverクラスをつけると、画像がコンテンツを埋めるように中央配置されます。
</div>

サイズの定義

Sectionコンポーネントには以下5つの上下paddingが用意されています。上下にpaddingが入るため、使ってみると予想より余白が大きいと感じるかもしれません。が、個人的には結構しっくりきています

.uk-section-xsmall
上下に20pxのpadding
xsmall
.uk-section-small
上下に40pxのpadding
xsmall
.uk-section-large
上下に70pxのpadding
xsmall
.uk-section-xlarge
上下に140pxのpadding
xsmall
.uk-padding-remove-vertical
上下のpaddigを削除
xsmall

サンプルコード

<!-- しっかりコンテツを分けたい!1画面1コンテンツ型を目指すなら -->
<div class="uk-section uk-section-large">
    コンテンツ1
</div>

<div class="uk-section uk-section-large">
    コンテンツ2
</div>


<!-- 比較的ゆっくりした間隔で好印象 -->
<div class="uk-section uk-section-small">
    コンテンツ1
</div>

<div class="uk-section uk-section-small">
    コンテンツ2
</div>

<!-- タイトルやテキストとの間隔にちょうどいい -->
<section class="uk-section uk-section-large">
    <div class="uk-section uk-section-xsmall">
        <h1>タイトル</h1>
    </div>
    <div class="uk-section uk-section-xsmall">
        <p>テキストなど。</p>
    </div>
</section>

Container コンポーネント

基本

UIkitのContainerコンポーネントでは、最大の横幅が定義され、ディスプレイサイズに合わせて横幅が可変します。同時にページの中央に整列されるようになります。
基本的に、上下の間隔を定義するSectionコンポーネントでラップして使うことが多いです。

サンプルコード

<!-- .uk-container -->
<div class="uk-container">
    コンテンツ
</div>

<!-- Sectionでラップ -->
<div class="uk-section">
    <div clss="uk-container">
        コンテンツ
    </div>
</div>

サイズの定義

UIkitでは以下の3つの横幅サイズが用意されています。いずれも、基本となる.uk-containerクラスと合わせてマルチクラスとして使います。

.uk-container-small
最大幅900px
small
.uk-container-large
最大幅1200px
large
.uk-container-expand
最大幅無制限
expand

サンプルコード

<!-- スモールサイズ -->
<div class="uk-container uk-container-small">
    900pxまで広がるコンテナ
</div>

<!-- ラージサイズ -->
<div class="uk-container uk-container-larege">
    1200pxまで広がるコンテナ
</div>

Grid コンポーネント

基本

一般的なグリッドシステムです。グリッド間(ガーター)を調整したり、高さを統一させることも簡単にできます。
基本的には、FlexコンポーネントやWidthコンポーネントと併用して使用することが多くなると思います。
Gridコンポーネントはクラスを付与するのではなく、基本的に全てuk-grid属性を付け加えることに注意してください。

サンプルコード

<!-- 基本的な使い方 uk-gird属性をつける-->
<div uk-grid>
    <div></div>
    <div></div>
</div>

<!-- モバイルは1カラム、タブレット以上は3カラムにしたい場合 -->
<div class="uk-child-width-1-1@m" uk-gird>
    <div>カラム1</div>
    <div>カラム2</div>
    <div>カラム3</div>
</div>

ガーター(グリッド間)の定義

UIKitのGridコンポーネントでは、以下の4つのガーターサイズが用意されています。

.uk-grid-small
15px間隔
item

item

item

.uk-grid-medium
30px間隔
item

item

item

.uk-grid-large
70px間隔
item

item

item

.uk-grid-collapse
0xp間隔。ピッタリくっついて配置
item

item

item

ネスト(入れ子構造)の定義

ネストは次のように行います。

item

item

item

サンプルコード

<!-- ネストによる2:1:1のサイズの実装 -->
<div class="uk-child-width-1-2" uk-grid>
    <!-- 子要素1 -->
    <div>
        <div>子要素1のコンテンツ</div>
    </div>
    <!-- 子要素2 -->
    <div>
        <!-- 子要素2を更に等分 -->
        <div class="uk-child-width-1-2" uk-grid>
            <div>
                子要素2のコンテンツ1
            </div>
            <div>
                子要素2のコンテンツ2
            </div>
        </div>
    </div>
</div>

dividerによる分割線

.uk-grid-dividerクラスを付与することで、グリッド間に分割線を入れることも可能です。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

サンプルコード

<div class="uk-grid-divider uk-child-width-1-3" uk-grid>
    <div>コンテンツ1</div>
    <div>コンテンツ2</div>
    <div>コンテンツ3</div>
</div>

グリッド内コンテンツの高さの統一

.uk-grid-matchクラスを付与することで、グリッド内のコンテンツの高さを揃える事が可能です。

item

item

item

※本サイトのスタイルが優先され、本記事だと正常に反映されないかもしれません。

サンプルコード

<div class="uk-grid-match uk-child-width-1-3" uk-grid>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        </p>
    </div>
    <div>
        <p>
            Sed ullam eum minus non saepe rerum nesciunt quas perspiciatis eius maxime magni similique culpa eaque voluptatibus corrupti architecto
        </p>
    </div>
    <div>
        <p>
            voluptatum!
        </p>
    </div>
</div>

子要素でグリッドサイズを調整したいとき

今までは親要素でグリッドサイズを指定していましたが、以下のように子要素による指定も可能です。

1:3のグリッド例

サイドバー

コンテンツ

フレキシブルなグリッド例 ※子要素の幅に合わせて変化

サイドバー

コンテンツ

サンプルコード

<!-- 1:3の比率のグリッド -->
<div uk-grid>
    <div class="uk-width-1-1">サイドバー</div>
    <div class="uk-width-1-3">コンテンツ</div>
</div>

<!-- 他コンテンツに合わせたフレキシブルなグリッド -->
<div uk-grid>
    <div class="uk-width-auto">
    サイドバー</div>
    <div class="uk-width-expand">コンテンツ</div>
</div>

Flexコンポーネントの利用

Flexコンポーネントを利用することで、並びを調整する事が可能です。

item

item

item

item

サンプルコード

<!-- グリッドの中央揃え -->
<div class="uk-flex uk-flex-center" uk-grid>
    <div>コンテンツ1</div>
    <div>コンテンツ2</div>
    <div>コンテンツ3</div>
    <div>コンテンツ4</div>
</div>

Flex コンポーネント

基本

Flexコンポーネントを利用することで、flexboxを利用したレイアウトが可能です。IE11だと注意が必要ですが、postCSSやautoprefixerをかませて、実践に投入している方も多いのではないでしょうか。
一通りのプロパティも揃っていますので、こちらはUIkitのドキュメント(Flexコンポーネント)をご確認ください。

サンプルコード

<div class="uk-flex">
    <div>コンテンツ1</div>
    <div>コンテンツ2</div>
    <div>コンテンツ3</div>
</div>

Visibility コンポーネント

基本

レスポンシブで設計する際に、ナビゲーションは初期で非表示にして、トグルボタンで開閉させたくなります。UIkitではそのコンポーネントが用意されておらず、自分で調整実装する必要があります。
そこでこのVisibility コンポーネントを利用して、表示・非表示を制御する必要が出てきます。

サンプルコード

<!-- 640px以上で非表示 -->
<nav class="uk-hidden@s">
    ナビゲーション
</nav>

<!-- 960px以上で表示 -->
<nav class="uk-visible@m">
    ナビゲーション
</nav>

非表示の制御

以下の4つのブレイクポイントが用意されています。

.uk-hidden@s
640px以上で非表示
.uk-hidden@m
960px以上で非表示
.uk-hidden@l
1200px以上で非表示
.uk-hidden@xl
1600px以上で非表示

表示の制御

以下の4つのブレイクポイントが用意されています。

.uk-visible@s
640px以上で表示
.uk-visible@m
960px以上で表示
.uk-visible@l
1200px以上で表示
.uk-visible@xl
1600px以上で表示

マウスホバーでの表示状態の制御

.uk-visible-toggleでラップさせ、トグルさせたい要素を.uk-hidden-hover,.uk-invisible-hoverでラップすることで、非表示でもサイズを維持する(invisible)かしない(hidden)かを決定できます。

サンプルコード

<!-- ホバーしたときだけサイズを有効 -->
<div class="uk-visible-toggle">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <!-- ここが表示される -->
    <div class="uk-invisible-hover">
        <ul class="uk-iconnav">
            <li><a href="#" uk-icon="icon: pencil"></a></li>
            <li><a href="#" uk-icon="icon: copy"></a></li>
            <li><a href="#" uk-icon="icon: trash"></a></li>
        </ul>
    </div>
</div>

<!-- 見えないが、サイズは維持 -->
<div class="uk-visible-toggle">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <!-- ここが非表示 -->
    <div class="uk-hidden-hover">
        <p>ここをホバー</p>
    </div>
</div>

タッチデバイスの判定

.uk-hidden-touch,.uk-hidden-notouchクラスで、タッチ可能なデバイスかそうで無いかによる制御も可能です。スマートフォンやタブレットと、PCやテレビなどの区別はディスプレイサイズによる制御ではなく、こちらが便利です。

サンプルコード

<!-- タッチデバイスの場合 非表示 -->
<div class="uk-hidden-touch">
    スマホやタブレットだと非表示になる
</div>

<!-- タッチデバイス以外の場合 非表示 -->
<div class="uk-hidden-notouch">
    PCなどワイドディスプレイだと非表示になる
</div>

Width コンポーネント

基本

UIkitのWidthコンポーネントは、基本的にGridコンポーネントと併用します。親要素に一括して指定することも可能です。

基本的な使い方

以下のパターンが用意されています。

.uk-width-1-1
親コンテナの100%の横幅になります。
1-1

.uk-width-1-2
親コンテナの半分の横幅になります。
1-2

1-2

.uk-width-1-3 と .uk-width-2-3
親コンテナを三等分したグリッドになります。
1-3

2-3

.uk-width-1-4 と .uk-width-3-4
親コンテナを四等分したグリッドになります。
1-4

3-4

.uk-width-1-5 〜 .uk-width-4-5
親コンテナを五等分したグリッドになります。
1-5

4-5

.uk-width-1-6 〜 .uk-width-5-6
親コンテナを六等分したグリッドになります。
1-6

5-6

サンプルコード

<!-- 三等分 -->
<div uk-grid>
    <div class="uk-width-1-3">コンテンツ1</div>
    <div class="uk-width-1-3">コンテンツ2</div>
    <div class="uk-width-1-3">コンテンツ3</div>
</div>

<!-- 1/4と3/4 -->
<div uk-grid>
    <main class="uk-width-3-4">コンテンツ</main>
    <aside class="uk-width-1-4">サイドナビゲーション</aside>
</div>

横幅の自動調整

グリッドに内包する子要素の横幅が決まっていない時は、その子要素の幅に合わせてグリッドを製作することが可能です。一般的にautoとexpandは組み合わせて使うことが多いです。

.uk-width-auto
自身の横幅に合わせる
.uk-width-expand
他グリッドで埋められてない分だけ自身を拡張し、スペースを埋める
この子要素の横幅に合わせてexpandが可変

expand

サンプルコード

<div uk-grid>
    <div class="uk-width-auto">
        ページ内ナビ
    </div>
    <div class="uk-width-expand">
        コンテンツ。親コンテンツの余白を埋める分だけの横幅
    </div>
</div>

グリッドが一律で同じ幅の時

グリッド幅が一律で同じ場合は、親要素に指定することでクラス名の付与を少なくすることが可能です。

.uk-child-width-1-2
一律で親コンテナの半分にする
item

item

.uk-child-width-1-3
一律で親コンテナの1/3にする
item

item

item

.uk-child-width-1-4
一律で親コンテナの1/4にする
item

item

item

item

.uk-child-width-1-5
一律で親コンテナの1/5にする
item

item

item

item

item

item

item

.uk-child-width-1-6
一律で親コンテナの1/6にする
item

item

item

item

item

item

item

item

item

.uk-child-width-auto
コンテンツに合わせて、一律の横幅にする
item

item

item

item

item

item

.uk-child-width-expand
親コンテナの余白を埋める分で、一律の余白にする。他のクラスだと子要素の数が多い場合に改行されるが、expandは埋めるように分割するため、からなず一行になる。よって子要素の数が多い場合は注意が必要。
item

item

item

item

item

item

固定幅の定義

レスポンシブ設計の場合でも、固定幅のコンテンツを用意したいことがあるため、UIkitでは以下の5サイズの固定幅が用意されている。

.uk-width-small
150px
150px
.uk-width-medium
300px
300px
.uk-width-large
450px
450px
.uk-width-xlarge
600px
600px
.uk-width-xxlarge
750px
750px

サンプルコード

<!-- 横幅を600pxにしたい時 -->
<div class="uk-width-xlarge">600pxの横幅</div>

複合でグリッドを定義する。

親コンテナに指定する、.uk-child-width-x-xと、子要素に指定する.uk-width-y-yを組み合わせて使うことも可能。
例えば、「基本的にグリッド幅は4等分だが、ある要素だけ親要素の半分にしたい」というときに便利。

expand

1-3

expand

expand

サンプルコード

<!-- まずは、親コンテナを子要素で均等分割する -->
<div class="uk-child-width-1-4 uk-grid-small uk-grid-match" uk-grid>
    <div>
        expand
    </div>
    <div>
        expand
    </div>
    <div class="uk-width-1-2">
        ここだけ親コンテナの半分の横幅を確保
    </div>
    <div>
        expand
    </div>
    <div>
        expand
    </div>
    <!-- ...続く -->
</div>

レスポンシブ対応

ディスプレイサイズに合わせてグリッドを変えたい場合は以下のように、@マークとサイズを表すキーを付けて調整します。
UIkitでは以下の5つのブレイクポイントが用意されています。

.uk-width-*.uk-child-width-*
全てのディスプレイサイズに有効。モバイルファースト設計なので、基本的にはスマホ用のグリッドとする。
.uk-width-*@s、.uk-child-width-*@s
640px以上のサイズのときに、*に指定した数値で分割される。
.uk-width-*@m,.uk-child-width-*@m
960px以上のサイズのときに、*に指定した数値で分割される。
.uk-width-*@l,.uk-child-width-*@l
1200px以上のサイズのときに、*に指定した数値で分割される。
.uk-width-*@xl,.uk-child-width-*@xl
1600px以上のサイズのときに、*に指定した数値で分割される。

サンプルコード

<!-- スマホの時は1カラム、タブレットは2カラム、PCは3カラムのとき -->
<div class="uk-grid-small uk-grid-match uk-text-center" uk-grid>
    <div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">コンテンツ1</div>
    <div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">コンテンツ2</div>
    <div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">コンテンツ3</div>
</div>

<!-- 上の条件を親コンテナで -->
<div class="uk-grid-small uk-grid-match uk-text-center uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m">
    <div>コンテンツ1</div>
    <div>コンテンツ2</div>
    <div>コンテンツ3</div>
</div>

所感

駆け足で説明してきましたが、実際につかってみた感想としては、各ブレイクポイントに合わせてサイズを微調整するのが厳しいです。他のフレームワークだとここあたりは柔軟性があるのですが、UIkitの場合は自前での実装が必要になってきます。
ただ、それを補うほどコンポーネントも充実していますので、使っていて楽しいフレームワークというのが正直なところです。
次回は、他のコンポーネントをつかって、実際にLPのスケルトン的なものを作るところまでをご紹介できればと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です