はじめに

UIkitの基本的な設定と概要について理解を深めましょう。

まず、UIkitをダウンロードする必要があります。その他のパッケージやCDNへのリンクについては、インストールガイドをご覧ください。

パッケージの内容

Zipファイルには、コンパイル済みのCSSファイルとJavaScriptファイルが含まれており、これらはすぐに開始するために必要なすべてです。後で、自分でUIkitをインストールしてコンパイルしたり、独自のUIkitテーマを作成したりすることもできます。

フォルダ	説明
`/css`	UIkitのCSSと右から左へのバージョンが含まれています。
`/js`	UIkitのJavaScriptとアイコンライブラリのJavaScriptが含まれています。

HTMLマークアップ

コンパイルおよび圧縮されたCSSとJavaScriptを、HTML5ドキュメントの<head>要素に追加します。また、UIkitアイコンライブラリを含めます。基本的な設定は以上です。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

UIkitをドキュメントに含めたら、利用可能なコンポーネントを確認し、ページの<body>要素内に独自のマークアップを作成してください。

エディター用のUIkitオートコンプリート

UIkitは、例えばSublime TextやAtomのような、しっかりしたコードエディターを使用すると最も効果的です。さらに効率を上げるために、お気に入りのIDEまたはコードエディター用のオートコンプリートプラグインのいずれかをインストールすることをお勧めします。これにより、すべてのUIkitクラスとマークアップを調べて入力する必要がなくなるため、時間を大幅に節約できます。

ブラウザサポート

次の表は、UIkitがテストされているバージョンを示しています。「最新」とは、そのブラウザの最近のすべてのバージョンで正常に動作することを意味します。多くのブラウザがローリングリリース戦略に移行しているため、ブラウザサポートを特定のバージョンに固定するのは近年少し難しい状況になっています。簡単に言うと、UIkitはほぼすべての最新ブラウザで動作します。

最新