段組み

段組するのにお手軽なCSS。

2段組

HTML

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）

CSS

.dgm2{
    /* Safari Chrome */
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    /* Firefox */
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    /* CSS */
    column-count: 2;
    column-gap: 10px;
}

3段組

HTML

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）

CSS

.dgm3{
    /* Safari Chrome */
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    /* CSS */
    column-count: 3;
    column-gap: 10px;
}