項 目 | 説 明 |
---|---|
記述形式 | セレクタ {column-gap: 値 } |
値 の形式 | 数値 (長さ) | normal |
初 期 値 | normal |
対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+ |
適用可能な要素 | 段組を指定した要素 |
継 承 | しない |
column-gap プロパティ は,段組の 段の間隔 を指定します。 段と段の間に 区切り線(column rule) がある場合には,この間隔の中央位置に表示されます。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
normal | ブラウザーごとの既定値を使用します。 (初期値) |
数値(長さ) | 段の間隔を数値で指定します。 |
数値による指定は,次のような単位を付けて可能です。
単位 | 説 明 |
---|---|
px | px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
em | em とは現在使用中の標準フォントの高さを1とする単位です。 |
ex | ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。 |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.mc32 { width: 40em; height: 9.2em; column-count: 3; column-gap: 1em; border: solid blue 3px; } div.mc33 { width: 40em; height: 9.2em; column-count: 3; column-gap:2.5em; border: solid blue 3px; } --> </style> |
HTML <body> ~ </body> |
<div>column-gap: 1em; の場合</div> <div class="mc32"> <p>他のプロパティの値に基づき段数を決めます。 (初期値) <br>たとえば,column-width が auto 以外の値の場合には, それに基づいて段数を決定します。</p> <p>段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。</p> </div> <br> <div>column-gap:2.5em; の場合</div> <div class="mc33"> <p>他のプロパティの値に基づき段数を決めます。 (初期値) <br>たとえば,column-width が auto 以外の値の場合には, それに基づいて段数を決定します。</p> <p>段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。</p> </div> |
ブラウザー 表示例 |
---|
column-gap: 1em; の場合
他のプロパティの値に基づき段数を決めます。 (初期値)
段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。 column-gap:2.5em; の場合
他のプロパティの値に基づき段数を決めます。 (初期値)
段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。 |