CSS3: column-gap プロパティ - 段組の段の間隔

■ 概要

項  目説  明
記述形式 セレクタ {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とする単位です。

■ 使用例( column-gap プロパティの利用)

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; の場合

他のプロパティの値に基づき段数を決めます。 (初期値)
たとえば,column-width が auto 以外の値の場合には, それに基づいて段数を決定します。

段組の段数 を 1 以上の整数で指定します。  もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。


column-gap:2.5em; の場合

他のプロパティの値に基づき段数を決めます。 (初期値)
たとえば,column-width が auto 以外の値の場合には, それに基づいて段数を決定します。

段組の段数 を 1 以上の整数で指定します。  もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。

■ 備考

【参考ページ】