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

ドキュメント

表示設定

レスポンシブ表示設定クラスを使用して、異なるデバイスで要素を表示または非表示にします。

使い方

以下のクラスのいずれかを追加して、要素を非表示にします。

クラス 説明
.uk-hidden すべてのデバイスで要素を非表示にします。これはどちらかというとレガシークラスです。これを行う推奨方法は、hidden属性を使用することです。
.uk-invisible ドキュメントフローから要素を削除せずに非表示にします。 
<div hidden></div>

<div class="uk-invisible"></div>

レスポンシブ

このコンポーネントは、異なるビューポートで要素を非表示または表示するためのレスポンシブクラスを提供します。

非表示

指定された幅よりも大きい画面から要素を非表示にするには、.uk-hidden-*クラスのいずれかを追加します。

クラス 説明
uk-hidden@s 640px以上のデバイス幅にのみ影響します。
uk-hidden@m 960px以上のデバイス幅にのみ影響します。
uk-hidden@l 1200px以上のデバイス幅にのみ影響します。
uk-hidden@xl 1600px以上のデバイス幅にのみ影響します。 
<!-- Hidden on tablets and larger -->
<div class="uk-hidden@m"></div>

注この例では、緑色の要素は、定義されたブレークポイントよりも大きい画面では非表示になっています。ブラウザのウィンドウのサイズを変更して、効果を確認してください。

  • ✔ 小
    小
    ✔ 中
    中
    ✔ 大
    大
    ✔ 特大
    特大
  • <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-grid>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove uk-alert-success">✔ Small</div>
            <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@s">Small</div>
        </div>
    </div>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove uk-alert-success">✔ Medium</div>
            <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@m">Medium</div>
        </div>
    </div>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove uk-alert-success">✔ Large</div>
            <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@l">Large</div>
        </div>
    </div>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove uk-alert-success">✔ X-Large</div>
            <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@xl">X-Large</div>
        </div>
    </div>
</div>

表示

指定された幅よりも大きい画面で要素を表示するには、.uk-visible-*クラスを使用します。

クラス 説明
uk-visible@s 640px以上のデバイス幅にのみ影響します。
uk-visible@m 960px以上のデバイス幅にのみ影響します。
uk-visible@l 1200px以上のデバイス幅にのみ影響します。
uk-visible@xl 1600px以上のデバイス幅にのみ影響します。 
<!-- Visible on tablets and larger -->
<div class="uk-visible@m"></div>

注この例では、緑色の要素は、定義されたブレークポイントよりも大きい画面で表示されます。ブラウザのウィンドウのサイズを変更して、効果を確認してください。

  • 小
    ✔ 小
    中
    ✔ 中
    大
    ✔ 大
    特大
    ✔ 特大
  • <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-grid>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove">Small</div>
            <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@s">✔ Small</div>
        </div>
    </div>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove">Medium</div>
            <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@m">✔ Medium</div>
        </div>
    </div>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove">Large</div>
            <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@l">✔ Large</div>
        </div>
    </div>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove">X-Large</div>
            <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@xl">✔ X-Large</div>
        </div>
    </div>
</div>

トグル

要素をホバーまたはフォーカス時のみに表示するには、親要素に.uk-visible-toggleクラスを追加し、非表示にする子要素に次のクラスのいずれかを追加します。

クラス 説明
.uk-hidden-hover 要素は非表示のときにドキュメントフローから削除されます。
.uk-invisible-hover 要素は非表示のときにドキュメントフローから削除されません。

子要素は、親要素がホバーまたはフォーカスされたときに表示されます。キーボードナビゲーションやタッチデバイスでフォーカスを受け入れるようにするには、親要素にtabindex="0"を追加します。

非表示の子要素内にa要素またはbutton要素がある場合は、すでにキーボードナビゲーションでフォーカス可能であり、子要素が表示されます。したがって、タッチデバイスで親要素がまだフォーカス可能になるように、tabindex="-1"を追加します。

<div class="uk-visible-toggle" tabindex="0">
    <div class="uk-hidden-hover"></div>
</div>

  • ホバーしていないときは非表示

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    ホバーしていないときは非表示

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • <div class="uk-child-width-1-2@s" uk-grid>
    <div class="uk-visible-toggle" tabindex="-1">

        <h4>Hidden when not hovered</h4>

        <div uk-grid>
            <div class="uk-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="uk-width-auto">
                <ul class="uk-hidden-hover uk-iconnav">
                    <li><a href="#" uk-icon="icon: pencil"></a></li>
                    <li><a href="#" uk-icon="icon: copy"></a></li>
                    <li><a href="#" uk-icon="icon: trash"></a></li>
                </ul>
            </div>
        </div>

    </div>
    <div class="uk-visible-toggle" tabindex="-1">

        <h4>Invisible when not hovered</h4>

        <div uk-grid>
            <div class="uk-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="uk-width-auto">
                <ul class="uk-invisible-hover uk-iconnav">
                    <li><a href="#" uk-icon="icon: pencil"></a></li>
                    <li><a href="#" uk-icon="icon: copy"></a></li>
                    <li><a href="#" uk-icon="icon: trash"></a></li>
                </ul>
            </div>
        </div>

    </div>
</div>

タッチ

タッチデバイスで要素を非表示にするには.uk-hidden-touchクラスを、タッチスクリーンがないデバイスで要素を非表示にするには.uk-hidden-notouchクラスを追加します。

<!-- Hidden on touch devices -->
<div class="uk-hidden-touch"></div>

<!-- Hidden on no-touch devices -->
<div class="uk-hidden-notouch"></div>
  • ✔ タッチで非表示
    タッチで非表示
    ✔ タッチなしで非表示
    タッチなしで非表示
  • <div class="uk-grid-small uk-child-width-1-2 uk-child-width-auto@s uk-text-center" uk-grid>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden Touch</div>
            <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-touch">Hidden Touch</div>
        </div>
    </div>
    <div>
        <div class="uk-panel">
            <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden No-Touch</div>
            <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-notouch">Hidden No-Touch</div>
        </div>
    </div>
</div>