セクション

異なる背景色とスタイルを持つ水平レイアウトセクションを作成します。

使用方法

セクションは、ページのコンテンツを異なるスタイルのブロックに分割するために使用されます。このコンポーネントを適用するには、コンテナ要素に.uk-sectionクラスを追加するだけです。コンテナコンポーネントからコンテナを配置して、セクション内のコンテンツの幅を変更し、水平方向のパディングを追加できます。ネストされたコンテナのパディングはリセットされることに注意してください。

<div class="uk-section">
    <div class="uk-container"></div>
</div>

デフォルトでは、セクションは空白です。そのため、スタイリングのためにモディファイアクラスを追加することが重要です。この例では、.uk-section-mutedクラスを使用しています。通常、セクションはページの最外側の要素であるため、この例はこのコンポーネントの現実的な使用方法を完全には反映していません。

セクション

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

<div class="uk-section uk-section-muted">
    <div class="uk-container">

        <h3>Section</h3>

        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>

    </div>
</div>

スタイルモディファイア

異なる背景色とパディングを適用するには、次のいずれかのクラスを追加します。

クラス	説明
`.uk-section-default`	サイトのデフォルトの背景色を追加します。
`.uk-section-muted`	ミュートされた背景色を追加します。
`.uk-section-primary`	プライマリ背景色を追加します。
`.uk-section-secondary`	セカンダリ背景色を追加します。

<div class="uk-section uk-section-primary"></div>

デフォルトセクション

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

ミュートセクション

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

プライマリセクション

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

セカンダリセクション

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

画像付きセクション

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

<div class="uk-section uk-section-default">
    <div class="uk-container">

        <h3>Section Default</h3>

        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>

    </div>
</div>

<div class="uk-section uk-section-muted">
    <div class="uk-container">

        <h3>Section Muted</h3>

        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>

    </div>
</div>

<div class="uk-section uk-section-primary uk-light">
    <div class="uk-container">

        <h3>Section Primary</h3>

        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>

    </div>
</div>

<div class="uk-section uk-section-secondary uk-light">
    <div class="uk-container">

        <h3>Section Secondary</h3>

        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>

    </div>
</div>

<div class="uk-section-default">
    <div class="uk-section uk-light uk-background-cover" style="background-image: url(images/dark.jpg)">
        <div class="uk-container">

            <h3>Section with Images</h3>

            <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>

        </div>
    </div>
</div>

色の保持

.uk-section-primaryおよび.uk-section-secondaryクラスは、反転コンポーネントの反転スタイルを自動的に拡張します。たとえば、これらのセクションでカードを使用しているため、この動作を防ぎたい場合は、.uk-preserve-colorクラスを追加します。

<div class="uk-section uk-section-primary uk-preserve-color"></div>

カード付きプライマリセクション

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="uk-section uk-section-primary uk-preserve-color">
    <div class="uk-container">

        <div class="uk-panel uk-light uk-margin-medium">
            <h3>Section Primary with cards</h3>
        </div>

        <div class="uk-grid-match uk-child-width-expand@m" uk-grid>
            <div>
                <div class="uk-card uk-card-default uk-card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default uk-card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>

    </div>
</div>

サイズモディファイア

各セクションに異なるパディングを追加したり、完全に削除したりできます。

クラス	説明
`.uk-section-xsmall`	セクションのパディングを最小限に減らすには、このクラスを追加します。
`.uk-section-small`	セクションのパディングを減らすには、このクラスを追加します。
`.uk-section-large`	セクションのパディングを増やすには、このクラスを追加します。
`.uk-section-xlarge`	セクションのパディングをさらに増やすには、このクラスを追加します。
`.uk-padding-remove-vertical`	パディングコンポーネントからこのクラスを追加して、セクションのパディングを削除します。

ラージセクション

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

<div class="uk-section uk-section-large uk-section-muted">
    <div class="uk-container">

        <h3>Section Large</h3>

        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>
    </div>
</div>

オーバーラップモディファイア

一部のUIkitテーマは、テクスチャの背景や境界線など、よりリッチなスタイルを使用します。この場合、.uk-section-overlapクラスを追加して、境界線画像と負のオフセットを次のセクションに適用できます。後続のセクションがある場合、これは機能を実装するスタイルでのみ機能することに注意してください。

<div class="uk-section uk-section-overlap"></div>

ドキュメント

セクション

使用方法