範囲を12分割して左にフロートさせることができます。
1:1(均等2分割)に分けたい場合の例
例えば1:1に分けたい場合は、6+6=12なので以下のようにテキストモード状態で書きます。
最後、フロートを終わらせたい場所にclを入れてください。
<div class=”col-6″ >2分割カラム分けテストです。2分割カラム分けテストです。</div>
<div class=”col-6″ >2分割カラム分けテストです。2分割カラム分けテストです。</div>
<div class=”cl” ></div>
<div class=”col-6″ >2分割カラム分けテストです。2分割カラム分けテストです。</div>
<div class=”cl” ></div>
2分割カラム分けテストです。2分割カラム分けテストです。
2分割カラム分けテストです。2分割カラム分けテストです。
1:1:1(均等3分割)に分けたい場合
例えば1:1:1に分けたい場合は、4+4+4=12なので以下のように書きます。
<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”cl” ></div>
<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”col-4″ >3分割カラム分けテストです。3分割カラム分けテストです。</div>
<div class=”cl” ></div>
3分割カラム分けテストです。3分割カラム分けテストです。
3分割カラム分けテストです。3分割カラム分けテストです。
3分割カラム分けテストです。3分割カラム分けテストです。
1:2に分けたい場合
例えば1:2に分けたい場合は、4+8=12なので以下のように書きます。
<div class=”col-4″ >1:2に分けたい場合は、4+8=12なので以下のように書きます</div>
<div class=”col-8″ >1:2に分けたい場合は、4+8=12なので以下のように書きます</div>
<div class=”cl” ></div>
<div class=”col-8″ >1:2に分けたい場合は、4+8=12なので以下のように書きます</div>
<div class=”cl” ></div>
1:2に分けたい場合は、4+8=12なので以下のように書きます
1:2に分けたい場合は、4+8=12なので以下のように書きます
ショートコードを併用して使ってみる
ショートコードを併用して使ってみると表現のバリエーションが広がります。
囲みタイトル
囲みテキスト
囲みタイトル
囲みテキスト
カラー背景テキスト
カラー背景テキスト
カラー背景テキスト
囲みタイトル
囲みテキスト
囲みタイトル
囲みテキスト