ユニットモジュール

ユニットモジュールは、水平貫通(コンテンツ領域に対して幅100%)の矩形ブロックで、上下に適切なマージンを与えられた概念です。パーツモジュールを内包する入れ物のような役割を果たします(ただし、ユニットモジュール内にユニットモジュールを配置することはできません)。端末の状態(スクリーンの幅など)に合わせて、スタイルが変化する場合があります。

INDEX

ユニット .unit
カラムレイアウト .cols
- 2分割
- 3分割
- 4分割
- 5分割
- 変則2分割
- 変則3分割
回り込み画像 .float_media
サムネイルリスト .thumb_list
ページャー .pager
フォーム .form_buttons
- 送信系ボタン
- キャンセルボタン
エラー通知ボックス .form_error_box

ユニット .unit

すべてのユニットモジュールの基本となるユニットです。レイアウト上のまとまり1つ分をくくるコンテナで、標準仕様では、前後に一定のマージンが与えられ、回り込みが解除されます。

ユニットの共通仕様を共有するため、他のユニットモジュールは .unit を併記する前提で設計されます。(例：<div class="cols unit">～～～</div>)

.unit は、それ単体でも使用することができますが、パーツモジュールは必ずしもユニットモジュールに収められている必要はありません。

<div class="unit">
	{$parts|box}
</div><!-- /.unit -->

カラムレイアウト .cols

カラムレイアウトは、.cols モジュールで、2分割、3分割、4分割のレイアウトを吸収します。.cols をコンテナとして、カラム要素 .cols-1of2(2分割)、.cols-1of3(3分割)、.cols-1of4(4分割)を組み合わせて入れ子にして表現します。異なる幅のカラムを組み合わせて使用することもできます。例えば、.cols-1of4, .cols-1of2, .cols-1of4 の順に入れ子にする、などです。幅の合計が100%になるように調整されていればよいだけです。

※商品やバナーなどのリスト用途の場合、.thumb_list を使用してください。
※.cols に限らず、古いブラウザで :last-child を適用させたい要素につけるクラス名は、慣例として *-last としてください。

2分割

.cols には .unit を併記します。

このカラムは、.cols-1of2 でマークアップされた2分割サイズのカラムです。

最後のカラムには、.cols-last を併記します。

このカラムは、.cols-1of2 でマークアップされた2分割サイズのカラムです。

<div class="cols unit">
	<div class="cols-col cols-1of2"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of2 cols-last"><div class="cols-pad">
		{$parts|box}
	</div></div>
</div><!-- / .cols -->

3分割

.cols には .unit を併記します。

このカラムは、.cols-1of3 でマークアップされた3分割サイズのカラムです。

.cols には .unit を併記します。

このカラムは、.cols-1of3 でマークアップされた3分割サイズのカラムです。

最後のカラムには、.cols-last を併記します。

このカラムは、.cols-1of3 でマークアップされた3分割サイズのカラムです。

<div class="cols unit">
	<div class="cols-col cols-1of3"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of3"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of3 cols-last"><div class="cols-pad">
		{$parts|box}
	</div></div>
</div><!-- / .cols -->

4分割

.cols には .unit を併記します。

このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。

.cols には .unit を併記します。

このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。

.cols には .unit を併記します。

このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。

最後のカラムには、.cols-last を併記します。

このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。

<div class="cols unit">
	<div class="cols-col cols-1of4"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of4"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of4"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of4 cols-last"><div class="cols-pad">
		{$parts|box}
	</div></div>
</div><!-- / .cols -->

5分割

.cols には .unit を併記します。

このカラムは、.cols-1of5 でマークアップされた5分割サイズのカラムです。

.cols には .unit を併記します。

このカラムは、.cols-1of5 でマークアップされた5分割サイズのカラムです。

.cols には .unit を併記します。

このカラムは、.cols-1of5 でマークアップされた5分割サイズのカラムです。

.cols には .unit を併記します。

このカラムは、.cols-1of5 でマークアップされた5分割サイズのカラムです。

最後のカラムには、.cols-last を併記します。

このカラムは、.cols-1of5 でマークアップされた5分割サイズのカラムです。

<div class="cols unit">
	<div class="cols-col cols-1of5"><div class="cols-pad">
		<p><code>.cols</code> には <code>.unit</code> を併記します。</p>
		<p>このカラムは、<code>.cols-1of5</code> でマークアップされた5分割サイズのカラムです。</p>
	</div></div>
	<div class="cols-col cols-1of5"><div class="cols-pad">
		<p><code>.cols</code> には <code>.unit</code> を併記します。</p>
		<p>このカラムは、<code>.cols-1of5</code> でマークアップされた5分割サイズのカラムです。</p>
	</div></div>
	<div class="cols-col cols-1of5"><div class="cols-pad">
		<p><code>.cols</code> には <code>.unit</code> を併記します。</p>
		<p>このカラムは、<code>.cols-1of5</code> でマークアップされた5分割サイズのカラムです。</p>
	</div></div>
	<div class="cols-col cols-1of5"><div class="cols-pad">
		<p><code>.cols</code> には <code>.unit</code> を併記します。</p>
		<p>このカラムは、<code>.cols-1of5</code> でマークアップされた5分割サイズのカラムです。</p>
	</div></div>
	<div class="cols-col cols-1of5 cols-last"><div class="cols-pad">
		<p>最後のカラムには、<code>.cols-last</code> を併記します。</p>
		<p>このカラムは、<code>.cols-1of5</code> でマークアップされた5分割サイズのカラムです。</p>
	</div></div>
</div><!-- / .cols -->

変則2分割

.cols には .unit を併記します。

このカラムは、.cols-3of4 でマークアップされた4分割サイズが3つ分のカラムです。分割の単位は1/4ですが、そのうちの3つを結合するような、均等割賦ではない場合に使用します。

最後のカラムには、.cols-last を併記します。

このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。

<div class="cols unit">
	<div class="cols-col cols-3of4"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of4 cols-last"><div class="cols-pad">
		{$parts|box}
	</div></div>
</div><!-- / .cols -->

変則3分割

.cols には .unit を併記します。

このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。

.cols には .unit を併記します。

このカラムは、.cols-1of2 でマークアップされた2分割サイズのカラムです。分割単位としては1/4ですが、そのうち2つを結合したサンプルです。均等割賦ではない場合に使用します。

最後のカラムには、.cols-last を併記します。

このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。

<div class="cols unit">
	<div class="cols-col cols-1of4"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of2"><div class="cols-pad">
		{$parts|box}
	</div></div>
	<div class="cols-col cols-1of4 cols-last"><div class="cols-pad">
		{$parts|box}
	</div></div>
</div><!-- / .cols -->

回り込み画像 .float_media

1/2画像右回り込み

キャプションテキスト。キャプションテキスト。キャプションテキスト。

ここは本文ブロックです。このサンプルは、半分の幅で右に回りこむ画像をレイアウトするものです。

ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。

<div class="unit float_media">
	<div class="float_media-r1of2">
		<div class="float_media-image"><img src="{$string}" alt="{$string}" /></div>
		<p class="float_media-caption">{$string}</p>
	</div>
	<div class="float_media-body">
		{$parts|box}
	</div>
</div><!-- /.float_media -->

1/3画像右回り込み

キャプションテキスト。キャプションテキスト。キャプションテキスト。

ここは本文ブロックです。このサンプルは、33%の幅で右に回りこむ画像をレイアウトするものです。

<div class="unit float_media">
	<div class="float_media-r1of3">
		<div class="float_media-image"><img src="{$string}" alt="{$string}" /></div>
		<p class="float_media-caption">{$string}</p>
	</div>
	<div class="float_media-body">
		{$parts|box}
	</div>
</div><!-- /.float_media -->

1/4画像右回り込み

キャプションテキスト。キャプションテキスト。キャプションテキスト。

ここは本文ブロックです。このサンプルは、25%の幅で右に回りこむ画像をレイアウトするものです。

<div class="unit float_media">
	<div class="float_media-r1of4">
		<div class="float_media-image"><img src="{$string}" alt="{$string}" /></div>
		<p class="float_media-caption">{$string}</p>
	</div>
	<div class="float_media-body">
		{$parts|box}
	</div>
</div><!-- /.float_media -->

1/2画像左回り込み

キャプションテキスト。キャプションテキスト。キャプションテキスト。

ここは本文ブロックです。このサンプルは、半分の幅で左に回りこむ画像をレイアウトするものです。

<div class="unit float_media">
	<div class="float_media-l1of2">
		<div class="float_media-image"><img src="{$string}" alt="{$string}" /></div>
		<p class="float_media-caption">{$string}</p>
	</div>
	<div class="float_media-body">
		{$parts|box}
	</div>
</div><!-- /.float_media -->

1/3画像左回り込み

キャプションテキスト。キャプションテキスト。キャプションテキスト。

ここは本文ブロックです。このサンプルは、33%の幅で左に回りこむ画像をレイアウトするものです。

<div class="unit float_media">
	<div class="float_media-l1of3">
		<div class="float_media-image"><img src="{$string}" alt="{$string}" /></div>
		<p class="float_media-caption">{$string}</p>
	</div>
	<div class="float_media-body">
		{$parts|box}
	</div>
</div><!-- /.float_media -->

1/4画像左回り込み

キャプションテキスト。キャプションテキスト。キャプションテキスト。

ここは本文ブロックです。このサンプルは、25%の幅で左に回りこむ画像をレイアウトするものです。

<div class="unit float_media">
	<div class="float_media-l1of4">
		<div class="float_media-image"><img src="{$string}" alt="{$string}" /></div>
		<p class="float_media-caption">{$string}</p>
	</div>
	<div class="float_media-body">
		{$parts|box}
	</div>
</div><!-- /.float_media -->

本文部分を矩形に保つ

キャプションテキスト。キャプションテキスト。キャプションテキスト。

ここは本文ブロックです。このサンプルは、25%の幅で左に回りこむ画像をレイアウトするものです。本文部分を矩形に保ちたい場合(画像を回り込ませたくない場合)は、本文部分のサブクラスを、 .float_media-body から .float_media-body_rect に変更します。

<div class="unit float_media">
	<div class="float_media-l1of4">
		<div class="float_media-image"><img src="{$string}" alt="{$string}" /></div>
		<p class="float_media-caption">{$string}</p>
	</div>
	<div class="float_media-body_rect">
		{$parts|box}
	</div>
</div><!-- /.float_media -->

サムネイルリスト .thumb_list

<div class="unit thumb_list">
	<ul>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><a href="{$string}"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></a></div></li>
		<li><div class="thumb_list-pad"><img src="{$string}" alt="{$string}" /><span class="thumb_list-caption">{$string}</span></div></li>
	</ul>
</div><!-- /.thumb_list -->

ページャー .pager

<div class="unit pager">
	<ul>
		<li class="pager-first"><span>&lt;&lt;最初</span></li>
		<li class="pager-prev"><span>&lt;前へ</span></li>
		<li><span class="current">{$string}</span></li>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a></li>
		<li class="pager-next"><a href="{$string}">次へ&gt;</a></li>
		<li class="pager-last"><a href="{$string}">最後&gt;&gt;</a></li>
	</ul>
</div><!-- /.pager -->

フォーム .form_buttons

フォームエレメント系のモジュールは、パーツモジュールとして設計されています。
パーツモジュールのページを参照してください。

送信系ボタン

キャンセルボタン

エラー通知ボックス .form_error_box

主に、入力エラーを検出したフォーム画面の先頭で、エラー内容をユーザーへ通知する目的で使用することを想定したものです。

次のエラーがありました。

お名前を入力してください。
パスワードは8文字以上で入力してください。

<div class="unit form_error_box">
	<p>{$string}</p>
	<ul>
		<li><a href="#{$string}">{$parts}</a></li>
		<li>{$parts}</li>
	</ul>
</div><!-- /.form_error_box -->