マージン
要素間に間隔を追加するためのユーティリティクラスのコレクションです。
使用方法
次のクラスの1つ以上を任意の要素に追加して、段落が通常持つものと同じ垂直および/または水平マージンを作成します。
| クラス | 説明 |
|---|---|
.uk-margin |
他の要素が前にある場合は上マージンを追加し、常に下マージンを追加します。 |
.uk-margin-top |
上マージンを追加します。 |
.uk-margin-bottom |
下マージンを追加します。 |
.uk-margin-left |
左マージンを追加します。 |
.uk-margin-right |
右マージンを追加します。 |
<div class="uk-margin"></div>- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
小さいマージン
次のクラスのいずれかを追加して、ブロック要素に小さな間隔を追加します。
| クラス | 説明 |
|---|---|
.uk-margin-small |
他の要素が前にある場合は小さな上マージンを追加し、常に下マージンを追加します。 |
.uk-margin-small-top |
小さな上マージンを追加します。 |
.uk-margin-small-bottom |
小さな下マージンを追加します。 |
.uk-margin-small-left |
小さな左マージンを追加します。 |
.uk-margin-small-right |
小さな右マージンを追加します。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-small uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-small uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
中程度のマージン
次のクラスのいずれかを追加して、ブロック要素に中程度の幅の間隔を追加します。
| クラス | 説明 |
|---|---|
.uk-margin-medium |
他の要素が前にある場合は中程度の幅の上マージンを追加し、常に下マージンを追加します。 |
.uk-margin-medium-top |
中程度の幅の上マージンを追加します。 |
.uk-margin-medium-bottom |
中程度の幅の下マージンを追加します。 |
.uk-margin-medium-left |
中程度の幅の左マージンを追加します。 |
.uk-margin-medium-right |
中程度の幅の右マージンを追加します。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-medium uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-medium uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
大きいマージン
次のクラスのいずれかを追加して、ブロック要素に大きな間隔を追加します。
| クラス | 説明 |
|---|---|
.uk-margin-large |
他の要素が前にある場合は大きなマージンを追加し、常に下マージンを追加します。 |
.uk-margin-large-top |
大きな上マージンを追加します。 |
.uk-margin-large-bottom |
大きな下マージンを追加します。 |
.uk-margin-large-left |
大きな左マージンを追加します。 |
.uk-margin-large-right |
大きな右マージンを追加します。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-large uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-large uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
非常に大きいマージン
次のクラスのいずれかを追加して、ブロック要素に非常に大きな間隔を追加します。
| クラス | 説明 |
|---|---|
.uk-margin-xlarge |
他の要素が前にある場合は非常に大きなマージンを追加し、常に下マージンを追加します。 |
.uk-margin-xlarge-top |
非常に大きな上マージンを追加します。 |
.uk-margin-xlarge-bottom |
非常に大きな下マージンを追加します。 |
.uk-margin-xlarge-left |
非常に大きな左マージンを追加します。 |
.uk-margin-xlarge-right |
非常に大きな右マージンを追加します。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
マージンの削除
次のクラスのいずれかを追加して、ブロック要素からマージンを削除します。
| クラス | 説明 |
|---|---|
.uk-margin-remove |
すべてのマージンを削除します。 |
.uk-margin-remove-top |
上マージンを削除します。 |
.uk-margin-remove-bottom |
下マージンを削除します。 |
.uk-margin-remove-left |
左マージンを削除します。 |
.uk-margin-remove-right |
右マージンを削除します。 |
.uk-margin-remove-vertical |
すべての垂直マージンを削除します。 |
.uk-margin-remove-adjacent |
直接後続する要素の上マージンを削除します。 |
.uk-margin-remove-first-child |
最初の子要素の上マージンを削除します。 |
.uk-margin-remove-last-child |
最後の子要素の下マージンを削除します。 |
<h1 class="uk-margin-remove"></h1>レスポンシブ
UIkitは、マージンを削除するための多くのレスポンシブクラスを提供します。基本的に、通常のmargin removeクラスと同じように機能しますが、有効になるブレークポイントを表すサフィックスが付きます。
| クラス | 説明 |
|---|---|
.uk-margin-remove-left@s.uk-margin-remove-right@s |
幅640px以上のデバイスに影響します。 |
.uk-margin-remove-left@m.uk-margin-remove-right@m |
幅960px以上のデバイスに影響します。 |
.uk-margin-remove-left@l.uk-margin-remove-right@l |
幅1200px以上のデバイスに影響します。 |
.uk-margin-remove-left@xl.uk-margin-remove-right@xl |
幅1600px以上のデバイスに影響します。 |
自動マージン
次のクラスのいずれかを追加して、自動マージンを設定します。これは、固定幅のブロック要素やフレックス要素を中央揃えしたり、その他の方法で揃えるのに役立ちます。
| クラス | 説明 |
|---|---|
.uk-margin-auto |
左マージンと右マージンをautoに設定し、ブロック要素とフレックス要素を水平方向に中央揃えします。 |
.uk-margin-auto-top |
上マージンをautoに設定し、ブロック要素とフレックス要素を下部に配置します。 |
.uk-margin-auto-bottom |
下マージンをautoに設定し、ブロック要素とフレックス要素を上部に配置します。 |
.uk-margin-auto-left |
左マージンをautoに設定し、ブロック要素とフレックス要素を右側に配置します。 |
.uk-margin-auto-right |
右マージンをautoに設定し、ブロック要素とフレックス要素を左側に配置します。 |
.uk-margin-auto-vertical |
上マージンと下マージンをautoに設定し、フレックス要素のみを垂直方向に中央揃えします。 |
- ブロック要素フレックスアイテム
<div class="uk-margin uk-margin-auto-left uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div> <div class="uk-flex uk-height-medium uk-background-muted uk-margin uk-text-center"> <div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body">Flex item</div> </div>
レスポンシブ
UIkitは、多くのレスポンシブな自動マージン クラスを提供します。基本的に、通常の自動マージン クラスと同じように機能しますが、有効になるブレークポイントを表すサフィックスが付きます。
| クラス | 説明 |
|---|---|
.uk-margin-auto-left@s.uk-margin-auto@s.uk-margin-auto-right@s |
幅640px以上のデバイスに影響します。 |
.uk-margin-auto-left@m.uk-margin-auto@m.uk-margin-auto-right@m |
幅960px以上のデバイスに影響します。 |
.uk-margin-auto-left@l.uk-margin-auto@l.uk-margin-auto-right@l |
幅1200px以上のデバイスに影響します。 |
.uk-margin-auto-left@xl.uk-margin-auto@xl.uk-margin-auto-right@xl |
幅1600px以上のデバイスに影響します。 |
- ブロック要素ブロック要素ブロック要素
<div class="uk-margin uk-margin-auto-right uk-margin-auto@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div> <div class="uk-margin uk-margin-auto uk-margin-auto-left@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div> <div class="uk-margin uk-margin-auto-left uk-margin-auto-right@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div>
動的な折り返し
スタッキング要素（例：小さいビューポートで折り返すインライン要素）に間隔を追加するには、親コンテナにuk-margin属性を追加するだけです。これにより、下の要素に.uk-margin-small-topクラスが自動的に追加されます。
<div uk-margin>
<button></button>
<button></button>
</div><div uk-margin> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> </div>
コンポーネントオプション
これらのオプションは、コンポーネント属性に適用できます。複数のオプションを区切るにはセミコロンを使用します。詳細はこちら
| オプション | 値 | デフォルト | 説明 |
|---|---|---|---|
margin |
文字列 | uk-margin-small-top |
このクラスは、通常は前の行のマージンを作成するために、次の行に折り返されるアイテムに追加されます。 |
first-column |
文字列 | uk-first-column |
このクラスは、各行の最初の要素に追加されます。 |
JavaScript
JavaScriptコンポーネントの詳細をご覧ください。
初期化
UIkit.margin(element, options);