マルチカラム

賢威8では、特定の領域を横に2~6つに分割できるマルチカラムのCSSを用意しています。

以下は、それぞれのカラム数に合わせた表示例とCSSです。

※表示例では、わかりやすいよう以下のようにクラス「outline」「p10」を適用して、カラムの周りに枠、内側に余白を追加しています。そのため、実際にはこの余白と枠線は表示されません。

6カラム

横幅を6つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「6カラム」→「3カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

5カラム

横幅を5つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「5カラム」→「2カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

4カラム

横幅を4つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「4カラム」→「2カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

3カラム

横幅を3つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「3カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

2カラム

横幅を3つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「2カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

余白無しのバージョン

上記は、テキストなどは入っても見づらくならないよう、カラムとカラムの間に余白を設けていましたが、以下のように、余白を除いたものも用意しています。
画像を隙間なく並べるなど、余白が不要な時に便利です。

6カラム(余白無し)

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

5カラム(余白無し)

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

4カラム(余白無し)

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

3カラム(余白無し)

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。

2カラム(余白無し)

テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。