::column はCSS の擬似要素で、CSS 段組みレイアウトによってコンテナーのコンテンツを複数の段で表示するように設定した場合に生成される、個々の段を表します。::column 擬似要素を使用すると、レイアウトに影響を与えないスタイルを、これらの生成された断片に適用することができます。

構文

::column {  /* ... */}

解説

CSS の段組みレイアウトを使用してコンテナーのコンテンツを複数の段にレイアウトした場合（例えば、column-count プロパティを使用した場合）、それぞれの段を含む::column 擬似要素が生成されます。

::column 擬似要素は、スクロールコンテナー内の要素に適用されるスクロールスナッププロパティ（scroll-margin,scroll-snap-align, andscroll-snap-stop など）のみを受け付けます。

::column 擬似要素は、::scroll-marker 擬似要素を持つことができます。::before や::after などのその他の擬似要素は、::column では生成されません。::column::scroll-marker を適用すると、元のスクロールコンテナーのすべての段にマーカーが作成され、::scroll-marker 擬似要素は、::column 擬似要素そのものではなく、::column 擬似要素の元の要素から継承されます。

これはCSS カルーセルで役立ちます。::column を使用して、それぞれの段の::scroll-marker 擬似要素を生成し、それらをスナップターゲットとしてCSS スクロールスナップを使用するよう設定することができます。

::column に適用できるスタイル設定はとても制限されていますが、将来は拡大される可能性があります。将来対応されるプロパティおよび値は、レイアウトに影響を与えないものに限定されます。

例

段組みレイアウトのスクロール

このデモでは、コンテンツのそれぞれの「ページ」を所定の位置にスナップする、レスポンシブなコンテナーを作成します。columns プロパティと::column 擬似要素を使用して、親スクロールコンテナーの全幅にまたがるコンテンツの段を作成します。この列は水平方向にスクロールできます。それぞれの段には 1 つ以上のリスト項目が含まれ、その数はビューポートの幅によって異なります。

HTML

HTML は、順序なしリストで構成されており、それぞれのリストアイテムにはサンプルコンテンツが含まれています。

<ul>...  <li>    <h2>アイテム 1</h2>  </li>...</ul>

<ul>  <li>    <h2>アイテム 1</h2>  </li>  <li>    <h2>アイテム 2</h2>  </li>  <li>    <h2>アイテム 3</h2>  </li>  <li>    <h2>アイテム 4</h2>  </li>  <li>    <h2>アイテム 5</h2>  </li>  <li>    <h2>アイテム 6</h2>  </li>  <li>    <h2>アイテム 7</h2>  </li>  <li>    <h2>アイテム 8</h2>  </li>  <li>    <h2>アイテム 9</h2>  </li>  <li>    <h2>アイテム 10</h2>  </li>  <li>    <h2>アイテム 11</h2>  </li>  <li>    <h2>アイテム 12</h2>  </li>  <li>    <h2>アイテム 13</h2>  </li>  <li>    <h2>アイテム 14</h2>  </li>  <li>    <h2>アイテム 15</h2>  </li></ul>

CSS

リストは、height が固定されており、ビューポートの全幅に広がるようにwidth が100vw に指定されています。次に、コンテンツが水平方向にスクロールするようにoverflow-x 値にscroll を設定し、CSS スクロールスナップを使用してそれぞれのアイテム、すなわち「ページ」へスナップするようにします。scroll-snap-type にx mandatory を使用して、リストをスクロールスナップコンテナーにします。最後に、columns の値を1 に設定して、リストのコンテンツを単一の列として表示するように強制します。また、text-align の値にcenter を適用して、コンテンツをリストの中央に配置します。

* {  box-sizing: border-box;}body {  margin: 0;  font-family: "Helvetica", "Arial", sans-serif;}

ul {  width: 100vw;  height: 300px;  padding: 10px;  overflow-x: scroll;  scroll-snap-type: x mandatory;  columns: 1;  text-align: center;}

次に、リストアイテムのスタイルを設定します。

• display の値をinline-block に設定して、リストアイテムが横に並んだ状態で、リストが水平方向にスクロールするようにします。
• width とheight に固定値を設定します。
• text-align の値をleft を設定して、親コンテナーに設定されているtext-align: center を上書きし、アイテムのコンテンツを左揃えにします。
• 偶数のリストアイテムには、:nth-child() によって異なる背景色を指定し、スクロール効果がわかりやすくします。

li {  list-style-type: none;  display: inline-block;  height: 100%;  width: 200px;  text-align: left;  background-color: #eeeeee;  outline: 1px solid #dddddd;  padding: 0 20px;  margin: 0 10px;}li:nth-child(even) {  background-color: cyan;}

scroll-snap-align プロパティを、columns プロパティによって生成されるコンテンツの段を表す::column 擬似要素に設定します。これにより、スクロールすると、段はスクロールコンテナーの中央にスナップされます。

ul::column {  scroll-snap-align: center;}

結果

スクロールマーカー付き段ベースのカルーセル

前の例を拡張して、様々な段へ直接移動できるようにスクロールマーカーを作成します。scroll-marker-group をコンテナーに、::scroll-marker をそれぞれの::column 擬似要素に適用します。 HTML は変更しません。

CSS

scroll-marker-group プロパティを使用してスクロールマーカーグループを作成し、そのグループをすべてのコンテンツの後に配置します。

ul {  scroll-marker-group: after;}

次に、::scroll-marker-group 擬似要素にスタイルを適用して、各スクロールマーカーを0.4em の間隔を入れて行の中央にレイアウトします。

::scroll-marker-group {  display: flex;  gap: 0.4em;  place-content: center;}

最後に、::scroll-marker 擬似要素を使用して、黒い境界線のある丸い透明なマーカーを各リストアイテムに作成し、:target-current 擬似クラスを使用して、現在スクロールされている要素のマーカーを他の要素とは異なるスタイルに設定します。

ul::column::scroll-marker {  content: "";  width: 16px;  height: 16px;  background-color: transparent;  border: 2px solid black;  border-radius: 10px;}ul::column::scroll-marker:target-current {  background-color: black;}

結果

スクロールマーカーを押して、各ページに直接移動してみてください。現在のマーカーが強調表示されていることに注意してください。これにより、ページ内の現在の位置を確認することができます。また、スクロールマーカーグループまでタブキーを押してから、カーソルキーを使用して各ページを順番に表示してみてください。

他のカルーセルの例は、CSS によるカルーセルの作成を参照してください。

仕様書

ブラウザーの互換性

関連情報

• columns
• ::scroll-marker
• ::scroll-marker-group
• :target-current
• CSS によるカルーセルの作成
• CSS 段組みレイアウトモジュール
• CSS オーバーフローモジュール
• CSS Carousel Gallery (chrome.dev, 2025)