ユニットモジュール

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

ユニット .unit

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

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

カラム

カラム

カラム

カラム

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

カラム cols-1of2

.cols-last は古いIE対策。IE9以降は不要?。

3分割

cols には unit を一緒につけます。

カラム cols-1of3

カラム

カラム

カラム

カラム

cols には unit を一緒につけます。

カラム cols-1of3

カラム

カラム

カラム

カラム

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

カラム cols-1of3

.cols-last は古いIE対策。IE9以降は不要?。

4分割

cols には unit を一緒につけます。

カラム cols-1of4

カラム

カラム

カラム

カラム

cols には unit を一緒につけます。

カラム cols-1of4

カラム

カラム

カラム

カラム

カラム

cols には unit を一緒につけます。

カラム cols-1of4

カラム

カラム

カラム

カラム

カラム

カラム cols-1of4

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

.cols-last は古いIE対策。IE9以降は不要?。

変則2分割

cols には unit を一緒につけます。cols には unit を一緒につけます。cols には unit を一緒につけます。cols には unit を一緒につけます。cols には unit を一緒につけます。cols には unit を一緒につけます。cols には unit を一緒につけます。cols には unit を一緒につけます。

カラム cols-3of4

カラム

カラム

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

.cols-last は古いIE対策。IE9以降は不要?。

カラム cols-1of4

変則3分割

カラム

カラム cols-1of4

cols には unit を一緒につけます。

カラム cols-1of2

カラム

カラム

カラム

カラム

カラム cols-1of4

カラム

.cols-last は古いIE対策。IE9以降は不要?。

回り込み画像 .float_media

1/2画像右回り込み

サンプル画像

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

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

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

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

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

1/3画像右回り込み

サンプル画像

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

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

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

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

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

1/4画像右回り込み

サンプル画像

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

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

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

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

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

1/2画像左回り込み

サンプル画像

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

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

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

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

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

1/3画像左回り込み

サンプル画像

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

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

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

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

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

1/4画像左回り込み

サンプル画像

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

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

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

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

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

本文部分を矩形に保つ

サンプル画像

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

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

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

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

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

サムネイルリスト .thumb_list

ページャー .pager

フォーム .form_buttons

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

送信系ボタン

キャンセルボタン

エラー通知ボックス .form_error_box

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

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

<前へ | 次へ>

次期バージョン Pickles 2 を公開しました。もっと詳しく