【CSS3】マルチカラムサンプル

by tea4two

HTML

<section>
    <h2>台風３号、東日本中心に断続的な雨　上陸の恐れほぼなし</h2>
    <p>日本の南の海上を北東に進んでいる台風３号の影響で、１２日午前は近畿から関東にかけての太平洋側で１時間に５ミリ前後の雨がふった。気象庁によると、台風の勢力は弱まり、上陸する恐れもほぼなくなったが、移動速度は時速１０キロ程度と遅くなっている。そのため、東日本を中心に、１３日ごろまでは雨が断続的に降る状況が続きそうだという。</p>
    
    <p>ヮ(ﾟдﾟ)ォ!</p>
    
    <p>そのため「早めの作業、早めの帰宅」などと叫ぶ上司が各地に出没している。</p>
    
    <h2>校内で生徒とマージャン」再調査　大阪市が抗議受け</h2>
    <p>大阪市立中学校の男性教諭が校内で生徒とマージャンをしていた、と発表した市監察部の調査結果について、学校側が「事実関係に誤りがある」と抗議している。監察部は「生徒ではなく４０代の教え子だった」と一部の誤りを認めて謝罪したが、ほかにも事実誤認の指摘があり、監察部は１０日から再調査を始めた。</p>

</section>

CSS

section {
    width: 600px;
    margin: auto;
    
    /* カラム数 
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;*/
    
    /* 幅でカラム数を自動計算(3つになる) 
    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;*/
    
    /* カラムの指定をまとめる(150pxで3段になるところ、２段で指定) */
    columns: 150px 2;
    -webkit-columns: 150px 2;
    -moz-columns: 150px 2;
    
    /* カラムの間隔 */
    column-gap: 50px;
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    
    /* カラム間のボーダー */
    column-rule: 2px solid yellowgreen;
    -webkit-column-rule: 2px solid yellowgreen;
    -moz-column-rule: 2px solid yellowgreen;
}
h2 {
    background: yellowgreen;
    font-size: 120%;
    color: #fff;
    margin: 0;padding: 0;
}