[CSS3]column-countで紙面デザインのようなテキストレイアウトにしてみよう




5ヶ月ぶりの更新ですの。
サボってたわけじゃないの。
これには話せば長~~~くなるようなストーリーがありまして・・・。

という訳で入院生活から復活第1弾はcolumn-countいっちゃうよ!

よく紙面デザインで文章が2段、3段と段組してるアレです。
デモを作ったよ。

CSS

p {
	column-count:3;
	-moz-column-count:3;
    -webkit-column-count:3;
}

以上。

IEは?

IEはバージョン10以降ならOKです。

まとめ

デモのサンプル文章を読んだ方少ないと思いますが、読んでみると何やらワードのことが書かれてますね。
ワードで「=rand(A,B)」と入力してエンター叩いてみよう!
Aは段落の数でBは段落の行数

ワードの勉強のできるなんてステキなブログですね!

タイトルとURLをコピーしました