初心者向けのCSSマルチカラムレイアウトチュートリアル

CSSの概要マルチカラムレイアウトチュートリアル：キーポイント

• CSSマルチコラムレイアウトモジュールにより、開発者はレスポンシブマルチコラムレイアウトを作成でき、さまざまな画面サイズで良い結果を生み出すことができます。 column-count属性は列の数を指定し、column-width属性は各列の幅を指定します。どちらもautoまたは正の数値に設定でき、略語columns属性を使用して同時に設定できます。
• column-gap属性は列の間隔を指定し、column-rule属性は略式されているため、列間に仕切りを追加できます。 column-fill属性は、コンテンツが列を埋めるように割り当てられる方法を決定し、column-span属性は要素が複数の列に及ぶ方法を制御します。
• レイアウトがすべての画面サイズに適切に表示されるためには、column-countとcolumn-widthの両方を指定する必要があります。メディアクエリを使用すると、水平スクロールや過度の列の長さなどの問題を解決することができます。マルチコラム機能をサポートしていないレガシーブラウザは、単一列のレイアウトにエレガントに格下げされます。

長いテキスト行は読むのがより面倒である可能性があり、読者はテキストコンテンツ自体ではなく、非混乱線にもっと注意を払っています。この問題は、マルチコラムレイアウトを使用して簡単に解決できます。マルチカラムレイアウトは、印刷メディアで非常に一般的です。 CSSマルチコラムレイアウトモジュールの機能により、Webサイトで同じマルチコラム効果を再現できます。

Webデザインでマルチコラムレイアウトを使用することの難しさの1つは、ドキュメントサイズを制御できないことです。このチュートリアルでは、さまざまな画面サイズでうまく機能するレスポンシブマルチカラムレイアウトを作成する方法をお勧めします。基本から始めて、より複雑な概念を徐々に学びます。

ブラウザサポート

プレフィックスを使用する意思がある場合、マルチカラムレイアウトのブラウザサポートは非​​常に優れています。 can I Webサイトの統計によると、この機能は世界中のブラウザの95.32％でサポートされています。一部のブラウザ（IE10、Edge、Opera Miniなど）は、マルチカラムレイアウトを完全にサポートしています。 FirefoxやChromeなどの他のブラウザにはプレフィックスが必要です。

古いブラウザ（通常はIE9以下）をサポートする必要がある場合は、古いポリフィルを使用できます。もちろん、ブラウザがマルチコラム関数をサポートしていない場合、レイアウトは単一列のレイアウトにエレガントに格下げされます。したがって、この場合、ポリフィルは最良の選択肢ではないかもしれません。

CSSマルチコラムレイアウトモジュールには、さまざまなプロパティがあります。次のセクションでは、それらを1つずつ紹介します。

列の数と列幅

column-count属性は、要素に設定される列の数を指定します。 autoまたは正の数に設定できます。 autoに設定すると、列の数はcolumn-width属性によって決定されます。正の数に設定すると、すべての列に等しい幅が等しくなります。

column-width属性は、要素の各列の幅を指定します。これは厳密に守られていません。たとえば、利用可能なスペースが不十分な場合、列が狭くなる可能性があります。このプロパティは、autoに設定されている場合、幅はauto属性によって決定されます。空きスペースは、すべての列に均等に分布しています。 column-count

または、略語

属性を使用して両方の値を同時に設定できます。 columns属性の構文は次のとおりです。 columns

このプロパティのいくつかの使用例を以下に示し、各例の横にある説明とともに：

.example {
  columns:  || 
}

ご覧のとおり、最初の

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

定義は4番目の略語であり、2番目の定義は3番目の略語です。基本的に、整数がユニットを割り当てない場合、それは

に解析されます。 columns column-countこれは、これまでに説明されている機能を実証するためのCodepenデモンストレーションです

ウィンドウをサイズ変更すると、次のことがわかります。

プロパティは、常に列の数を指定した値に等しくします。変更されるのは、列の幅です。

• column-count属性は、使用可能なスペースに基づいて列の数を自動的に変更します。列の数は、指定された値よりも列幅を大きくすることで調整されます。また、空きスペースが不十分な場合、すべての列の幅をより小さな値に調整することもできます。
• column-width属性は、許可されている列の最大数の制限として
値を使用します。
• がカウント制限を超えないように幅を調整し、columnsは指定された幅にも非常に近くにあります。 column-count column-count column-width
列の間隔と列ルール

属性を使用すると、列間のスペースの量を指定できます。

または長さの値に設定できます。ゼロになる可能性がありますが、負ではありません。

に設定すると、ブラウザで定義された列間のデフォルトの間隔を使用します。 column-gap normalnormal属性は、列間に仕切りを追加できる略語です。これは、

または

属性を使用することに似ています。このプロパティは、次の構文に従います column-rule の場合、幅を長さ（たとえばborder-left）として指定するか、キーワード（border-right、

、または

.example {
  column-rule:  ||  || 
}

ログイン後にコピー

、

、column-rule-width、3pxなどの値を受け入れます。 thin属性のすべての有効な値をmediumを使用することができます。 thick column-rule-styleこれは、これらのプロパティが一緒に使用されるCodepenデモですdashed dottedsolid列の塗りつぶしと列のスパンborder-stylecolumn-rule-style column-rule-color

属性は、列に入力するコンテンツを割り当てる方法を決定します。このプロパティは、

または

に設定できます。

に設定すると、列が順番に入力されます。 を使用して、コンテンツがすべての列に均等に分散されていることを確認します。

列要素に固定された高さを設定する場合、Firefoxはコンテンツのバランスを自動的にバランスさせることに注意することが重要です。ただし、他のブラウザは列の順番に整理を開始します。

column-span属性は、要素が複数の列に及ぶ方法を制御します。 2つの可能な値があります：allまたはnone。 allに設定すると、要素はすべての列に及びます。このプロパティはFirefoxではサポートされていません。

これは、すべての列にわたってブロッククォート要素を「拡大」するCodepenデモンストレーションです

Firefoxでは、BlockQuoteが中央の列に終わります。これは許容可能なフォールバックかもしれません。

複数の列を使用してレスポンシブレイアウトを作成します

さまざまなプロパティと考えられる値について学んだので、レイアウトをレスポンシブでユーザーフレンドリーに保つ方法に焦点を当てましょう。

およびcolumn-countには、独自の問題があります。 column-widthは、大規模なデバイス上の列の数を制御できますが、小さなデバイスのレイアウトは中断されます。同様に、column-countは、小さなデバイスで列が狭くないことを保証しますが、より大きなデバイスで多くの列になります。 column-width

すべての画面サイズにレイアウトが適切に表示されることを確認するには、

とcolumn-countの両方を指定する必要があります。これにより、列の幅と数を制御できます。ただし、次に説明するいくつかの問題を修正する必要がある場合があります。 column-width

Horizo​​ntal Scrollingを修正<」

列に固定された高さを指定すると、ビューポートを縮小すると、水平スクロールバーが表示されます。コンテンツを垂直に拡張できないため、水平に成長します。この問題を解決するために、ブラウザのサイズを変更して、水平面のスクロールバーが初めてどの程度幅が表示されるかを確認できます。その後、メディアクエリを使用して、その幅の下の列の高さを

に設定できます。これを行うコードは次のとおりです

autoこのCodepenデモンストレーションは、問題と可能な解決策を示しています

.example {
  columns:  || 
}

ウィンドウをサイズ変更して、両方の例がどのように反応するかを確認します。

列が長すぎる

を修正しました

列が長すぎる場合、ユーザーはすべてを読むために上下にスクロールし続ける必要があります。列の高さがビューポートの高さ自体よりも大きい場合、複数の列を削除するのが最善です。これは、メディアクエリを使用して再度実行できます

この場合、ビューポート幅がユーザーが上下にスクロールする必要がなくなると、複数の列を使用します。

複数の列とメディアクエリを備えたデモを表示

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

結論

CSSマルチコラムレイアウトモジュールのこの入門チュートリアルが、この機能に慣れることを願っています。これらのプロパティは、レスポンシブデザインツールボックスにうまく追加できます。古いブラウザをサポートする必要がある場合は、複数の列を単一の列にエレガントに格下げします。 CSSマルチカラムレイアウトのFAQ

faq

CSSでマルチカラムレイアウトを作成する方法は？ CSSでマルチカラムレイアウトを作成するのは非常に簡単です。

プロパティを使用して、レイアウトで必要な列の数を指定できます。たとえば、3つの列が必要な場合は、次のように書くことができます。

.example {
  columns:  || 
}

この例では、

は、列に分割する要素のクラスです。 .container属性は、要素のコンテンツを指定された列の数に自動的に分割します。 column-count

CSSの列間の間隔を制御する方法は？

プロパティを使用すると、列間のスペースを制御できます。このプロパティに設定した値は、ギャップの幅になります。たとえば、列間に20pxのギャップが必要な場合は、次のように書くことができます。 column-gap

CSSで異なる幅の列を作成できますか？

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

残念ながら、CSSマルチコラムレイアウトモジュールは、異なる幅の列をサポートしていません。

属性で作成されたすべての列には同じ幅があります。ただし、FlexBoxやグリッドなどの他のCSS技術を使用して、異なる幅の列を作成できます。

column-count CSSの列幅を制御する方法は？

属性を使用して、列の幅を制御できます。このプロパティは、列の最適な幅を指定しますが、ブラウザは必要に応じてコンテンツに適合するために幅を調整します。たとえば、列の幅を200pxに設定するには、次のことを書くことができます。

column-width CSSで列ルールを作成する方法は？

.example {
  column-rule:  ||  || 
}

プロパティを使用すると、列間にルールまたはラインを作成できます。ルールの幅、スタイル、色を指定できます。たとえば、1px Solid Blackルールを作成するには、次のように書くことができます。

CSSで列割り込みを制御する方法は？ column-rule

.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}

プロパティを使用すると、列割り込みを制御できます。このプロパティを

に設定して、要素内の割り込みを防ぐことができます。たとえば、

break-insideレスポンシブデザインでマルチコラムレイアウトを使用できますか？ avoid

はい、レスポンシブデザインを備えたマルチコラムレイアウトを使用できます。メディアクエリを使用して、ビューポート幅に基づいて列数を調整できます。たとえば、小さな画面に1つの列と大きな画面に3つの列を表示することをお勧めします。

@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}

CSSに列を入力する方法は？

デフォルトでは、列は順番に入力されます。これは、最初の列を最初に記入し、次に2番目の列などに記入することを意味します。ただし、この動作を

属性を使用して変更できます。このプロパティを

に設定すると、ブラウザは列を均等に入力しようとします。

列を渡る方法は？ column-fill balance

属性により、要素が複数の列に及ぶことができます。このプロパティをすべての列に及ぼすようにこのプロパティを

に設定できます。たとえば、

column-spanCSSマルチコラムレイアウトにブラウザ互換性の問題はありますか？ all

ほとんどの最新のブラウザはCSSマルチカラムレイアウトをサポートしていますが、実装にはいくつかの違いがあるかもしれません。レイアウトを別のブラウザでテストして、予想どおりに機能することを確認するのが最善です。また、さまざまなCSSプロパティのブラウザサポートを確認するために使用できるツールを使用することもできます。

.container {
  column-count: 3;
}

以上が初心者向けのCSSマルチカラムレイアウトチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。