The “Split” pattern(分割パターン)
既製のセクションのほとんどは 2 つの一般的な構造に基づいており、そのうちの 1 つは 「分割」パターンです。
分割パターンは 2 つの部分で構成されます。1 つはコピー用、もう 1 つはメディア (画像またはビデオ) 用です。 このパターンは、ヒーロー分割や機能分割などの既製のセクションの基礎になっています。
HTML での実践的な例を見てみましょう 👇
<section class="section center-content">
<div class="container">
<div class="section-inner">
<!-- Split pattern -->
<div class="split-wrap">
<!-- Split item (even) -->
<div class="split-item">
<!-- Copy -->
<div class="split-item-content center-content-mobile">
<h3 class="mt-0 mb-16">Title</h3>
<p class="m-0">Paragraph</p>
</div>
<!-- Media -->
<div class="split-item-image">
<img src="path/to/image.png" />
</div>
</div>
<!-- Split item (odd) -->
<div class="split-item">
<!-- Copy -->
<div class="split-item-content center-content-mobile">
<h3 class="mt-0 mb-16">Title</h3>
<p class="m-0">Paragraph</p>
</div>
<!-- Media -->
<div class="split-item-image">
<img src="path/to/image.png" />
</div>
</div>
<!-- More split items, if needed... -->
</div>
</div>
</div>
</section>.split-wrap 内には、必要なだけ .split-item を追加できます。
デフォルトでは、.split-item 要素であっても、左側にコピーが表示され、右側にメディアが表示されます。 奇数の .split-item は、コピーとメディアの位置を反転します。追加のクラスを追加する必要はなく、HTML 内のコピー/メディア要素の順序を反転する必要もありません。
モバイル画面では、コピーはデフォルトで常にメディアの上に表示されます。
Invert the order of copy / media(コピー/メディアの順序を逆にする)
モバイルとデスクトップ (または両方) で順序を反転するには、.split-wrap 要素に対して .invert-mobile および .invert-desktop ヘルパー クラスを使用できます 👇
<section class="section center-content">
<div class="container">
<div class="section-inner">
<!-- Split pattern -->
<div class="split-wrap invert-mobile invert-desktop">
<!-- Split item (even) -->
<div class="split-item">
<!-- Copy -->
<div class="split-item-content center-content-mobile">
<h3 class="mt-0 mb-16">Title</h3>
<p class="m-0">Paragraph</p>
</div>
<!-- Media -->
<div class="split-item-image">
<img src="path/to/image.png" />
</div>
</div>
<!-- Split item (odd) -->
<div class="split-item">
<!-- Copy -->
<div class="split-item-content center-content-mobile">
<h3 class="mt-0 mb-16">Title</h3>
<p class="m-0">Paragraph</p>
</div>
<!-- Media -->
<div class="split-item-image">
<img src="path/to/image.png" />
</div>
</div>
<!-- More split items, if needed... -->
</div>
</div>
</div>
</section>React と Vue で 👇
<c-split-section invert-mobile invert-desktop>
<!-- Section content -->
</c-split-section>Align copy / media to top(コピー/メディアを上に揃えます)
ここでは、コピーとメディアを上に揃える例を示します。 お気づきかと思いますが、.align-top クラスを .split-wrap 要素に追加しました。
<section class="section center-content">
<div class="container">
<div class="section-inner">
<!-- Split pattern -->
<div class="split-wrap align-top">
<!-- Split item -->
<div class="split-item">
<!-- Copy -->
<div class="split-item-content center-content-mobile">
<h3 class="mt-0 mb-16">Title</h3>
<p class="m-0">Paragraph</p>
</div>
<!-- Media -->
<div class="split-item-image">
<img src="path/to/image.png" />
</div>
</div>
</div>
</div>
</div>
</section>React と Vue で 👇
<c-split-section align-top>
<!-- Section content -->
</c-split-section>Make media fill its container(メディアをコンテナに充填する)
デフォルトでは、メディア (画像またはビデオ) がそのコンテナ (つまり、.split-item-image 要素) より小さい場合、元のサイズが維持されます。
コンテナに塗りつぶしたい場合は、以下の例のように .split-item-image-fill クラスを使用します。
<section class="section center-content">
<div class="container">
<div class="section-inner">
<!-- Split pattern -->
<div class="split-wrap align-top">
<!-- Split item -->
<div class="split-item">
<!-- Copy -->
<div class="split-item-content center-content-mobile">
<h3 class="mt-0 mb-16">Title</h3>
<p class="m-0">Paragraph</p>
</div>
<!-- Media -->
<div class="split-item-image split-item-image-fill">
<img src="path/to/image.png" />
</div>
</div>
</div>
</div>
</div>
</section>React と Vue で 👇
<c-split-section image-fill>
<!-- Section content -->
</c-split-section>属性一覧
List of available HTML classes(利用可能な HTML クラスのリスト)
| Class | Description |
|---|---|
.invert-mobile | Inverts the default order of copy / media on mobile screens |
.invert-desktop | Inverts the default order of copy / media on larger screens |
.align-top | To align copy and media to the top |
.split-item-image-fill | Ensures that media fills the parent container |
React
| Prop | Type | Default | Accepted values |
|---|---|---|---|
invertMobile | boolean | false | – |
invertDesktop | boolean | false | – |
alignTop | boolean | false | – |
imageFill | boolean | false | – |
vue
| Prop | Type | Default | Accepted values |
|---|---|---|---|
invert-mobile | boolean | false | – |
invert-desktop | boolean | false | – |
align-top | boolean | false | – |
image-fill | boolean | false | – |