CSSのみで「column-count」による文章のカラム数(1から4)を切り替えます。切り替えには、CSS3の:target疑似クラスを使っています。次のリンクをクリックすると、:target疑似クラスにより、「display:none」の個々の要素を「display:block」に変更して「サンプル」に表示します。

1カラムで表示   2カラムで表示   3カラムで表示   4カラムで表示 

サンプル

これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。
これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。
これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。
これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。

サンプルのhtmlソース

<p>
  <a href="#sample01">1カラムで表示 </a> 
  <a href="#sample02">2カラムで表示 </a> 
  <a href="#sample03">3カラムで表示 </a> 
  <a href="#sample04">4カラムで表示 </a>
</p>
<div class="sample-wrap">
  <p>サンプル</p>
  <div id="sample01">
    <div>
    これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。
    /*---- 中略 ----*/
    これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。
    </div>
  </div>
  /*---- 以下、id="sample02"から id="sample04"まで同じものが続きます ----*/
</div>

 

サンプルのCSSソース

#sample01,#sample02,
#sample03,#sample04 {
  display:none;
  }
#sample01 div,#sample02 div,
#sample03 div,#sample04 div {
  width:800px;
  margin:0 auto;
  padding:8px 10px 10px; 
  text-align:left;
  color:#444;
  background:#fff;
  }
/*「column-count」について、実際にはベンダープレフィックス付きも記載しています */
#sample02 div {
  column-count: 2; 
  }
#sample03 div {
  column-count: 3; 
  }
#sample04 div {
  column-count: 4; 
  }
#sample01:target,#sample02:target,
#sample03:target,#sample04:target {
  display:block;
  }
戻るボタン