sdlabs.jp

ウェブの基本は情報の共有

CSS3勉強会のフォローアップ其の2

time 2014/02/18

CSS3勉強会のフォローアップ其の2

勉強会のフォローアップ続きです。

マルチカラムレイアウト

column-width カラム幅

カラムひとつ分の幅を指定します。

.column01{
     width:500px;
     -webkit-column-width:24px;
     -moz-column-width:240px;
     column-width:240px;
     border:1px solid #000;
     color:#666;
}
<div class="column01">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-count カラム数

カラムの数を指定します。
幅は自動的に計算されて表示されます。

.column02{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     border:1px solid #000;
     color:#666;
}
<div class="column02">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-gap カラム間の幅

カラム間の幅を指定します。

.column03{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:100px;
     -moz-column-gap:100px;
     column-gap:100px;
     border:1px solid #000;
     color:#666;
}
<div class="column03">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-rule カラム間の境界線

カラム間の境界線をボーダープロパティと同じように指定できます。

.column04{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:100px;
     -moz-column-gap:100px;
     column-gap:100px;
     -webkit-column-rule:#666 solid 1px;
     -moz-column-rule:#666 solid 1px;
     column-rule:#666 solid 1px;
     border:1px solid #000;
     color:#666;
}
<div class="column04">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

マルチカラムレイアウトまとめ

マルチカラムレイアウトを使った段組みのサンプルです。
2段組み、間隔30px、境界線付き。

.column05{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:30px;
     -moz-column-gap:30px;
     column-gap:30px;
     -webkit-column-rule:#666 solid 1px;
     -moz-column-rule:#666 solid 1px;
     column-rule:#666 solid 1px;
     border:1px solid #000;
     padding:1em;
     text-align:justify;
     color:#666;
}
<div class="column05">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

down

コメントする




アーカイブ

最近のコメント