何年もの間、CSSの浮動小数点は、ウェブサイトのレイアウトを作成する際に、まだまだ複雑でありながらも必要なコンポーネントでした。 デザインで複数の列が呼び出された場合は、浮動小数点数に変わります 。 この方法の問題点は、Webデザイナーや開発者が複雑なサイトレイアウトを作成する際に驚くべき工夫をしていたにもかかわらず、CSS浮動小数点は実際にはこのように使用されることは決してないということです。
浮動小数点数とCSSの配置は、今後数年間Webデザインの分野を確実にしていますが、CSS GridやFlexboxなどの新しいレイアウト手法は、Webデザイナーにサイトレイアウトを作成する新しい方法を提供しています。 潜在的に多くを示す別の新しいレイアウトテクニックは、CSSの複数の列です。
CSS Columnsは数年前から存在していましたが、古いブラウザ（主に旧バージョンのInternet Explorer）ではサポートが不足しているため、多くのWeb専門家が制作作業にこれらのスタイルを使用することができませんでした。
これらの古いバージョンのIEのサポートが終了すると、一部のWebデザイナーは新しいCSSレイアウトオプション、CSS Columnsをテストしています。
CSS列の基本
その名前が示すように、CSS複数列（CSS3複数列レイアウトとも呼ばれます）では、コンテンツを設定された数の列に分割できます。 使用する最も基本的なCSSプロパティは次のとおりです。
- 列カウント
- 列ギャップ
列数については、必要な列数を指定します。 列のギャップは、それらの列間の溝または間隔になります。 ブラウザはこれらの値を使用して、指定した列数にコンテンツを均等に分割します。
実際のCSS複数列の一般的な例は、新聞記事で見られるようなテキストコンテンツのブロックを複数の列に分割することです。 次のHTMLマークアップがあるとします（実際には、このマークアップには複数の段落の内容が存在する可能性がありますが、例としては1段落の先頭にしています）。
あなたの記事の見出しここにテキストの段落をたくさん想像してみてください。
このCSSルールは、コンテンツの分割を3つの等しい列に分割し、それらの間に30ピクセルのギャップを設けます。 3つではなく2つの列が必要な場合は、その値を変更するだけです。ブラウザは、列の新しい幅を計算してコンテンツを均等に分割します。 ベンダー接頭辞付きのプロパティーを最初に使用し、接頭辞なしの宣言を使用することに注意してください。
これほど簡単ではありませんが、この方法での使用はウェブサイトでの使用に疑問があります。 はい、複数の列に複数のコンテンツを分割することはできますが、特に、これらの列の高さが画面の「折りたたみ」を下回っている場合、これはWebにとって最高の読書体験ではありません。
読者は完全な内容を読むために上下にスクロールする必要があります。 それでも、CSS Columnsのプリンシパルはここで見ているように簡単ですし、いくつかの段落の内容を分割するだけでなく、実際にはレイアウトに使用することができます。
CSS列によるレイアウト
3列のコンテンツを持つコンテンツエリアを持つウェブページを持っているとします。 これは非常に典型的なウェブサイトのレイアウトであり、これらの3つの列を実現するためには、通常、複数の列を含む浮動小数点数を浮動させることになります。
HTMLのサンプルをいくつか紹介します：
最新ニュース
>
今後の予定
コンテンツはここに行きます。
p>
これらの複数の列を作成するCSSは、以前に見たものから始まります：
.content {-moz-column-count：3; -webkit-column-count：3; 列カウント：3; -moz-column-gap：30px; -webkit-column-gap：30px; 列ギャップ：30px; }ここでの課題は、ブラウザがこのコンテンツを均等に分割したいので、これらの部門のコンテンツの長さが異なる場合、そのブラウザは実際には個々の部門のコンテンツを分割し、1つの列にその先頭を追加し、次にこのコードを使用して実験を実行し、各部門内でさまざまな長さのコンテンツを追加することでこれを確認できます。
それはあなたが望むものではありません。 これらの部門のそれぞれが明確な列を作成し、個々の部門のコンテンツがどんなに大きくても小さくても、それを分割することは決してありません。 これを実現するには、次の1行のCSSを追加します。
.content div {display：インラインブロック; }これにより、ブラウザがこれを複数の列に分割しても、 "コンテンツ"の内側にある部分は元のままになります。 さらにここでは固定幅を指定していないため、ブラウザのサイズが変更されると自動的にサイズが変更され、 レスポンシブウェブサイトに最適なアプリケーションになります 。 その "インラインブロック"スタイルが整っていると、3つの部門のそれぞれが別個のコンテンツの列になります。
列幅の使用
あなたが使うことができる "列数"以外のプロパティがあり、あなたのレイアウトのニーズに応じて、実際にはあなたのサイトのためのより良い選択かもしれません。 これは「列幅」です。 前に示したのと同じHTMLマークアップを使用して、代わりにCSSでこれを行うことができます：
.content {-moz-column-width：500px; -webkit-column-width：500px; 列幅：500ピクセル。 -moz-column-gap：30px; -webkit-column-gap：30px; 列ギャップ：30px; } .content div {display：インラインブロック; }これが動作する方法は、ブラウザがこの「列幅」をその列の最大値として使用することです。 したがって、ブラウザウィンドウの幅が500ピクセル未満の場合、これらの3つの区画は、別の列の上端の1つの列に表示されます。 これは、モバイル/スモールスクリーンレイアウトに使用される典型的なレイアウトです。
ブラウザーの幅が指定された列のギャップとともに2列に収まるように大きくなると、ブラウザーは自動的に1列のレイアウトから2列に移動します。 画面の幅を増やし続けると、最終的に3列のデザインが得られ、それぞれの3つの部門がそれぞれの列に表示されます。 繰り返しますが、これは応答性の高いマルチデバイス対応のレイアウトを作成するのに最適な方法です。レイアウトスタイルを変更するためにメディアクエリを使用する必要もありません。
その他の列のプロパティ
ここで扱うプロパティに加えて、列間にルールを作成できるようにする色、スタイル、幅の値など、「列ルール」のプロパティもあります。 列をいくつかの行に分けたい場合は、罫線の代わりにこれらを使用します。
実験までの時間
現在、CSS複数列レイアウトは非常によくサポートされています。 接頭辞を使用すると、ウェブユーザーの94％以上がこれらのスタイルを見ることができ、サポートされていないグループは実際にはInternet Explorerの旧バージョンとなります。
このレベルのサポートが導入されているため、CSS Columnsを試用したり、これらのスタイルを実稼働環境に適したWebサイトに配置したりする必要はありません。 この記事で紹介したHTMLとCSSを使用して実験を開始し、さまざまな値で遊んで、サイトのレイアウトニーズに最も適したものを確認できます。