賢威8では、特定の領域を横に2～6つに分割できるマルチカラムのCSSを用意しています。
以下は、それぞれのカラム数に合わせた表示例とCSSです。
※表示例では、わかりやすいよう以下のようにクラス「outline」「p10」を適用して、カラムの周りに枠、内側に余白を追加しています。そのため、実際にはこの余白と枠線は表示されません。
|
1 2 3 4 |
<div class="col2-wrap"> <div class="col p10 outline">テキストが入ります。テキストが入ります。</div> <div class="col p10 outline">テキストが入ります。テキストが入ります。</div> </div> |
6カラム
横幅を6つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「6カラム」→「3カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 7 8 |
<div class="col6-wrap"> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> </div> |
5カラム
横幅を5つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「5カラム」→「2カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 7 |
<div class="col5-wrap"> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> </div> |
4カラム
横幅を4つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「4カラム」→「2カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 |
<div class="col4-wrap"> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> </div> |
3カラム
横幅を3つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「3カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 |
<div class="col3-wrap"> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> </div> |
2カラム
横幅を3つに分け並べて表示できます。
ウィンドウ幅が小さくなることで、「2カラム」→「1カラム」とカラム数が減り、その分縦に並ぶようになります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 |
<div class="col2-wrap"> <div class="col">テキストが入ります。テキストが入ります。</div> <div class="col">テキストが入ります。テキストが入ります。</div> </div> |
余白無しのバージョン
上記は、テキストなどは入っても見づらくならないよう、カラムとカラムの間に余白を設けていましたが、以下のように、余白を除いたものも用意しています。
画像を隙間なく並べるなど、余白が不要な時に便利です。
6カラム（余白無し）
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 7 8 |
<div class="col6-wrap"> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> </div> |
5カラム（余白無し）
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 7 8 |
<h3>5カラム（余白無し）</h3> <div class="col5-wrap"> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> </div> |
4カラム（余白無し）
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 7 |
<h3>4カラム（余白無し）</h3> <div class="col4-wrap"> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> </div> |
3カラム（余白無し）
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 |
<h3>3カラム（余白無し）</h3> <div class="col3-wrap"> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> </div> |
2カラム（余白無し）
テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。
|
1 2 3 4 5 |
<h3>2カラム（余白無し）</h3> <div class="col2-wrap"> <div class="col_ns">テキストが入ります。テキストが入ります。</div> <div class="col_ns">テキストが入ります。テキストが入ります。</div> </div> |
