段のスタイル設定

段組みコンテナー内に作られた段ボックスは無名ボックスなので、それぞれの段に個別にスタイルを設定することはできませんが、段の間隔とコンテナーには一般的にスタイルが設定できます。このガイドは、段の間隔および段間罫をスタイル付けする方法を説明します。

段の間隔

段の間隔 (段間) は、 column-gap または gap プロパティで制御されます。 column-gap プロパティは段組みレイアウトモジュールで定義されています。 gap プロパティはボックス配置モジュールで定義されています。これは、 CSS グリッドレイアウトや CSS フレックスボックスレイアウトなど、間隔に対応しているすべてのレイアウトで、ボックス間の間隔を定義するための統一プロパティです。

段組みにおける column-gap の初期値は 1em です。つまり、段同士は互いに接しません。他のレイアウト方法では、 column-gap は gap の別名として対応していますが、初期値は 0 です。キーワード値 normal は、column-gap を初期値に設定します。

段間はいずれかの <length> 値を使用して、変更することができます。以下の例では、 column-gap は 40px に設定されます。

html

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-gap: 40px;
}

column-gap に許されている値は <length-percentage> です。つまり、パーセント値を使用することができます。 column-gap のパーセント値は、段組みコンテナーの幅に対するパーセント値として計算されます。

段間罫

仕様書では column-rule-width, column-rule-style, column-rule-color と、一括指定の column-rule を定義しています。これらのプロパティは、 border プロパティとまったく同じように動作します。有効な border-style と同様に、任意の <line-style> 値が column-rule-style で使用できます。

これらのプロパティは段組みコンテナーである要素に適用されるため、すべての段に同じ段間罫が引かれます。段間罫は段同士の間にのみ引かれ、外の辺には引かれません。段間罫は内容のある段の間にのみ引かれます。

次の例は、幅 5px の点線の段間罫を rebeccapurple の色で、個別指定を使用して作成しています。

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-rule-width: 5px;
  column-rule-style: dotted;
  column-rule-color: rebeccapurple;
}

なお、段間罫自体は空間を占有しません。段間罫が太くなっても、段間が広がることはありません。その代わりに、段間罫が段間と重なります。

次の例では、とても太い 40px の段間罫を 10px の段間に引いています。段間罫は段の内容の下に表示されます。段間罫の両側に��隔を作るには、 gap を 40px より大きくする必要があるでしょう。

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko.
  </p>
</div>

css

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-gap: 10px;
  column-rule: 40px solid rebeccapurple;
}

まとめ

ここでは、現在段ボックスに対してスタイル付けすることができるすべての方法を説明しました。次のガイドでは、コンテナー内ですべての段をまたがる要素の作成を見てみましょう。