CSSマルチコラムレイアウトの再訪

私の最初の本であるCSSを超越している

を超えて以来、20年近くが過ぎており、当時のマルチコラムレイアウトモジュールを探りました。 更新された、自由に利用可能なオンラインバージョンCSSの転写 仕様ギャップ

マルチコラムレイアウトは、長い間、大きな制限に苦しみ、引き続き持っています。 レイチェル・アンドリュー（現在の仕様エディター）が5年前に強調したように、個々の列ボックスの直接スタイリングは不可能です。 JavaScriptの操作または背景、パディング、およびマージンの調整は利用できません。そして、すべての列は均一にサイズのままです。 列のルールのみがスタイリングオプションを提供します。

これは真実のままです。

を使用してバックグラウンドカラーを交互にするなどの選択的スタイリングは不可能です。列のルールでは、

バリエーション（破線、点線、固体、溝、尾根）が許可されていますが、ほぼ同時に導入されていることを考えると、:nth-column()サポートが存在しないことが不可解です。 これらの欠陥は存在しますが、この貴重なツールの広範な無視を完全に説明していません。 border-style履歴ブラウザの矛盾border-image

古いブラウザは、サポートされていない列のプロパティを無視することがよくあります。 ただし、マルチコラムレイアウトの早期採用は、クロスブラウザーの一貫性が多くの開発者にとって最重要な関心事ではなかった期間と一致しました。 特にコンテンツブレークに関しては、最初のブラウザのサポートは一貫していませんでしたが、最新のブラウザは現在広範囲に互換性があります。しかし、CSSコラムの「壊れた」という認識は、私が話した開発者の間で持続します。 改善が必要ですが、これは現在の機能的な側面の使用を妨げるものではありません。

読みやすさとスクロールの懸念

マルチコラムレイアウトの十分な活用は、仕様の欠陥や実装の問題ではなく、ユーザビリティの課題に起因する可能性があります。レイチェル・アンドリューは、長期のコンテンツの過度の垂直スクロールにより、読みやすさが低い可能性を正しく指摘しました。 これは間違いなく否定的な読書体験です。

慎重な検討は重要ですが、これは抑止力ではありません。 構造要素のない大量のテキストに列を不適切に適用するなど、貧弱なデザインの選択は、真の犯人です。 見出し、画像、および引用符は、列に効果的に及ぶ可能性があり、読みやすさを向上させることができます。 コンテナクエリと最新のテキストサイジングユニットと組み合わせることで、マルチコラムレイアウトを避ける理由はほとんどありません。

プロパティと値の簡単なレビュー

列を作成するための2つの主要な方法が存在します。column-countまたはcolumn-widthを定義し、ブラウザに列のカウントを決定させます。 column-width、幅（たとえば、18REM）を設定し、ブラウザに列の数を最適化させます。

（ガター）は、列間の間隔を制御します。理想的には、テキストサイズの比例にcolumn-gapユニットを使用します。 remは、カスタマイズ可能な厚さとcolumn-ruleで視覚的な分離を追加します。 この簡単な構文は、使いやすさに貢献しています border-style現代のCSS

における強化された関連性

を超えて、最新のCSS機能の多くは存在しませんでした。 これらの進歩により、マルチコラムレイアウトの機能が向上します remおよびビューポートユニットは、:has()およびcalc()と組み合わせて、列内のレスポンシブテキストサイジングを有効にします。 clamp()コンテンツに基づいて条件付き列の作成を許可します。 コンテナクエリは、十分なコンテナスペースが利用可能な場合にのみ、列の実装を有効にします。 CSSグリッドまたはフレックスボックスとの統合により、さらにクリエイティブなレイアウトが解除されます。

実用的なアプリケーション：レスポンシブな記事レイアウト

rem私の課題は、画面サイズとcalc()の存在/不在に適応する柔軟でメディアクリーのない記事のレイアウトを作成することでした。 柱状テキストは読みやすさを向上させ、テキストサイズはコンテナ幅に調整され、ビューポート幅ではありません。 clamp()HTMLは単純です：見出しと段落を含む:has()要素、およびオプションではa

。

マルチコラムレイアウトスタイルは、<figure></figure>（40CH）、

（100CH）、およびセンタリング用の自動マージンを使用して

に適用されます。 <main></main> <figure></figure>flexboxは

：

<main><h1 id="About-Patty">About Patty</h1>
<p>…</p></main><img  alt="CSSマルチコラムレイアウトの再訪" >

に含まれている場合にのみ

に適用されます。 <main></main> column-widthmax-widthは、

と

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

：

の両方の応答性を保証します <section></section> <figure></figure>これにより、メディアクエリの必要性がなくなります。 レスポンシブスケーリングのために、コンテナクエリ（

）および

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

を使用してテキストサイズが適応します。

min-width: min(100%, 30rem)結果は、マルチコラムレイアウトを効果的に利用して、画面サイズとコンテンツに適合する柔軟なレイアウトです。過去の制限への対処

多くの記事は、マルチカラムレイアウトの欠陥、特にスクロールの問題を強調しています。 column-spanプロパティ（見出し、画像、スパン列への引用の場合）は、これを大幅に軽減し、過度のスクロールを最小限に抑えるための慎重なコンテンツデザイン。

孤立した見出しと数字は、

。break-after: column;を使用して対処されています

マルチカラムレイアウトに関する新たな視点

その年齢と過去の制限にもかかわらず、マルチコラムレイアウトは十分に活用されていません。課題は存在しますが、その価値と設計を強化する能力は残ります。 この強力なCSSツールを新たに見てみる時が来ました。

以上がCSSマルチコラムレイアウトの再訪の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。