複数列の Web サイト レイアウトに CSS 列を使用する方法
目次拡大長年、 CSS フロート は、Web サイトのレイアウトを作成する上で、気難しいが必要なコンポーネントでした。デザインに複数の列が必要な場合は、フロートを使用します。この方法の問題点は、Web デザイナー/開発者が複雑なサイトを作成する際に示した信じられないほどの創意工夫にもかかわらず、 レイアウト 、CSS float は、実際にはこのように使用されることを意図したものではありませんでした。
フロートと CSS ポジショニングは、今後何年にもわたって Web デザインに取り入れられることは確実ですが、CSS Grid や Flexbox などの新しいレイアウト技術により、Web デザイナーはサイト レイアウトを作成する新しい方法を手に入れることができます。多くの可能性を示すもう 1 つの新しいレイアウト手法は、CSS Multiple Columns です。
CSS 列は数年前から存在していますが、古いブラウザー (主に Internet Explorer の古いバージョン) でのサポートの欠如により、多くの Web 専門家が制作作業でこれらのスタイルを使用できなくなりました。
これらの古いバージョンの IE のサポートが終了したため、一部の Web デザイナーは現在、CSS 列を含む新しい CSS レイアウト オプションを試しており、フロートよりもこれらの新しいアプローチの方がはるかに多くの制御が可能であることを発見しています。
CSS 列の基本
その名前が示すように、CSS Multiple Columns (別名 CSS3 複数列レイアウト) を使用すると、コンテンツを設定した数の列に分割できます。使用する最も基本的な CSS プロパティは次のとおりです。
- 列数
- 列の隙間
column-count には、必要な列の数を指定します。列のギャップは、それらの列の間の溝または間隔になります。ブラウザーはこれらの値を取得し、指定した列数にコンテンツを均等に分割します。
実際の CSS の複数列の一般的な例は、テキスト コンテンツのブロックを複数の列に分割することです。これは、新聞記事で見られるものと似ています。次の HTML マークアップがあるとします (例として、ここでは 1 つの段落の開始のみを示していますが、実際には、このマークアップにはコンテンツの複数の段落が含まれている可能性があります)。
|_+_|あなたの記事の見出し
ここにたくさんの段落のテキストがあると想像してください...
これらの CSS スタイルを記述した場合:
|_+_|
この CSS ルールは、コンテンツの分割を 30 ピクセルの間隔で 3 つの等しい列に分割します。 3 列ではなく 2 列が必要な場合は、その値を変更するだけで、ブラウザーはそれらの列の新しい幅を計算してコンテンツを均等に分割します。最初にベンダー接頭辞付きのプロパティを使用し、その後に接頭辞なしの宣言を使用していることに注意してください。
これは簡単ですが、この方法での使用は Web サイトでの使用には問題があります。はい、コンテンツの束を複数の列に分割することはできますが、特にこれらの列の高さが画面のフォールドより下にある場合、これは Web にとって最適な読書体験ではない可能性があります。
読者は、コンテンツ全体を読むために上下にスクロールする必要があります。それでも、CSS 列の原理はここで説明したように簡単で、いくつかの段落のコンテンツを分割するだけでなく、実際にレイアウトにも使用できます。
CSS 列を使用したレイアウト
3 列のコンテンツを持つコンテンツ領域を持つ Web ページがあるとします。これは非常に一般的な Web サイトのレイアウトであり、これらの 3 つの列を実現するには、通常、分割されている部分をフロートします。CSS の複数列を使用すると、非常に簡単になります。
サンプル HTML を次に示します。
|_+_|私たちのブログから
ここにコンテンツが入ります…
今後のイベント
ここにコンテンツが入ります…
これらの複数の列を作成する CSS は、前に見たものから始まります。
|_+_|ここでの課題は、ブラウザがこのコンテンツを均等に分割したいということです。したがって、これらの分割のコンテンツの長さが異なる場合、ブラウザは実際に個々の分割のコンテンツを分割し、その開始を 1 つの列に追加してから続行します。 (これは、このコードを使用して実験を実行し、各分割内に異なる長さのコンテンツを追加することで確認できます)。
それはあなたが望むものではありません。これらの部門ごとに個別の列を作成する必要があり、個々の部門のコンテンツがどれほど大きくても小さくても、決して分割したくありません。これを実現するには、次の 1 行の CSS を追加します。
|_+_|これにより、ブラウザーがこれを複数の列に分割しても、コンテンツ内にある分割はそのまま残ります。さらに良いことに、ここでは固定幅を何も指定していないため、これらの列はブラウザーのサイズ変更に合わせて自動的にサイズ変更され、理想的なアプリケーションになります。 レスポンシブ Web サイト .インライン ブロック スタイルを適用すると、3 つの部門のそれぞれがコンテンツの個別の列になります。
列幅の使用
column-count 以外にも使用できるプロパティがあり、レイアウトのニーズによっては、実際にはサイトにより適した選択になる場合があります。これは列幅です。前に示したものと同じ HTML マークアップを使用して、代わりに CSS でこれを行うことができます。
|_+_|これが機能する方法は、ブラウザがこの列幅をその列の最大値として使用することです。したがって、ブラウザ ウィンドウの幅が 500 ピクセル未満の場合、これら 3 つの分割は 1 つの列に表示され、1 つの列が別の列の上に表示されます。これは、モバイル/小さな画面のレイアウトに使用される典型的なレイアウトです。
ブラウザーの幅が大きくなり、指定された列のギャップに合わせて 2 列が収まるようになると、ブラウザーは自動的に 1 列のレイアウトから 2 列のレイアウトになります。画面の幅を広げ続けると、最終的には 3 列のデザインになり、3 つの部門がそれぞれの列に表示されます。繰り返しますが、これは反応を得るための素晴らしい方法です。 マルチデバイスフレンドリー レイアウトを使用する必要さえありません メディアクエリ レイアウトスタイルを変更するには！
その他の列のプロパティ
ここで説明するプロパティに加えて、列間のルールを作成できる色、スタイル、幅の値など、列ルールのプロパティもあります。列を区切る線が必要な場合は、境界線の代わりにこれらを使用します。
実験する時間
現在、CSS Multiple Column Layout は十分にサポートされています。プレフィックスを使用すると、Web ユーザーの 94% 以上がこれらのスタイルを表示できます。サポートされていないグループは、実際にはサポートされなくなった Internet Explorer のかなり古いバージョンになります。
このレベルのサポートが提供されるようになったので、CSS 列の実験を開始し、これらのスタイルを本番対応の Web サイトに展開することを開始しない理由はありません。この記事で紹介した HTML と CSS を使用して実験を開始し、さまざまな値を試して、サイトのレイアウトのニーズに最適なものを確認できます。