カラム内でのカラム割

メインカラム内でさらにカラム割をする際に使用する(X)HTMLです。

2分割(1:1)

スクリーンショット

サンプルソース

<div class="multicolumn2-11">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn2-11 --></div>

3分割(1:1:1)

スクリーンショット

サンプルソース

<div class="multicolumn3-111">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn3-111 --></div>

2分割(1:2)

スクリーンショット

サンプルソース

<div class="multicolumn2-12">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn2-12 --></div>

2分割(2:1)

スクリーンショット

サンプルソース

<div class="multicolumn2-21">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn2-21 --></div>

4分割(1:1:1:1)

スクリーンショット

サンプルソース

<div class="multicolumn4-1111">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn4-1111 --></div>

3分割(1:1:2)

スクリーンショット

サンプルソース

<div class="multicolumn3-112">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn3-112 --></div>

3分割(1:2:1)

スクリーンショット

サンプルソース

<div class="multicolumn3-121">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn3-121 --></div>

3分割(2:1:1)

スクリーンショット

サンプルソース

<div class="multicolumn3-211">
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column1">
内容
<!-- /.column1 --></div>
<div class="column2">
内容
<!-- /.column2 --></div>
<!-- /.multicolumn3-211 --></div>