セクション
uc-content, uc-section クラスを指定することで、メインのコンテンツエリアとセクションエリアを作成することができます。
1. 基本
基本のセクションエリアを作成します。
原則として、 uc-content クラスは一度しか指定することができません。
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<main class="uc-content">
<section class="uc-section">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
</main>
2. カラーバリエーション
4種類のカラーバリエーションが用意されています。
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<!-- Gray -->
<section class="uc-section _gray">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Black -->
<section class="uc-section _black">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Dark -->
<section class="uc-section _dark">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Zebra -->
<!-- It changes to a gray background when the order of elements is even. -->
<section class="uc-section _zebra">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
3. 中央揃え
_center クラスを指定することで、内包する要素を中央揃えにできます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus, voluptatum provident dicta recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus, voluptatum provident dicta recusandae.
<!-- Make all elements centered. -->
<section class="uc-section _center">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<!-- Place the title element and the text below it in the center. -->
<section class="uc-section">
<h2 class="uc-section-title _center">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
4. 横幅の最大値を設定する
uc-section-inner クラスを使用することで、内包する要素の横幅の最大値を1200pxに設定することができます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<section class="uc-section">
<div class="uc-section-inner">
<h2 class="uc-section-title">Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>