UIkitは軽量でモジュール式のフロントエンドフレームワークです。高速で強力なWeb UIを開発することができます。
公式サイト | https://getuikit.com/ |
ライセンス | MIT |
グリッド | 6列 |
GitHub stars | 16.6k |
@getuikit |
モジュール | サイズ |
---|---|
uikit.min.css | 264KB |
uikit.min.js | 128KB |
uikit-icons.js | 62.5KB |
UIkitはCDN (Contents Delivery Network) を通じて導入できる。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Getting started with UIkit</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>
<a class="uk-button uk-button-default" href="">Link</a>
<button class="uk-button uk-button-default">Button</button>
UIkit でグリッドを作成するには、uk-grid 属性を指定する。
<div uk-grid>
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
<div class="uk-grid-divider" uk-grid>
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を2分の1にするには、uk-width-1-2 クラスを指定する。
<div uk-grid>
<div class="uk-width-1-2">1/2</div>
<div class="uk-width-1-2">1/2</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を3分の1にするには、uk-width-1-3 クラスを指定する。
<div uk-grid>
<div class="uk-width-1-3">1/3</div>
<div class="uk-width-1-3">1/3</div>
<div class="uk-width-1-3">1/3</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を3分の2にするには、uk-width-2-3 クラスを指定する。
<div uk-grid>
<div class="uk-width-2-3">2/3</div>
<div class="uk-width-1-3">1/3</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を4分の1にするには、uk-width-1-4 クラスを指定する。
<div uk-grid>
<div class="uk-width-1-4">1/4</div>
<div class="uk-width-1-4">1/4</div>
<div class="uk-width-1-4">1/4</div>
<div class="uk-width-1-4">1/4</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を4分の3にするには、uk-width-3-4 クラスを指定する。
<div uk-grid>
<div class="uk-width-3-4">3/4</div>
<div class="uk-width-1-4">1/4</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を5分の1にするには、uk-width-1-5 クラスを指定する。
<div uk-grid>
<div class="uk-width-1-5">1/5</div>
<div class="uk-width-1-5">1/5</div>
<div class="uk-width-1-5">1/5</div>
<div class="uk-width-1-5">1/5</div>
<div class="uk-width-1-5">1/5</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を5分の2にするには、uk-width-2-5 クラスを指定する。
<div uk-grid>
<div class="uk-width-2-5">2/5</div>
<div class="uk-width-1-5">1/5</div>
<div class="uk-width-1-5">1/5</div>
<div class="uk-width-1-5">1/5</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を5分の3にするには、uk-width-3-5 クラスを指定する。
<div uk-grid>
<div class="uk-width-3-5">3/5</div>
<div class="uk-width-1-5">1/5</div>
<div class="uk-width-1-5">1/5</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を5分の4にするには、uk-width-4-5 クラスを指定する。
<div uk-grid>
<div class="uk-width-4-5">4/5</div>
<div class="uk-width-1-5">1/5</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を6分の1にするには、uk-width-1-6 クラスを指定する。
<div uk-grid>
<div class="uk-width-1-6">1/6</div>
<div class="uk-width-1-6">1/6</div>
<div class="uk-width-1-6">1/6</div>
<div class="uk-width-1-6">1/6</div>
<div class="uk-width-1-6">1/6</div>
<div class="uk-width-1-6">1/6</div>
</div>
UIkit のグリッドレイアウトシステムにおいて横幅を6分の5にするには、uk-width-5-6 クラスを指定する。
<div uk-grid>
<div class="uk-width-5-6">5/6</div>
<div class="uk-width-1-6">1/6</div>
</div>
UIkitはアイコンを提供している。
<span uk-icon="icon: question"></span>
<img class="uk-border-rounded" src="portrait.jpg" alt="portrait">
<img class="uk-border-circle" src="portrait.jpg" alt="portrait">
<img class="uk-border-pill" src="portrait.jpg" alt="portrait">
<div class="uk-margin uk-background-primary">Margin</div>
UIkit でナビゲーション・バーを作成するには、uk-navbar 属性を指定する。
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href="/css/bootstrap/">Bootstrap</a>
</li>
<li>
<a href="/css/bulma/">Bulma</a>
</li>
</ul>
</div>
</nav>
UIkit でナビゲーション・バーのアクティブな項目を作成するには、uk-active クラスを指定する。
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="#">UIkit</a>
</li>
<li>
<a href="/css/foundation/">Foundation</a>
</li>
</ul>
</div>
</nav>
UIkit で中央寄せのナビゲーション・バーを作成するには、uk-navbar-center クラスを指定する。
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href="/css/materialize/">Materialize</a>
</li>
<li>
<a href="/css/milligram/">Milligram</a>
</li>
</ul>
</div>
</nav>
UIkit で中央寄せのナビゲーション・バーを作成するには、uk-navbar-right クラスを指定する。
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="/css/primer/">Primer</a>
</li>
<li>
<a href="/css/pure/">Pure.css</a>
</li>
</ul>
</div>
</nav>
<table class="uk-table">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
<tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
<tr>
<tr>
<td>0010</td>
<td>りそな銀行</td>
<tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0010 | りそな銀行 |
<table class="uk-table uk-table-divider">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
<tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
<tr>
<tr>
<td>0010</td>
<td>りそな銀行</td>
<tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0010 | りそな銀行 |
UIkit で表の行を縞模様にするには、table タグに uk-table-striped クラスを指定する。
<table class="uk-table uk-table-striped">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
<tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
<tr>
<tr>
<td>0010</td>
<td>りそな銀行</td>
<tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
<tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0010 | りそな銀行 |
9900 | ゆうちょ銀行 |
表の行の上にマウスカーソルを乗せたときに色を変えるには、table クラスに加えて uk-table-hover 修飾クラスを指定する。
<table class="uk-table uk-table-hover">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
<tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
<tr>
<tr>
<td>0010</td>
<td>りそな銀行</td>
<tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
<tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0010 | りそな銀行 |
9900 | ゆうちょ銀行 |
小さい表にするには、table クラスに加えて uk-table-small 修飾クラスを指定する。
<table class="uk-table uk-table-small">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
<tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
<tr>
<tr>
<td>0010</td>
<td>りそな銀行</td>
<tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
<tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0010 | りそな銀行 |
9900 | ゆうちょ銀行 |
大きい表にするには、table クラスに加えて uk-table-large 修飾クラスを指定する。
<table class="uk-table uk-table-large">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
<tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
<tr>
<tr>
<td>0010</td>
<td>りそな銀行</td>
<tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
<tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0010 | りそな銀行 |
9900 | ゆうちょ銀行 |
<table class="uk-table uk-table-justify">
<caption>金融機関コード</caption>
<thead>
<tr>
<th>コード</th>
<th>金融機関</th>
<tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>みずほ銀行</td>
<tr>
<tr>
<td>0010</td>
<td>りそな銀行</td>
<tr>
<tr>
<td>9900</td>
<td>ゆうちょ銀行</td>
<tr>
</tbody>
</table>
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
0010 | りそな銀行 |
9900 | ゆうちょ銀行 |
<ul uk-accordion>
<li>
<a class="uk-accordion-title" href="#">Title #1<a>
<div class="uk-accordion-content">Contents #2</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Title #2<a>
<div class="uk-accordion-content">Contents #2</div>
</li>
</ul>
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Title #1<a>
<div class="uk-accordion-content">Contents #2</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Title #2<a>
<div class="uk-accordion-content">Contents #2</div>
</li>
</ul>
<div uk-alert>
Alert
</div>
<div class="uk-alert-primary" uk-alert>
Primary alert
</div>
<div class="uk-alert-success" uk-alert>
Success alert
</div>
<div class="uk-alert-warning" uk-alert>
Warning alert
</div>
<div class="uk-alert-danger" uk-alert>
Danger alert
</div>
<div class="uk-background-default">
Default background
</div>
<div class="uk-background-muted">
Muted background
</div>
<div class="uk-background-primary">
Primary background
</div>
<div class="uk-background-secondary">
Secondary background
</div>
<span class="uk-badge">1</span>
1
<button class="uk-button uk-button-default" type="button">
Dropdown
</button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</ul>
<div class="uk-container uk-background-primary">
Container
</div>
<div class="uk-container uk-container-xsmall uk-background-primary">
Extra small container
</div>
<div class="uk-container uk-container-small uk-background-primary">
Small container
</div>
<div class="uk-container uk-container-large uk-background-primary">
Large container
</div>
<div class="uk-container uk-container-expand uk-background-primary">
Expand container
</div>
<p class="uk-text-small">
Small font
</p>
Small font
<p class="uk-text-large">
Large font
</p>
Large font
<p class="uk-text-muted">
Muted font
</p>
Muted font
<p class="uk-text-emphasis">
Emphasis text
</p>
Emphasis text
<p class="uk-text-primary">
Primary text
</p>
Primary text
<p class="uk-text-secondary">
Secondary text
</p>
Secondary text
<p class="uk-text-success">
Success text
</p>
Success text
<p class="uk-text-warning">
Warning text
</p>
Warning text
<p class="uk-text-danger">
Danger text
</p>
Danger text
<span uk-icon="icon: question; ratio: 0.5"></span>
<span uk-icon="icon: question; ratio: 2"></span>
<span uk-icon="icon: question; ratio: 3"></span>
<div class="uk-margin-top uk-background-primary">
Top margin
</div>
<div class="uk-margin-right uk-background-primary">
Right margin
</div>
<div class="uk-margin-bottom uk-background-primary">
Bottom margin
</div>
<div class="uk-margin-left uk-background-primary">
Left margin
</div>
<a href="#example" uk-toggle>Open dialog</a>
<div id="example" uk-modal>
<div class="uk-modal-dialog">
<div class="uk-modal-body">
<h2 class="uk-modal-title">Modal dialog</h2>
<button class="uk-modal-close">Close</button>
</div>
</div>
</div>
<div id="example" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" uk-close>
</button>
<div class="uk-modal-body">
<h2 class="uk-modal-title">
Default close button
</h2>
</div>
</div>
</div>
<div id="example" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-outside" uk-close>
</button>
<div class="uk-modal-body">
<h2 class="uk-modal-title">
Outside close button
</h2>
</div>
</div>
</div>
<div id="example" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-margin-auto-vertical">
<button class="uk-modal-close-outside" uk-close>
</button>
<div class="uk-modal-body">
<h2 class="uk-modal-title">
Vertically centered dialog
</h2>
</div>
</div>
</div>
<div id="example" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close></button>
<div class="uk-modal-header">
<h2 class="uk-modal-title">
Modal dialog with header
</h2>
</div>
<div class="uk-modal-body">
<!-- content -->
</div>
</div>
</div>
<div id="example" uk-modal>
<div class="uk-modal-dialog">
<div class="uk-modal-body">
<h2 class="uk-modal-title">
Modal dialog with footer
</h2>
</div>
<div class="uk-modal-footer">
<button class="uk-button uk-button-default uk-modal-close">
Close
</button>
</div/>
</div>
</div>
<div id="example" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close></button>
<div class="uk-modal-body">
<h2 class="uk-modal-title">Full size modal dialog</h2>
<!-- content -->
</div>
</div>
</div>
<div class="uk-padding uk-background-primary">
Padding
</div>
<div class="uk-padding-small uk-background-primary">
Small padding
</div>
<div class="uk-padding-large uk-background-primary">
Large padding
</div>