コラムレイアウト - CSS | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
いくつかのコラム（列、段）を含むレイアウトを作成する必要があることがよくあります。 CSS にはこれを行うためのいくつかの方法があります。段組み、フレックスボックス、グリッドのどのレイアウトを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらの選択肢について説明します。
コラムで達成したいと思うかもしれないデザインパターンがいくつかあります。
達成する要件に応じて、異なるレイアウトメソッドを選択する必要があります。
段組みレイアウト (multi-column layout) を使用して段を作成した場合、テキストは連続した流れのまま、それぞれの段を順番に埋めます。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。
column-gap または gap プロパティを使用して段間の幅を制御したり、column-rule を使用して段間に線を追加したりすることができます。
以下のコードブロックの "Play" をクリックすると、この例を MDN Playground で開きます。
この例では、column-width プロパティを使用して、ブラウザーが追加の列を追加する前に、列が満たすべき最小幅を設定しました。columns 一括指定プロパティを使用することで、column-width プロパティと column-count プロパティを設定できます。これらはどちらも、許可される段の最大数を定義することができます。
次のような場合には、段組みを使用してください。
フレックスボックスを使用すると、親要素をフレックスコンテナーにするために display: flex; を設定することで、コンテンツをコラムに分割することができます。このプロパティを 1 つ追加するだけで、すべての子要素（子要素、擬似要素、テキストノード）が 1 行に並ぶフレックスアイテムになります。同じ flex という一括指定プロパティに 1 つの値を設定すると、利用できる空間が均等に配分されます。通常、折り返されないコンテンツによってアイテムが大きくなるような要素がない限り、すべてのフレックスアイテムは同じサイズになります。
マージンや gap プロパティを使用することで、アイテム間に隙間を作成することはできますが、現時点では、フレックスアイテムの間に区切り線を追加する CSS プロパティは存在しません。
フレックスアイテムが新しい行に折り返されるレイアウトを作成するには、コンテナーの flex-wrap プロパティを wrap に設定します。それぞれのフレックス行は、その行の空間のみを配分することに注意してください。次の例で分かるように、ある行のアイテムは、必ずしも他の行のアイテムと揃うとは限りません。これが、フレックスボックスが「一次元」と説明される所以です。フレックスボックスは、行または列としてのレイアウトを制御するために設計されており、両方を同時に制御するようには設計されていません。
フレックスボックスは次のような場合に使用します。
アイテムを行と列に並べる二次元グリッドを作成したい場合は、CSSグリッドレイアウトを選択すべきです。フレックスボックスがフレックスコンテナーの直接の子要素に対して機能するのと同様に、グリッドレイアウトはグリッドコンテナーの直接の子要素に対して機能します。コンテナーに display: grid;を設定するだけです。このコンテナーに設定されたプロパティ（grid-template-columns や grid-template-rows など）によって、アイテムが行と列に沿ってどのように配置されるかが定義されます。
以下のコードブロックの "Play" をクリックすると、この例を MDN Playground で開きます。
次のような場合には、グリッドを使用します。
このページは 2026年4月29日 に MDN の貢献者によって最終更新されました。
このコンテンツの一部は、©1998–2026 個人の mozilla.org 協力者です。コンテンツはクリエイティブ・コモンズ・ライセンスのもとで利用できます。