ユニットモジュールは、水平貫通(コンテンツ領域に対して幅100%)の矩形ブロックで、上下に適切なマージンを与えられた概念です。パーツモジュールを内包する入れ物のような役割を果たします(ただし、ユニットモジュール内にユニットモジュールを配置することはできません)。端末の状態(スクリーンの幅など)に合わせて、スタイルが変化する場合があります。
すべてのユニットモジュールの基本となるユニットです。レイアウト上のまとまり1つ分をくくるコンテナで、標準仕様では、前後に一定のマージンが与えられ、回り込みが解除されます。
ユニットの共通仕様を共有するため、他のユニットモジュールは .unit を併記する前提で設計されます。(例：<div class="cols unit">～～～</div>)
.unit は、それ単体でも使用することができますが、パーツモジュールは必ずしもユニットモジュールに収められている必要はありません。
カラムレイアウトは、.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 としてください。.cols には .unit を併記します。
このカラムは、.cols-1of2 でマークアップされた2分割サイズのカラムです。
最後のカラムには、.cols-last を併記します。
このカラムは、.cols-1of2 でマークアップされた2分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-1of3 でマークアップされた3分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-1of3 でマークアップされた3分割サイズのカラムです。
最後のカラムには、.cols-last を併記します。
このカラムは、.cols-1of3 でマークアップされた3分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。
最後のカラムには、.cols-last を併記します。
このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。
.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分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-3of4 でマークアップされた4分割サイズが3つ分のカラムです。分割の単位は1/4ですが、そのうちの3つを結合するような、均等割賦ではない場合に使用します。
最後のカラムには、.cols-last を併記します。
このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。
.cols には .unit を併記します。
このカラムは、.cols-1of2 でマークアップされた2分割サイズのカラムです。分割単位としては1/4ですが、そのうち2つを結合したサンプルです。均等割賦ではない場合に使用します。
最後のカラムには、.cols-last を併記します。
このカラムは、.cols-1of4 でマークアップされた4分割サイズのカラムです。
キャプションテキスト。キャプションテキスト。キャプションテキスト。
ここは本文ブロックです。このサンプルは、半分の幅で右に回りこむ画像をレイアウトするものです。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
キャプションテキスト。キャプションテキスト。キャプションテキスト。
ここは本文ブロックです。このサンプルは、33%の幅で右に回りこむ画像をレイアウトするものです。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
キャプションテキスト。キャプションテキスト。キャプションテキスト。
ここは本文ブロックです。このサンプルは、25%の幅で右に回りこむ画像をレイアウトするものです。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
キャプションテキスト。キャプションテキスト。キャプションテキスト。
ここは本文ブロックです。このサンプルは、半分の幅で左に回りこむ画像をレイアウトするものです。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
キャプションテキスト。キャプションテキスト。キャプションテキスト。
ここは本文ブロックです。このサンプルは、33%の幅で左に回りこむ画像をレイアウトするものです。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
キャプションテキスト。キャプションテキスト。キャプションテキスト。
ここは本文ブロックです。このサンプルは、25%の幅で左に回りこむ画像をレイアウトするものです。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
キャプションテキスト。キャプションテキスト。キャプションテキスト。
ここは本文ブロックです。このサンプルは、25%の幅で左に回りこむ画像をレイアウトするものです。本文部分を矩形に保ちたい場合(画像を回り込ませたくない場合)は、本文部分のサブクラスを、 .float_media-body から .float_media-body_rect に変更します。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。ここは本文ブロック。
サムネイルラベル(リンクしない場合の例)
フォームエレメント系のモジュールは、パーツモジュールとして設計されています。
パーツモジュールのページを参照してください。
主に、入力エラーを検出したフォーム画面の先頭で、エラー内容をユーザーへ通知する目的で使用することを想定したものです。
次のエラーがありました。