ITコース CSS基礎 030_マルチカラムレイアウト Columns

マルチカラムレイアウト Columns

Columns（カラム）は、テキストレイアウトで複数の列を作成するために使用されるプロパティです。コンテナの列数と列幅を設定することで、テキストコンテンツが複数の列の間を自動的に流れるようになります。Columns（カラム）はすべてのタイプのコンテンツに適しているわけではなく、主にテキストコンテンツのマルチカラムレイアウトに使用され、ページ全体のレイアウトには使用されません。

column-count：列の数を指定します。
column-width：各列の幅を指定します。
column-gap：列間のギャップを指定します。
column-rule：列間のルールライン（区切り線）を設定します。

例：

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>これは段落111です、これは段落111です、これは段落111です。</p>
3
        <p>これは段落222です、これは段落222です、これは段落222です。</p>
4
        <p>これは段落333です、これは段落333です、これは段落333です。</p>
5
    </div>

効果：

例の効果

マルチカラムレイアウト Columns

コメント