ほんっとにはじめてのHTML5とCSS3

CSSの column-widthプロパティのサンプルです。
PCブラウザではウィンドウの幅を変えて見てください。

＜サンプル1＞ column-width: 15em

HTMLはこちら。

<div class="sample1">
<p>column-widthを使って各カラムの幅を15emにしたサンプルです。<br>
PCサイトではウィンドウ幅を広げるとカラム数が増えていきます。横幅の狭いスマホで
見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔（column-gapプロパティ）は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら。

.sample1 {
	margin:2em 0;
	border:solid 1px #ccc;
	padding:1em;
    background:#ffc;
	-webkit-column-width:15em; /*古いブラウザ用*/
	column-width:15em}
.sample1 p {
	text-indent:1em;
	line-height:1.4em;
	margin:1.3em 0 0}
.sample1 p:first-child {margin:0}

＜サンプル2＞ column-width: 300px

HTMLはこちら

<div class="sample2">
<p>column-widthを使って各カラムの幅を300pxにしたサンプルです。<br>
PCサイトではこちらもウィンドウ幅を広げるとカラム数が増えていきます。
横幅の狭いスマホで見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔（column-gapプロパティ）は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら

.sample2 { /*要点のみ。他の指定はsample1と同じです*/
	-webkit-column-width:300px; /*古いブラウザ用*/
	column-width:300px}

＜サンプル3＞ column-width: 40vw

HTMLはこちら

<div class="sample3">
<p>column-widthを使って各カラムの幅を40vwにしたサンプルです。<br>
PCサイトではウィンドウ幅が広い場合は2カラム、狭い場合は1カラムになります。
横幅の狭いスマホで見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔（column-gapプロパティ）は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら

.sample3 { /*要点のみ。他の指定はsample1と同じです*/
	-webkit-column-width:40vw; /*古いブラウザ用*/
	column-width:40vw}