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;
- }