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ソース

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

 

サンプルのCSSソース

  1. #sample01,#sample02,
  2. #sample03,#sample04 {
  3. display:none;
  4. }
  5. #sample01 div,#sample02 div,
  6. #sample03 div,#sample04 div {
  7. width:800px;
  8. margin:0 auto;
  9. padding:8px 10px 10px;
  10. text-align:left;
  11. color:#444;
  12. background:#fff;
  13. }
  14. /*「column-count」について、実際にはベンダープレフィックス付きも記載しています */
  15. #sample02 div {
  16. column-count: 2;
  17. }
  18. #sample03 div {
  19. column-count: 3;
  20. }
  21. #sample04 div {
  22. column-count: 4;
  23. }
  24. #sample01:target,#sample02:target,
  25. #sample03:target,#sample04:target {
  26. display:block;
  27. }
戻るボタン