Bootstrapより良いかも? CSSフレームワークUIkitとは

Web制作 |

CSSフレームワークといえば、Bootstrapが一番有名で広く使われています。

ただしよく聞かれるのは、デザインがイケてないという声です。Bootstrapをそのまま使うと、「Bootstrap感」が出てしまうのです。つまり、分かる人には「あ、これBootstrapだな」と分かってしまい、知らない人にとっても「何だかよく見かけるデザイン」になってしまうのです。

そのため、表に出すページはデザインのカスタマイズが必要になり、結局フレームワークを使わない方が早かった、となることも……。

Bootstrapに劣らない使い勝手で、かつデザインが美しいフレームワークを探したところ、UIkitに行き当たりました。

UIkitとは

Webインターフェースを開発するための、フロントエンド向けフレームワークです。Bootstrapと同じくレスポンシブ対応で、グリッドシステムもあります。

当サイトもUIkitを採用しています。

特徴1. そのまま使える洗練されたユーザーインターフェース

カードなんかのコンポーネントも見ての通り、モダンでスタイリッシュですね。

ボタンなんかはこの見た目。

ナビゲーションメニュー。

プロフィール表示やコメント欄なんかに使えるやつ。

数あるCSSフレームワークの中でも、UIkitが一番美しいのではないでしょうか。

特に余白へのこだわりを感じます。どのコンポーネントも余裕のあるpaddingがデフォルトになっており、そのおかげで、洗練された印象に見えます。

CSSを特に編集しなくても、UIkitを適用しただけでオシャレなサイトができて楽なのが、一番のポイントです。

特徴2. パッケージはCSSとJavaScriptで構成

これもBootstrapと同じです。

UIkitにjQueryは必要ありません。脱jQueryしたいと思っている方にもお勧めです。

特徴3. Sassにも対応

Sassを使うと、メインカラーやサブカラーを変数で簡単に変更できます。デフォルトで用意されている色を好きな色に上書きできるので便利です。

他にも既定の余白、フォントサイズ、ブレークポイントなどを上書きできます。

デザインはデフォルトの状態でほぼ完成されているので、色を変えるだけでも十分なくらいです。

導入方法

方法その1. CDN

一番シンプルな導入方法。<head>内に以下を記述するだけ。

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.5/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.5/dist/js/uikit-icons.min.js"></script>

方法その2. パッケージをダウンロード

いくつか方法があります。

githubリポジトリをクローンしてもよし。

git clone git://github.com/uikit/uikit.git

zipをダウンロードしてもよし。

他の方法もこちらに載っています。

ダウンロードしたら、この三つを<head>で読み込みます。(パスはファイルを置いた場所に合わせて自由に変えてください)

<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>

Sassと合わせて使う方法

UIkitをSassと合わせて導入してみたところ、とても快適でした。※Sassについての説明はここでは省力します。

UIkitでSassを使うには、CDNではなくダウンロード版を使います。ダウンロードしたパッケージの中に、uikit/src/scss/ というフォルダがあるので、cssではなくscssフォルダを使います。

まず、UIkitをインポートするためのメインのscssファイルを一つ用意します。例: sass site.scss > site.css

そのファイル中で、以下の順番でインポートしていきます。

// 1. UIkitの変数を自分でカスタムする場合、ここで上書きする
$global-link-color: #DA7D02;

// 2. デフォルトの変数とmixinをインポートする
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. 自分でmixinをカスタムする場合、ここで上書きする
@mixin hook-card() { color: #000; }

// 4. UIkitをインポートする
@import "uikit/src/scss/uikit-theme.scss";

完了!

インポートしたら変数をカスタマイズしてみましょう。

UIkitのデフォルト変数一覧は、/src/scss/components/variables.scss に載っています。

たとえば $global-link-color はリンクの色です。他にも変えたい色があれば、上記の1番に記述して上書きしましょう。


執筆者

Yulius

ホームページ制作、多言語サイト制作のご依頼を承っています。お気軽にご相談ください。

お見積もりご依頼