CSS3 カラム・マルチカラム・レイアウト入門_html/css_WEB-ITnose

CSS3 は、複数列レイアウト用の新しい属性列を提供します。これまでは、誰もが慣れ親しんでいた一部のレイアウトは、CSS を使用して動的に実装するのが実際には困難でした。たとえば、縦型の新聞

列の属性について知る前の私の最初の反応は次のとおりでした。「これは、さらにいくつかの並列 div を作成するだけで、どれほど難しいのでしょう?」 ？しかし、よく考えてみると、コンテンツは動的であるため、これを達成するのは非常に困難です。複数の div を作成するのは簡単ですが、各 div にどれくらいのテキストを配置する必要がありますか?記事のどの行と段落を別の div に分割する必要がありますか?コードの再利用性が低すぎるため、各テキストの特定の場所に div タグを挿入することは絶対に避けてください。 column 属性はこの問題を完全に解決し、テキストを変更する場所をブラウザーに決定させます。各列の幅と列数を指定するだけです。

まず列とそのサブプロパティを見てみましょう:

• column-width
• column-count
• column-gap
• column-rule
• column-span
• column-fill

column-width列の最小幅を定義します。デフォルト値は auto です。これは、column-count 列の数に応じて列幅が自動的に調整されることを意味します。

column-count列の最大数。詳細はありません。

通常、上記の 2 つのパラメータを組み合わせて列で指定します。たとえば、 columns: auto 4; は上の図の効果で、div を 4 つの列に分割し、div の幅 640px に応じて、平均の列幅は 160px になります (実際には 160px 未満です)。列間隔も変わりません)。コードは次のとおりです。

.wrapper {    -moz-columns: auto 4;    -webkit-columns: auto 4;    columns: auto 4;}<div class="wrapper">...大段文字…</div>

上記の実装は単純すぎます。次に、より柔軟な使用方法を見てみましょう。上の例では、外側の div の幅は 640px に固定されているため、計算された列の幅も固定されます。ブラウザ ウィンドウのサイズをどのように変更しても、4 列は固定されます。これでは柔軟性が不十分なようです。

ウィンドウのサイズに合わせて調整したい場合は、ウィンドウが狭くなるにつれて 4 列から 1 列に徐々に変更し、ウィンドウが広くなるにつれて 1 列から 4 列に徐々に変更します。まず、外側の div を固定幅 width: 640px; から動的幅 width: 50%; に変更する必要があります。次に、columns-width を同時に auto にすることはできません。そうしないと、列幅は div の動的な幅に基づいて取得され、依然として 4 列に固定されます。したがって、 columns-width は固定値である必要があります。ここをクリックして効果を試し、ブラウザ ウィンドウを拡大することができます。

column-gap は列間隔で、デフォルト値は Normal で、1em に相当します。なお、column-gapとcolumn-widthの合計が幅の合計よりも大きい場合、column-countで指定した列数を表示できず、列数と幅はブラウザによって自動調整されます。

column-rule は、border と同様に、列の境界線を設定するために使用されます。違いは、スペースを占有しないため、column-rule を設定しても列は発生しません。変更する幅。また、境界線の幅が列間の列間隔よりも大きい場合、境界線は表示されません。構文は、たとえば、column-rule: 1px Solid #000; のように、border と似ています。効果についてはサンプルページをご覧ください。

column-span は列をまたぐために使用され、デフォルト値 none は列をまたがないことを意味し、all はすべての列をまたぐことを意味します。たとえば、記事のタイトルを all に設定して複数の列にまたがることができます。効果については、サンプルページを参照してください。

column-fill は列の高さを統一するために使用されます。 auto のデフォルト値では、各列の高さがコンテンツに合わせて自動的に調整され、バランスのすべての列の高さが最も高い列の高さに設定されます。

概要

columns 属性の最大の問題です。ブラウザの互換性については、「使用できますか」を参照してください。また、垂直配置は今のところ多くの場所で使用されておらず、この属性が Flash を普及させることができるかどうかはまだ疑問です。イントラネットにそのようなニーズがある場合でも、非常に使いやすいです。