メインコンテンツへスキップ

ドキュメント

ユーティリティ

コンテンツをスタイルするための便利なユーティリティクラスのコレクションです。

パネル

UIkitは、コンテンツの特定のセクションを囲むためにパネルを使用します。これらは、例えばグリッドコンポーネントからグリッド列に配置することができます。

<div>要素に.uk-panelクラスを追加すると、位置コンテキストが作成され、box-sizingがborder-boxに設定され、クリアフィックスが適用され、最後の子要素の下マージンが削除されます。

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-child-width-1-3@s" uk-grid>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>

スクロール可能なパネル

.uk-panel-scrollableクラスを追加すると、パネルに固定高さが与えられ、コンテンツがその高さを超えた場合にスクロール可能になります。また、.uk-height-*クラスのいずれかを追加して、異なる高さを適用することもできます。

  • <div class="uk-panel uk-panel-scrollable">
    <ul class="uk-list">
        <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
        <li>
            <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
            <ul>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
                <li>
                    <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
                    <ul>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
                    </ul>
                </li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
            </ul>
        </li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
    </ul>

</div>

クリアリングとフローティング

フローティング要素は、ドキュメントフローから取り出され、コンテナの左側または右側に配置されます。フロートをクリアすることが重要です。最悪の場合、サイトがスクランブルになる可能性があります。以下のクラスは、基本的なレイアウトを設定するのに役立ちます。

クラス 説明
.uk-float-left このクラスを追加すると、要素が左にフロートします。
.uk-float-right このクラスを追加すると、要素が右にフロートします。
.uk-clearfix このクラスを親コンテナに追加すると、フロートがクリアされます。または、例えば.uk-overflow-hiddenクラスを追加して、新しいブロックフォーマットコンテキストを作成することもできます。
  • 右
    左
  • <div class="uk-clearfix">
    <div class="uk-float-right">
        <div class="uk-card uk-card-default uk-card-body">Right</div>
    </div>
    <div class="uk-float-left">
        <div class="uk-card uk-card-default uk-card-body">Left</div>
    </div>
</div>

オーバーフロー

これらのユーティリティは、要素のオーバーフロー動作を変更するためのさまざまなクラスを提供します。

クラス 説明
.uk-overflow-hidden このクラスを追加すると、コンテナの寸法を超えるコンテンツがクリップされます。
.uk-overflow-auto このクラスを追加すると、要素のコンテンツがコンテナ自体よりも広いまたは高い場合に、水平または垂直スクロールバーを提供するコンテナが作成されます。

注意.uk-overflow-autoクラスは、レスポンシブWebサイトでテーブルを処理する必要がある場合に便利です。テーブルは、ある時点で大きくなりすぎます。また、<pre>要素でもうまく機能します。

  • テーブル見出し テーブル見出し テーブル見出し テーブル見出し テーブル見出し テーブル見出し テーブル見出し テーブル見出し
    テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ
    テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ テーブルデータ
    テーブルフッター テーブルフッター テーブルフッター テーブルフッター テーブルフッター テーブルフッター テーブルフッター テーブルフッター 
  • <div class="uk-overflow-auto uk-height-small">
    <table class="uk-table uk-table-striped uk-table-condensed uk-text-nowrap">
        <thead>
            <tr>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
            </tr>
        </tfoot>
    </table>
</div>

オーバーフロー自動

uk-overflow-auto属性を追加すると、親コンテナの残りの高さを埋めるように要素の高さを拡張できます。コンテンツが拡張された高さよりも高い場合は、垂直スクロールバーが表示されます。

  • オーバーフロー自動コンテナの前のコンテンツ。

    オーバーフロー自動コンテナの後のコンテンツ。

  • <div class="uk-height-medium">
    <div class="js-wrapper">

        <p>Some content before the overflow auto container.</p>

        <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
            <div class="uk-grid-small" uk-grid>
                <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo2.jpg" width="1800" height="1200" alt=""></div>
            </div>
        </div>

        <p>Some content after the overflow auto container.</p>

    </div>
</div>

これは、モーダルコンポーネント内でよく使用されます。

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>
  • 開く 
  • <a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Open</a>

<div id="modal-overflow" 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">Headline</h2>
        </div>

        <div class="uk-modal-body" uk-overflow-auto>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </div>

    </div>
</div>

属性にselContainerおよびselContentオプションを追加することで、ターゲットの高さを変更できます。詳細

オプション 値 デフォルト 説明
sel-container 文字列 .uk-modal 高さを提供するコンテナ要素のCSSセレクター。
sel-content 文字列 .uk-modal-dialog 内側のコンテンツをラップして高さを提供する要素のCSSセレクター。

リサイズ

これらのユーティリティは、要素をリサイズするためのさまざまなクラスを提供します。

クラス 説明
.uk-resize このクラスを追加すると、水平方向と垂直方向のリサイズが有効になります。
.uk-resize-vertical このクラスを追加すると、垂直方向のリサイズのみが有効になります。

各ボックスの下の右下隅を掴んでドラッグして、サイズを変更します。

  •             
<!-- Resize vertically -->
<div uk-grid>
    <div class="uk-width-1-2">…</div>
    <div class="uk-width-1-2">…</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>
            
        
                
<!-- Resize horizontally and vertically -->
<div uk-grid>
    <div class="uk-width-1-2">…</div>
    <div class="uk-width-1-2">…</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>
            
        
  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <pre class="uk-resize-vertical">
            <code>
&lt;!-- Resize vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
    <div>
        <pre class="uk-resize">
            <code>
&lt;!-- Resize horizontally and vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

表示

これらのクラスのいずれかを追加すると、要素の表示プロパティが変更されます。

クラス 説明
.uk-display-block 要素をブロック要素のように動作させます。
.uk-display-inline 要素をインライン要素のように動作させます。
.uk-display-inline-block 要素をインラインブロック要素のように動作させます。

インライン

これらのクラスは、子として画像を持つコンテナで位置コンテキストを作成するためによく使用されます。コンテナは、画像のサイズとレスポンシブな動作を維持します。これにより、位置コンポーネントを使用して画像の上に配置されたコンテンツが、画像の寸法から流れ出るのを防ぎます。

クラス 説明
.uk-inline このクラスを追加すると、要素にインラインブロック動作が適用され、最大幅100％が追加され、位置コンテキストが作成されます。
.uk-inline-clip .uk-inlineと同様に、オーバーフローした子要素もクリップします。 
<div class="uk-inline">
    <img src="" width="" height="" alt="">
    <div class="uk-position-cover"></div>
</div>
  • オーバーレイ
  • <div class="uk-inline">
    <img src="images/photo.jpg" width="300" height="200" alt="">
    <div class="uk-position-medium uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>

レスポンシブオブジェクト

UIkitでは、<img>、<canvas>、<audio>、<video>要素は、デフォルトで親コンテナの幅に適応します。iframeにレスポンシブな動作を適用するには、uk-responsive属性を追加します。他の要素や異なる動作を適用するには、次のクラスのいずれかを追加してください。

クラス 説明
.uk-responsive-width このクラスを追加すると、他の要素にも同じレスポンシブな動作が適用されます。元の縦横比を維持しながら、オブジェクトの幅を親の幅に応じて調整します。
.uk-responsive-height このクラスを追加すると、元の縦横比を維持しながら、オブジェクトの高さを（幅ではなく）親の高さに応じて調整します。
.uk-preserve-width このクラスを追加すると、デフォルトのレスポンシブな動作を回避し、元の画像の寸法が保持されます。親要素にクラスを追加することもでき、すべての関連する要素コンテンツに適用されます。Googleマップをサイトに埋め込んでいる場合は、マップの画像を修正するためにこれが必要になる場合があります。 
<img class="uk-responsive-height" src="" width="" height="" alt="">

<iframe src="" width="" height="" uk-responsive></iframe>

オブジェクトフィットと位置

画像または動画のコンテンツを要素に収まるようにサイズ変更する方法を定義します。

クラス 説明
.uk-object-cover アスペクト比を維持してコンテンツボックスを完全に覆うように画像を拡大縮小します。
.uk-object-contain 幅と高さがコンテンツボックス内に収まる限り、アスペクト比を維持して画像を拡大縮小します。
.uk-object-fill 要素のコンテンツボックスを埋めるように画像を拡大縮小します。
.uk-object-none 画像をまったく拡大縮小しません。
.uk-object-scale-down containのように、決して拡大しません。

注意UIkitでは画像と動画はデフォルトでレスポンシブであるため、これらのクラスのいずれかを使用する場合は、アスペクト比を設定する必要があります。

<img class="uk-object-cover" src="" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1">
  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
    <div>
        <img class="uk-object-contain" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
</div>

要素内の画像または動画の配置を変更するには、uk-object-position-*クラスのいずれかを追加します。

クラス 説明
.uk-object-position-top-left 左上に配置します。
.uk-object-position-top-center 上部に配置します。
.uk-object-position-top-right 右上に配置します。
.uk-object-position-center-left 左に配置します。
.uk-object-position-center-center 中央に配置します。
.uk-object-position-center-right 右に配置します。
.uk-object-position-bottom-left 左下に配置します。
.uk-object-position-bottom-center 下部に配置します。
.uk-object-position-bottom-right 右下に配置します。

ボーダー半径

画像などの要素のボーダー半径を変更するには、次のクラスのいずれかを追加します。

クラス 説明
.uk-border-rounded このクラスを追加すると、角が丸くなります。
.uk-border-circle このクラスを追加すると、円形が適用されます。
.uk-border-pill このクラスを追加すると、ピルシェイプが適用されます。
  • Border rounded Border circle Border pill
  • <img class="uk-border-rounded" src="images/avatar.jpg" width="200" height="200" alt="Border rounded">
<img class="uk-border-circle" src="images/avatar.jpg" width="200" height="200" alt="Border circle">
<img class="uk-border-pill" src="images/avatar.jpg" width="200" height="200" alt="Border pill">

ボックスシャドウ

さまざまなボックスシャドウを要素に適用できます。次のクラスのいずれかを追加するだけです。

クラス 説明
.uk-box-shadow-small このクラスを追加すると、小さなボックスシャドウが適用されます。
.uk-box-shadow-medium このクラスを追加すると、中程度のボックスシャドウが適用されます。
.uk-box-shadow-large このクラスを追加すると、大きなボックスシャドウが適用されます。
.uk-box-shadow-xlarge このクラスを追加すると、非常に大きなボックスシャドウが適用されます。 
<div class="uk-box-shadow-small"></div>
  • 小
    中
    大
    特大
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-box-shadow-small uk-padding">Small</div>
    </div>

    <div>
        <div class="uk-box-shadow-medium uk-padding">Medium</div>
    </div>

    <div>
        <div class="uk-box-shadow-large uk-padding">Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-xlarge uk-padding">X-Large</div>
    </div>
</div>

ボックスシャドウ下

要素の下部にボックスシャドウを適用して、浮いているように見せるには、.uk-box-shadow-bottomクラスを追加します。これは、他の.uk-box-shadow-*修飾子のいずれかと組み合わせることもできます。

<div class="uk-box-shadow-bottom"></div>
  • ボックスシャドウ下
  • <div class="uk-box-shadow-bottom uk-box-shadow-small uk-width-1-2@s uk-text-center">
    <div class="uk-background-default uk-padding-large">
        Box shadow bottom
    </div>
</div>

ホバー

ホバー時にボックスシャドウを適用するには、以下のいずれかのクラスを追加します。これは、ホバー時のシャドウサイズを変更するためにも使用できます。これを行うには、上記のクラスのいずれかと組み合わせるだけです。

クラス 説明
.uk-box-shadow-hover-small ホバー時に小さなボックスシャドウを適用するには、このクラスを追加します。
.uk-box-shadow-hover-medium ホバー時に中程度のボックスシャドウを適用するには、このクラスを追加します。
.uk-box-shadow-hover-large ホバー時に大きなボックスシャドウを適用するには、このクラスを追加します。
.uk-box-shadow-hover-xlarge ホバー時に非常に大きなボックスシャドウを適用するには、このクラスを追加します。 
<div class="uk-box-shadow-hover-small"></div>
  • ホバー（小）
    ホバー（特大）
    小 + ホバー（大）
    特大 + ホバー（中）
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-box-shadow-hover-small uk-padding">Hover Small</div>
    </div>

    <div>
        <div class="uk-box-shadow-hover-xlarge uk-padding">Hover X-Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">Small + Hover Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">X-Large + Hover Medium</div>
    </div>
</div>

ドロップキャップ

.uk-dropcap クラスを使用すると、<p> 要素に直接追加することで、テキスト内でドロップキャップを実現できます。

  • Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <p class="uk-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

新しい .uk-logo クラスを使用すると、たとえばナビゲーションバー内でロゴを簡単に定義できます。

<a class="uk-logo" href=""></a>
  • <a class="uk-logo" href="#">Logo</a>

暗い背景に画像を表示する場合は、反転コンポーネントの .uk-light クラスを追加すると、見やすくなるように色が自動的に反転されます。

  • <div class="uk-panel uk-padding uk-background-secondary uk-light">
    <a class="uk-logo" href="#">Logo</a>
</div>

ロゴ画像

ロゴとして、たとえばSVGのような<img>要素を使用することもできます。

<a class="uk-logo" href="">
    <img src="" width="" height="" alt="">
</a>

反転コンポーネントを使用すると、明るい背景と暗い背景で代替ロゴを自動的に表示することもできます。2番目のロゴ画像に .uk-logo-inverse クラスを追加するだけです。カラーモードに応じて、.uk-light または .uk-dark クラスが親要素に適用されると、反転されたロゴが表示されます。

<div class="uk-light">
    <a class="uk-logo" href="">
        <img src="" width="" height="" alt="">
        <img class="uk-logo-inverse" src="" width="" height="" alt="">
    </a>
</div>
  • <div class="uk-child-width-expand@s" uk-grid>
    <div>
        <div class="uk-panel uk-padding uk-background-muted">
            <a class="uk-logo" href="#" aria-label="Back to Home">
                <img src="images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
    <div>
        <div class="uk-panel uk-padding uk-background-secondary uk-light">
            <a class="uk-logo" href="#" aria-label="Back to Home">
                <img src="images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
</div>

注 SVGロゴをインラインSVGとして挿入するには、SVGコンポーネントを使用してください。

ブレンドモード

たとえば、画像を配置する際に、背景にさまざまなブレンドモードを適用するには、以下のクラスのいずれかを追加します。これらはオーバーレイコンポーネントと組み合わせることができます。背景のブレンドモードがどのように機能するかをより深く理解するには、このCSS Tricksの記事をご覧ください。

クラス 説明
.uk-blend-multiply このクラスは、ブレンドモードを乗算に設定します。
.uk-blend-screen このクラスは、ブレンドモードをスクリーンに設定します。
.uk-blend-overlay このクラスは、ブレンドモードをオーバーレイに設定します。
.uk-blend-darken このクラスは、ブレンドモードを暗くするに設定します。
.uk-blend-lighten このクラスは、ブレンドモードを明るくするに設定します。
.uk-blend-color-dodge このクラスは、ブレンドモードを覆い焼きカラーに設定します。
.uk-blend-color-burn このクラスは、ブレンドモードを焼き込みカラーに設定します。
.uk-blend-hard-light このクラスは、ブレンドモードをハードライトに設定します。
.uk-blend-soft-light このクラスは、ブレンドモードをソフトライトに設定します。
.uk-blend-difference このクラスは、ブレンドモードを差に設定します。
.uk-blend-exclusion このクラスは、ブレンドモードを除外に設定します。
.uk-blend-hue このクラスは、ブレンドモードを色相に設定します。
.uk-blend-saturation このクラスは、ブレンドモードを彩度に設定します。
.uk-blend-color このクラスは、ブレンドモードをカラーに設定します。
.uk-blend-luminosity このクラスは、ブレンドモードを輝度に設定します。 
<div class="uk-position-relative">
    <div class="uk-blend-multiply uk-overlay uk-overlay-primary"></div>
    <img src="" width="" height="" alt="">
</div>
  • Blend Multiply

    乗算

    Blend Screen

    スクリーン

    Blend Overlay

    オーバーレイ

    Blend Darken

    暗くする

    Blend Lighten

    明るくする

    Blend Color Dodge

    覆い焼きカラー

    Blend Color Burn

    焼き込みカラー

    Blend Hard Light

    ハードライト

    Blend Soft Light

    ソフトライト

    Blend Difference

    差

    Blend Exclusion

    除外

    Blend Hue

    色相

    Blend Saturation

    彩度

    Blend Color

    カラー

    Blend Luminosity

    輝度

  • <div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-multiply" src="images/dark.jpg" width="1800" height="1200" alt="Blend Multiply">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Multiply</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-screen" src="images/dark.jpg" width="1800" height="1200" alt="Blend Screen">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Screen</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-overlay" src="images/dark.jpg" width="1800" height="1200" alt="Blend Overlay">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Overlay</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-darken" src="images/dark.jpg" width="1800" height="1200" alt="Blend Darken">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Darken</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-lighten" src="images/dark.jpg" width="1800" height="1200" alt="Blend Lighten">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Lighten</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color-dodge" src="images/dark.jpg" width="1800" height="1200" alt="Blend Color Dodge">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color Dodge</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color-burn" src="images/dark.jpg" width="1800" height="1200" alt="Blend Color Burn">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color Burn</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-hard-light" src="images/dark.jpg" width="1800" height="1200" alt="Blend Hard Light">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Hard Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-soft-light" src="images/dark.jpg" width="1800" height="1200" alt="Blend Soft Light">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Soft Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-difference" src="images/dark.jpg" width="1800" height="1200" alt="Blend Difference">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Difference</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-exclusion" src="images/dark.jpg" width="1800" height="1200" alt="Blend Exclusion">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Exclusion</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-hue" src="images/dark.jpg" width="1800" height="1200" alt="Blend Hue">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Hue</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-saturation" src="images/dark.jpg" width="1800" height="1200" alt="Blend Saturation">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Saturation</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color" src="images/dark.jpg" width="1800" height="1200" alt="Blend Color">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-luminosity" src="images/dark.jpg" width="1800" height="1200" alt="Blend Luminosity">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Luminosity</p>
            </div>
        </div>
    </div>
</div>

変換の中心

要素をそれ自体に中心を合わせるには、uk-transform-center クラスを追加します。これは、絶対配置の場合に特に役立ちます。

  • <div class="uk-inline">
    <img src="images/light.jpg" width="1800" height="1200" alt="">
    <a class="uk-position-absolute uk-transform-center" style="left: 50%; top: 50%" href="#" uk-marker></a>
</div>

変換の原点

スケーリングなどのアニメーションの原点を変更するには、uk-transform-origin-* クラスのいずれかを追加します。これは、アニメーションコンポーネントと組み合わせることができます。

クラス 説明
.uk-transform-origin-top-left 遷移は左上から発生します。
.uk-transform-origin-top-center 遷移は上部から発生します。
.uk-transform-origin-top-right 遷移は右上から発生します。
.uk-transform-origin-center-left 遷移は左から発生します。
.uk-transform-origin-center-right 遷移は右から発生します。
.uk-transform-origin-bottom-left 遷移は左下から発生します。
.uk-transform-origin-bottom-center 遷移は下部から発生します。
.uk-transform-origin-bottom-right 遷移は右下から発生します。 
<div class="uk-transform-origin-bottom-right uk-animation-scale-up"></div>

  • 右下

    上部中央

    下部中央

  • <div class="uk-child-width-1-3@m" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-bottom-right uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Bottom Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-top-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Top Center</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-bottom-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Bottom Center</p>
        </div>
    </div>
</div>

無効

<a>、<button>、<iframe> 要素など、要素のクリック動作を無効にするには、.uk-disabled クラスを追加します。

  • 無効
  • <a class="uk-disabled uk-button uk-button-default" href="#">Disabled</a>

ドラッグ

ドラッグされている要素に移動カーソルを適用するには、.uk-drag クラスを追加します。

<div class="uk-drag"></div>
  • <div class="uk-drag uk-width-small uk-padding uk-background-muted uk-text-center">
    <i uk-icon="icon: move; ratio: 2"></i>
</div>

ファイルをドラッグしたときにアップロード領域にボックスシャドウを作成するには、.uk-dragover クラスを追加します。