本文へスキップ

ドキュメント

幅

様々なビューポートサイズに対する要素の幅を定義します。

UIkitの幅コンポーネントは、多くの場合グリッドと組み合わせて使用され、コンテンツをレスポンシブな列に分割します。分数、自動幅、または残りのスペースを埋める拡張ユニットを適用し、これらのモードを組み合わせることができます。

使用方法

要素に.uk-width-*クラスのいずれかを追加してサイズを決定します。グリッドコンポーネントとその子要素を使用してユニットを作成するのが一般的です。

クラス 説明
.uk-width-1-1 利用可能な幅の100％を占めます。
.uk-width-1-2 要素は親コンテナの半分を占めます。
.uk-width-1-3, .uk-width-2-3 要素は親コンテナの3分の1を占めます。
.uk-width-1-4, .uk-width-3-4 要素は親コンテナの4分の1を占めます。
.uk-width-1-5, .uk-width-2-5,
.uk-width-3-5, .uk-width-4-5		 要素は親コンテナの5分の1を占めます。
.uk-width-1-6, .uk-width-5-6 要素は親コンテナの6分の1を占めます。

注記 冗長性を削除するため、例えば.uk-width-3-6ではなく.uk-width-1-2を使用してください。

<div uk-grid>
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>
  • 1-3
    1-3
    1-3
    1-2
    1-2
    1-4
    3-4
  • <div class="uk-text-center" uk-grid>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
</div>

<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-2">
        <div class="uk-card uk-card-default uk-card-body">1-2</div>
    </div>
    <div class="uk-width-1-2">
        <div class="uk-card uk-card-default uk-card-body">1-2</div>
    </div>
</div>

<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-4">
        <div class="uk-card uk-card-default uk-card-body">1-4</div>
    </div>
    <div class="uk-width-3-4">
        <div class="uk-card uk-card-default uk-card-body">3-4</div>
    </div>
</div>

自動と拡張

幅コンポーネントには、アイテムの配置に柔軟性を与える追加の修飾子が用意されています。

クラス 説明
.uk-width-auto アイテムは自身のコンテンツの幅にのみ拡張します。
.uk-width-expand アイテムはグリッドコンテナの残りのスペースを埋めるように拡張します。 
<div uk-grid>
    <div class="uk-width-auto"></div>
    <div class="uk-width-expand"></div>
</div>
  • 自動
    拡張
  • <div class="uk-text-center" uk-grid>
    <div class="uk-width-auto">
        <div class="uk-card uk-card-default uk-card-body">Auto</div>
    </div>
    <div class="uk-width-expand">
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
</div>

子要素の幅を均等に

子要素の幅が均等に分割されたグリッドを作成するには、グリッド内の各リストアイテムに同じクラスを適用する必要はありません。.uk-child-width-*クラスのいずれかをグリッド自体に追加するだけです。

クラス 説明
.uk-child-width-1-2 すべての要素は親コンテナの半分を占めます。
.uk-child-width-1-3 すべての要素は親コンテナの3分の1を占めます。
.uk-child-width-1-4 すべての要素は親コンテナの4分の1を占めます。
.uk-child-width-1-5 すべての要素は親コンテナの5分の1を占めます。
.uk-child-width-1-6 すべての要素は親コンテナの6分の1を占めます。
.uk-child-width-auto コンテンツサイズに応じてグリッドを均等なユニットに分割します。
.uk-child-width-expand 利用可能なスペースに応じてグリッドを均等なユニットに分割します。 
<div class="uk-child-width-1-4" uk-grid>
    <div></div>
    <div></div>
    …
</div>
  • アイテム
    アイテム
    アイテム
    アイテム
    アイテム
  • <div class="uk-child-width-1-4 uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

分数で幅クラスを使用するアイテムは、コンテナの幅に収まらなくなった場合、新しい行に折り返されます。ただし、expandクラスのいずれかを使用する場合、スペースは常に同じ行に残るアイテム間で均等に分散されます。

<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div></div>
    …
</div>
  • アイテム
    アイテム
    アイテム
    アイテム
    アイテム
  • <div class="uk-child-width-expand uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

固定幅

計算された幅クラスに加えて、次のクラスのいずれかを追加することもできます。これらは固定幅を適用します。

クラス 説明
.uk-width-small 150pxの固定幅を適用します。
.uk-width-medium 300pxの固定幅を適用します。
.uk-width-large 450pxの固定幅を適用します。
.uk-width-xlarge 600pxの固定幅を適用します。
.uk-width-2xlarge 750pxの固定幅を適用します。 
<div class="uk-width-medium"></div>
  • 小
    中
    大
    特大
    2特大
  • <div class="uk-width-small uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Small</div></div>
<div class="uk-width-medium uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Medium</div></div>
<div class="uk-width-large uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Large</div></div>
<div class="uk-width-xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">X-Large</div></div>
<div class="uk-width-2xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">2X-Large</div></div>

幅の混合

.uk-child-width-*クラスと.uk-width-*クラスを個々のアイテムに組み合わせて使用することもできます。これにより、例えば、特定の幅を持つアイテムが1つあり、他のすべてのアイテムが残りのスペースを埋めるように拡張するグリッドを作成できます。

<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div class="uk-width-1-3"></div>
    <div></div>
    …
</div>
  • 拡張
    1-3
    拡張
    拡張
  • <div class="uk-child-width-expand uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
</div>

レスポンシブ幅

UIkitは、多くのレスポンシブ幅クラスを提供します。基本的に、通常の幅クラスと同様に機能しますが、有効になるブレークポイントを表すサフィックスが付いています。これらのクラスは可視性コンポーネントと組み合わせて使用できます。これは、様々なデバイスサイズに合わせてレイアウトとコンテンツを調整するのに最適です。

クラス 説明
.uk-width-*
.uk-child-width-*		 すべてのデバイス幅に影響します。グリッド列は横に並んだままです。
.uk-width-*@s
.uk-child-width-*@s		 640px以上のデバイス幅に影響します。小さいサイズではグリッド列が積み重ねられます。
.uk-width-*@m
.uk-child-width-*@m		 960px以上のデバイス幅に影響します。小さいサイズではグリッド列が積み重ねられます。
.uk-width-*@l
.uk-child-width-*@l		 1200px以上のデバイス幅に影響します。小さいサイズではグリッド列が積み重ねられます。
.uk-width-*@xl
.uk-child-width-*@xl		 1600px以上のデバイス幅に影響します。小さいサイズではグリッド列が積み重ねられます。
  • 1-2@m
    1-4@m
    1-4@m
    1-5@m
    hidden@l
    1-5@m
    1-3@l
    3-5@m
    2-3@l
    auto@m
    visible@l
    1-3@m
    expand@m
  • <div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
    <div class="uk-width-1-2@m">
        <div class="uk-card uk-card-default uk-card-body">1-2@m</div>
    </div>
    <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body">1-4@m</div>
    </div>
    <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body">1-4@m</div>
    </div>
    <div class="uk-width-1-5@m uk-hidden@l">
        <div class="uk-card uk-card-secondary uk-card-body">1-5@m<br>hidden@l</div>
    </div>
    <div class="uk-width-1-5@m uk-width-1-3@l">
        <div class="uk-card uk-card-default uk-card-body">1-5@m<br>1-3@l</div>
    </div>
    <div class="uk-width-3-5@m uk-width-2-3@l">
        <div class="uk-card uk-card-default uk-card-body">3-5@m<br>2-3@l</div>
    </div>
</div>

<div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
    <div class="uk-width-auto@m uk-visible@l">
        <div class="uk-card uk-card-primary uk-card-body">auto@m<br>visible@l</div>
    </div>
    <div class="uk-width-1-3@m">
        <div class="uk-card uk-card-default uk-card-body">1-3@m</div>
    </div>
    <div class="uk-width-expand@m">
        <div class="uk-card uk-card-default uk-card-body">expand@m</div>
    </div>
</div>