現在様々な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が使えるようです。
<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 |
非レスポンシブ化
グリッドの機能は使いたいけどレスポンシブにしたくない、というときは以下のようにCSSに1行加えるだけでレスポンシブを解除することが可能です。
.uk-container{width: 960px;}
このあとは・・・?
今回はグリッドとレスポンシブの基本的な使い方を紹介しましたが、まだまだ使える機能がたくさんあります。
このあとはUIkitのナビゲーションやパネル、フォームなどのコンポーネントについて紹介していきます。