MAGAZINE秋田のお役立ち情報をお届けしています。0はじめに軽量のCSSフレームワークとして有名なUIkitですが、その新バージョンであるUIkit3(2017-06-19時点でbeta25)も比較的安定していると感じましたので、別案件で使ってみました。今回の「つくってみた」では、そのインストール方法からレイアウトの方法を中心に、UIkit3の使い方をご紹介いたします。ReactやVueといったリアクティブなjsフレームワークとの親和性が高く、UIkit3のサイト自体がVueで作られていています。jQueryが必須となっていますので、そこは妥協が必要かもしれません。追記beta31からjQueryは必要なくなりました。現在(2019.03.13)は3.0.3が公開されており、off-canvasのhtml構造が変更されてたり、新しいコンポーネントや機能が追加されています。ピュアなCSSフレームワークよりは重いですが、やっぱり便利ですね。※レイアウト以外のコンポーネントについてUIkit3のいろんなコンポーネントをつかってみた記事をアップしました(2017/09/20)。レイアウト以外のコンポーネントの簡単な解説をしています。—インストールいずれかの方法で、既存プロジェクトにUIkitをインストールしてください。新規プロジェクトの場合はUIkitのGithubリポジトリからソースをビルドすると色々と楽です。Downloadから最新版のUIkitをダウンロードします。.zipファイルを解凍すると、css,jsフォルダが入っていますので中身を確認します。必要なのはuikit.min.css、uikit.min.jsの2ファイルで、アイコンを使うときはuikit-icon.min.jsもコピーします。各ファイルをご自分のプロジェクト内に適宜配置し、CDNでのインストールを参考に適宜パスを書き換えてください。※ダウンロードの場合jQueryファイルが含まれていません。Libraries等でjQueryのインストールをしておきます。基本UIkitのクラス名は必ず’uk-‘のプレフィックスがつきます。レイアウトまずはUIkitのドキュメントをご確認ください。左カラムにCOMPONENTSという項目があり、レイアウトで主に使うのは以下のコンポーネントです。コンポーネント基本UIkitのSectionコンポーネントは、水平方向にコンテンツを区切るために使用します。Sectionコンポーネントをこまめに挟むことで、コンテンツ間にメリハリがついて、見やすいレイアウトに仕上がると思います。個人的に一番つかっているコンポーネントです。class="uk-section">コンテンツ</div>スタイルの定義Sectionコンポーネントには以下の背景色が用意されています。いずれも基本となる.uk-sectionクラスとマルチクラスとして使用します。uk-section-primary">プライマリー(青色)になります。url('PATH/TO/IMAGE.jpg');">.uk-background-coverクラスをつけると、画像がコンテンツを埋めるように中央配置されます。</div>サイズの定義Sectionコンポーネントには以下5つの上下paddingが用意されています。上下にpaddingが入るため、使ってみると予想より余白が大きいと感じるかもしれません。コンポーネント基本UIkitのContainerコンポーネントでは、最大の横幅が定義され、ディスプレイサイズに合わせて横幅が可変します。同時にページの中央に整列されるようになります。基本的に、上下の間隔を定義するSectionコンポーネントでラップして使うことが多いです。<div>コンテンツ</div></div>サイズの定義UIkitでは以下の3つの横幅サイズが用意されています。いずれも、基本となる.uk-containerクラスと合わせてマルチクラスとして使います。*本ブログでは記事ブロックが900pxを超えることがないので、.uk-containerのスタイルは表現できていません。一般的なグリッドシステムです。グリッド間(ガーター)を調整したり、高さを統一させることも簡単にできます。基本的には、FlexコンポーネントやWidthコンポーネントと併用して使用することが多くなると思います。Gridコンポーネントはクラスを付与するのではなく、基本的に全てuk-grid属性を付け加えることに注意してください。<div>カラム3</div></div>ガーター(グリッド間)の定義UIKitのGridコンポーネントでは、以下の4つのガーターサイズが用意されています。.uk-grid-small15px間隔itemitemitem.uk-grid-medium30px間隔itemitemitem.uk-grid-large70px間隔itemitemitem.uk-grid-collapse0xp間隔。くっついて配置itemitemitemネスト(入れ子構造)の定義ネストは次のように行います。</div></div>dividerによる分割線.uk-grid-dividerクラスを付与することで、グリッド間に分割線を入れることも可能です。uk-grid><div>コンテンツ1</div><div>コンテンツ2</div><div>コンテンツ3</div></div>グリッド内コンテンツの高さの統一.uk-grid-matchクラスを付与することで、グリッド内のコンテンツの高さを揃える事が可能です。itemitem...item......※本サイトのスタイルが優先され、本記事だと正常に反映されないかもしれません。</div></div>子要素でグリッドサイズを調整したいとき今までは親要素でグリッドサイズを指定していましたが、以下のように子要素による指定も可能です。class="uk-width-expand">コンテンツ</div></div>Flexコンポーネントの利用Flexコンポーネントを利用することで、並びを調整する事が可能です。コンポーネント基本Flexコンポーネントを利用することで、flexboxを利用したレイアウトが可能です。IE11だと注意が必要ですが、postCSSやautoprefixerをかませて、実践に投入している方も多いのではないでしょうか。一通りのプロパティも揃っていますので、こちらはUIkitのドキュメント(Flexコンポーネント)をご確認ください。コンポーネント基本レスポンシブで設計する際に、ナビゲーションは初期で非表示にして、トグルボタンで開閉させたくなります。UIkitではそのコンポーネントが用意されておらず、自分で調整実装する必要があります。コンポーネントを利用して、表示・非表示を制御する必要が出てきます。以下の4つのブレイクポイントが用意されています。以下の4つのブレイクポイントが用意されています。.uk-visible@s640px以上で表示.uk-visible@m960px以上で表示.uk-visible@l1200px以上で表示.uk-visible@xl1600px以上で表示マウスホバーでの表示状態の制御.uk-visible-toggleでラップさせ、トグルさせたい要素を.uk-hidden-hover,.uk-invisible-hoverでラップすることで、非表示でもサイズを維持する(invisible)かしない(hidden)かを決定できます。</div></div>タッチデバイスの判定.uk-hidden-touch,.uk-hidden-notouchクラスで、タッチ可能なデバイスかそうで無いかによる制御も可能です。スマートフォンやタブレットと、PCやテレビなどの区別はディスプレイサイズによる制御ではなく、こちらが便利です。コンポーネント基本UIkitのWidthコンポーネントは、基本的にGridコンポーネントと併用します。親要素に一括して指定することも可能です。以下のパターンが用意されています。.uk-width-1-1親コンテナの100%の横幅になります。1-1.uk-width-1-2親コンテナの半分の横幅になります。.uk-width-2-3親コンテナを三等分したグリッドになります。.uk-width-3-4親コンテナを四等分したグリッドになります。.uk-width-4-5親コンテナを五等分したグリッドになります。.uk-width-5-6親コンテナを六等分したグリッドになります。class="uk-width-1-4">サイドナビゲーション</aside></div>横幅の自動調整グリッドに内包する子要素の横幅が決まっていない時は、その子要素の幅に合わせてグリッドを製作することが可能です。一般的にautoとexpandは組み合わせて使うことが多いです。class="uk-width-expand">コンテンツ。親コンテンツの余白を埋める分だけの横幅</div></div>グリッドが一律で同じ幅の時グリッド幅が一律で同じ場合は、親要素に指定することでクラス名の付与を少なくすることが可能です。.uk-child-width-1-2一律で親コンテナの半分にするitemitem.uk-child-width-1-3一律で親コンテナの1/3にするitemitemitem.uk-child-width-1-4一律で親コンテナの1/4にするitemitemitemitem.uk-child-width-1-5一律で親コンテナの1/5にするitemitemitemitemitemitemitem.uk-child-width-1-6一律で親コンテナの1/6にするitemitemitemitemitemitemitemitemitem.uk-child-width-autoコンテンツに合わせて、一律の横幅にするitemitemitemitemitemitem.uk-child-width-expand親コンテナの余白を埋める分で、一律の余白にする。他のクラスだと子要素の数が多い場合に改行されるが、expandは埋めるように分割するため、からなず一行になる。よって子要素の数が多い場合は注意が必要。itemitemitemitemitemitem固定幅の定義レスポンシブ設計の場合でも、固定幅のコンテンツを用意したいことがあるため、UIkitでは以下の5サイズの固定幅が用意されている。class="uk-width-xlarge">600pxの横幅</div>複合でグリッドを定義する。親コンテナに指定する、.uk-child-width-x-xと、子要素に指定する.uk-width-y-yを組み合わせて使うことも可能。「基本的にグリッド幅は4等分だが、ある要素だけ親要素の半分にしたい」というときに便利。--></div>レスポンシブ対応ディスプレイサイズに合わせてグリッドを変えたい場合は以下のように、@マークとサイズを表すキーを付けて調整します。UIkitでは以下の5つのブレイクポイントが用意されています。.uk-width-*.uk-child-width-*全てのディスプレイサイズに有効。モバイルファースト設計なので、基本的にはスマホ用のグリッドとする。.uk-width-*@s、.uk-child-width-*@s640px以上のサイズのときに、*に指定した数値で分割される。.uk-width-*@m,.uk-child-width-*@m960px以上のサイズのときに、*に指定した数値で分割される。.uk-width-*@l,.uk-child-width-*@l1200px以上のサイズのときに、*に指定した数値で分割される。.uk-width-*@xl,.uk-child-width-*@xl1600px以上のサイズのときに、*に指定した数値で分割される。駆け足で説明してきましたが、実際につかってみた感想としては、各ブレイクポイントに合わせてサイズを微調整するのが厳しいです。他のフレームワークだとここあたりは柔軟性があるのですが、UIkitの場合は自前での実装が必要になってきます。それを補うほどコンポーネントも充実していますので、使っていて楽しいフレームワークというのが正直なところです。次回は、他のコンポーネントをつかって、実際にLPのスケルトン的なものを作るところまでをご紹介できればと思います。コメントをキャンセルメールアドレスが公開されることはありません。AGENCY.GOOQgooq.jp秋田パンフレット製作.comを見るパンフレット、会社案内、採用ツールの制作なら秋田パンフレット制作.comakita-panph.comai-create.net。