はじめに
軽量のCSSフレームワークとして有名なUIkitですが、その新バージョンであるUIkit3(2017-06-19時点でbeta25)も比較的安定していると感じましたので、別案件で使ってみました。
今回の「つくってみた」では、そのインストール方法からレイアウトの方法を中心に、UIkit3の使い方をご紹介いたします。
また、ReactやVueといったリアクティブなjsフレームワークとの親和性が高く、UIkit3のサイト自体がVueで作られていています。
ただ、jQueryが必須となっていますので、そこは妥協が必要かもしれません。
2019.03.13 追記
beta31からjQueryは必要なくなりました。
現在(2019.03.13)は3.0.3が公開されており、off-canvasのhtml構造が変更されてたり、新しいコンポーネントや機能が追加されています。
ピュアなCSSフレームワークよりは重いですが、やっぱり便利ですね。
※レイアウト以外のコンポーネントについて
UIkit3のいろんなコンポーネントをつかってみた記事をアップしました(2017/09/20)。レイアウト以外のコンポーネントの簡単な解説をしています。
インストール
いずれかの方法で、既存プロジェクトにUIkitをインストールしてください。新規プロジェクトの場合はUIkitのGithubリポジトリからソースをビルドすると色々と楽です。
CDNで
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
ダウンロードで
UIkit3 Downloadから最新版のUIkitをダウンロードします。
.zipファイルを解凍すると、css,jsフォルダが入っていますので中身を確認します。
必要なのはuikit.min.css、uikit.min.jsの２ファイルで、アイコンを使うときは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
サンプルコード
<!-- しっかりコンテツを分けたい！１画面１コンテンツ型を目指すなら -->
<div class="uk-section uk-section-large">コンテンツ１</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">
テキストなど。
</div>
</section>
Container コンポーネント
基本
UIkitのContainerコンポーネントでは、最大の横幅が定義され、ディスプレイサイズに合わせて横幅が可変します。同時にページの中央に整列されるようになります。
基本的に、上下の間隔を定義するSectionコンポーネントでラップして使うことが多いです。
サンプルコード
<!-- .uk-container -->
<div class="uk-container">コンテンツ</div>
<!-- Sectionでラップ -->
<div class="uk-section">
<div>コンテンツ</div>
</div>
サイズの定義
UIkitでは以下の３つの横幅サイズが用意されています。いずれも、基本となる.uk-containerクラスと合わせてマルチクラスとして使います。
*本ブログでは記事ブロックが900pxを超えることがないので、.uk-containerのスタイルは表現できていません。
- .uk-container-small
- 最大幅900px
-
small
- .uk-container-large
- 最大幅1200px
-
large
- .uk-container-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属性を付け加えることに注意してください。
サンプルコード
<div class="uk-child-width-1-1@m" uk-grid>
<div>カラム１</div>
<div>カラム２</div>
<div>カラム３</div>
</div>
ガーター(グリッド間)の定義
UIKitのGridコンポーネントでは、以下の４つのガーターサイズが用意されています。
- .uk-grid-small
- 15px間隔
- .uk-grid-medium
- 30px間隔
- .uk-grid-large
- 70px間隔
- .uk-grid-collapse
- 0xp間隔。ピッタリくっついて配置
ネスト(入れ子構造)の定義
ネストは次のように行います。
サンプルコード
<!-- ネストによる2:1:1のサイズの実装 -->
<div class="uk-child-width-1-2" uk-grid>
<!-- 子要素1 -->
<div>
<div>子要素１のコンテンツ</div>
</div>
<!-- 子要素2 -->
<div>
<!-- 子要素2を更に等分 -->
<div class="uk-child-width-1-2" uk-grid>
<div>子要素２のコンテンツ１</div>
<div>子要素２のコンテンツ２</div>
</div>
</div>
</div>
dividerによる分割線
.uk-grid-dividerクラスを付与することで、グリッド間に分割線を入れることも可能です。
サンプルコード
<div class="uk-grid-divider uk-child-width-1-3" uk-grid>
<div>コンテンツ１</div>
<div>コンテンツ２</div>
<div>コンテンツ３</div>
</div>
グリッド内コンテンツの高さの統一
.uk-grid-matchクラスを付与することで、グリッド内のコンテンツの高さを揃える事が可能です。
※本サイトのスタイルが優先され、本記事だと正常に反映されないかもしれません。
サンプルコード
<div class="uk-grid-match uk-child-width-1-3" uk-grid>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div>
Sed ullam eum minus non saepe rerum nesciunt quas perspiciatis eius maxime magni similique culpa eaque voluptatibus corrupti architecto
</div>
<div>
voluptatum!
</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コンポーネントを利用することで、並びを調整する事が可能です。
サンプルコード
<!-- グリッドの中央揃え -->
<div class="uk-flex uk-flex-center">
<div>コンテンツ１</div>
<div>コンテンツ２</div>
<div>コンテンツ３</div>
<div>コンテンツ４</div>
</div>
Flex コンポーネント
基本
Flexコンポーネントを利用することで、flexboxを利用したレイアウトが可能です。IE11だと注意が必要ですが、postCSSやautoprefixerをかませて、実践に投入している方も多いのではないでしょうか。
一通りのプロパティも揃っていますので、こちらはUIkitのドキュメント(Flexコンポーネント)をご確認ください。
サンプルコード
<div class="uk-flex">
<div>コンテンツ１</div>
<div>コンテンツ２</div>
<div>コンテンツ３</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">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<!-- ここが表示される -->
<div class="uk-invisible-hover"></div>
</div>
<!-- 見えないが、サイズは維持 -->
<div class="uk-visible-toggle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<!-- ここが非表示 -->
<div class="uk-hidden-hover">
ここをホバー
</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%の横幅になります。
- .uk-width-1-2
- 親コンテナの半分の横幅になります。
- .uk-width-1-3 と .uk-width-2-3
- 親コンテナを三等分したグリッドになります。
- .uk-width-1-4 と .uk-width-3-4
- 親コンテナを四等分したグリッドになります。
- .uk-width-1-5 〜 .uk-width-4-5
- 親コンテナを五等分したグリッドになります。
- .uk-width-1-6 〜 .uk-width-5-6
- 親コンテナを六等分したグリッドになります。
サンプルコード
<!-- 三等分 -->
<div uk-grid>
<div class="uk-width-1-3">コンテンツ１</div>
<div class="uk-width-1-3">コンテンツ２</div>
<div class="uk-width-1-3">コンテンツ３</div>
</div>
<!-- 1/4と3/4 -->
<div>
コンテンツ
<aside class="uk-width-1-4">サイドナビゲーション</aside>
</div>
横幅の自動調整
グリッドに内包する子要素の横幅が決まっていない時は、その子要素の幅に合わせてグリッドを製作することが可能です。一般的にautoとexpandは組み合わせて使うことが多いです。
- .uk-width-auto
- 自身の横幅に合わせる
- .uk-width-expand
- 他グリッドで埋められてない分だけ自身を拡張し、スペースを埋める
サンプルコード
<div>
<div class="uk-width-auto">ページ内ナビ</div>
<div class="uk-width-expand">コンテンツ。親コンテンツの余白を埋める分だけの横幅</div>
</div>
グリッドが一律で同じ幅の時
グリッド幅が一律で同じ場合は、親要素に指定することでクラス名の付与を少なくすることが可能です。
- .uk-child-width-1-2
- 一律で親コンテナの半分にする
- .uk-child-width-1-3
- 一律で親コンテナの1/3にする
- .uk-child-width-1-4
- 一律で親コンテナの1/4にする
- .uk-child-width-1-5
- 一律で親コンテナの1/5にする
- .uk-child-width-1-6
- 一律で親コンテナの1/6にする
- .uk-child-width-auto
- コンテンツに合わせて、一律の横幅にする
- .uk-child-width-expand
- 親コンテナの余白を埋める分で、一律の余白にする。他のクラスだと子要素の数が多い場合に改行されるが、expandは埋めるように分割するため、からなず一行になる。よって子要素の数が多い場合は注意が必要。
固定幅の定義
レスポンシブ設計の場合でも、固定幅のコンテンツを用意したいことがあるため、UIkitでは以下の５サイズの固定幅が用意されている。
- .uk-width-small
- 150px
- .uk-width-medium
- 300px
- .uk-width-large
- 450px
- .uk-width-xlarge
- 600px
- .uk-width-xxlarge
- 750px
サンプルコード
<!-- 横幅を600pxにしたい時 -->
<div class="uk-width-xlarge">600pxの横幅</div>
複合でグリッドを定義する。
親コンテナに指定する、.uk-child-width-x-xと、子要素に指定する.uk-width-y-yを組み合わせて使うことも可能。
例えば、「基本的にグリッド幅は4等分だが、ある要素だけ親要素の半分にしたい」というときに便利。
サンプルコード
<!-- まずは、親コンテナを子要素で均等分割する -->
<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以上のサイズのときに、*に指定した数値で分割される。
サンプルコード
<!-- スマホの時は１カラム、タブレットは２カラム、PCは３カラムのとき -->
<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">コンテンツ１</div>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">コンテンツ２</div>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">コンテンツ３</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" uk-grid>
<div>コンテンツ１</div>
<div>コンテンツ２</div>
<div>コンテンツ３</div>
</div>
所感
駆け足で説明してきましたが、実際につかってみた感想としては、各ブレイクポイントに合わせてサイズを微調整するのが厳しいです。他のフレームワークだとここあたりは柔軟性があるのですが、UIkitの場合は自前での実装が必要になってきます。
ただ、それを補うほどコンポーネントも充実していますので、使っていて楽しいフレームワークというのが正直なところです。
次回は、他のコンポーネントをつかって、実際にLPのスケルトン的なものを作るところまでをご紹介できればと思います。
