常に、これらの自然な動作を操作するだけで基本的なレイアウトを実現できるかどうかを確認することから始めます。例:

• コンテンツを配置した後でのみ、コンテナまたは画像の max-width または max-height を使用して寸法を調整します。
• タイポグラフィのプロパティ (フォント サイズ、行の高さなど) を使用してコンテンツを整理します。

必要に応じてフレックスボックスまたはグリッドに切り替える

通常のフローでは不十分な場合、Flexbox と CSS Grid は、より複雑なレイアウトを処理するための強力なツールです。構造が不必要に複雑になるのを避けて、慎重に使用してください:

• フレックスボックスは、1次元レイアウト(行または列)に最適です:

  • たとえば、コンテナ内で要素を水平方向と垂直方向の両方で中央に配置するには、display: flex と justify-content: center; を実行します。整列項目: 中央;十分です。
  • Flexbox は、要素間の関係が線形である単純なレイアウト (ナビゲーション バー、整列したカードなど) に優れています。

• CSS グリッド は、2 次元 レイアウト (要素を行と列に配置する) に適しています。

  • 画像ギャラリーやデータテーブルなど、より複雑なレイアウトにはグリッドを使用します。
  • 行と列の両方を同時に制御する必要があるレイアウトでは、グリッドは Flexbox よりも強力です。

その考え方は、通常のフローの限界に達した場合にのみ Flexbox または Grid を導入し、実際の必要性なしにどこにでも適用することを避けることです。

詳細については、Josh Comeau による優れたガイドをご覧ください:

• Flexbox の対話型ガイド。
• CSS グリッドの対話型ガイド。

パディングとマージンを含むハンドル間隔

要素間のスペースを整理するには、パディングとマージンの違いを理解し、これらのプロパティを系統的に適用することが重要です。

• パディング: 要素の内部、コンテンツと境界線の間のスペースを管理します。パディングを使用して、ボタンやカードなど、内部コンテンツとコンテナーの端の間にスペースを追加します。

• マージン: 要素の外側、要素の境界線と周囲の要素の間のスペースを管理します。マージンを使用して、フロー内で要素を互いに離すことができます。

一般に、内部スペースにはパディングを使用し、外部スペースにはマージンを使用します。多くの場合、マージンを使用して独立した要素間の間隔を制御し、コンテナ要素内のスペースを調整するためにパディングを予約する方が明確です。

視覚的な証拠については、Nathan Curtis によるこの記事「Space in Design Systems」を参照してください。

レイヤ化に位置値を使用する

CSS での配置により、より動的なレイアウトが可能になりますが、使いすぎないようにすることが重要です。さまざまな位置の値から選択する方法は次のとおりです:

• position: static (デフォルト): 要素は通常のフローに基づいて配置されます。

• 位置:相対: 要素は通常のフロー内に残りますが、元の位置からオフセットされる可能性があります。他の要素の流れに影響を与えずに要素を少し移動したい場合に使用します。

• position:Absolute: 要素は通常のフローから削除され、最初に配置された祖先 (位置: 相対、絶対、または固定のもの) を基準にして配置されます。これは、他の要素に影響を与えることなく、要素を階層化したり、コンテナ内に何かを正確に配置したりする場合に便利です。

• 位置: 固定: 絶対位置と似ていますが、要素はブラウザ ウィンドウに対して相対的に配置され、スクロール中も固定されたままになります (例: スティッキー ナビゲーション バー、ポップアップ)。

• position: Sticky: 相対と固定の組み合わせ。特定の条件が満たされるまで要素をフロー内に留めることができます (例: 特定のスクロール ポイントに到達すると、要素がフロー内に留まります)固定になります）。これは、スクロールした後も表示されたままにしておく必要があるナビゲーション バーなどに便利です。

通常のフローとフレックスボックス/グリッドが要件を満たせない特定のケースでは、配置を賢明に使用してください。

具体的な例: Flexbox によって解決されるスティッキー フッター。

流動的で応答性の高いレイアウトに適切なサイズを選択する

レイアウトの流動性と応答性を確保するには、次のような柔軟な単位を使用します。

• %: パーセンテージは親コンテナのサイズに相対的なものであり、要素をさまざまな画面サイズに適応させることができます。
• em と rem: これらの単位は、親要素のフォント サイズ (または rem の場合はルート要素のサイズ) に関連します。これらは、特に間隔 (マージン、パディング) や 100% 以外の寸法 (幅、高さ) など、適応サイズの作成に最適です。
• vw および vh: これらの単位はブラウザー ウィンドウのサイズに相対的です (1 vw = ウィンドウの幅の 1%、1 vh = 高さの 1%)。画面全体のサイズに適応するレイアウトに使用します。

デバイス間でデザインが流動的であることを保証するために、どうしても必要な場合を除き、px などの固定単位を使用しないでください。

素晴らしい使用例: 流体タイポグラフィ。

私のCSS Razorを簡単に言うと

1. 通常のフローから開始します: ブロック要素とインライン要素を使用してレイアウトの基礎を構築し、表示、幅、高さを調整するだけです。
2. フレックスボックスまたはグリッドは控えめに使用します: 通常のフローでは不十分な場合は、1 次元レイアウトの場合はフレックスボックス、より複雑な 2 次元レイアウトの場合はグリッドに切り替えます。
3. スペースをインテリジェントに処理します: マージンを使用して要素の間隔を空け、パディングを使用してコンテナ内のスペースを管理します。
4. 必要に応じて要素を配置します: 微調整には相対を使用し、通常のフロー外の要素には絶対または固定を使用し、その他はすべて静的にしておきます。
5. 流動的な単位の優先順位付け: %、em、rem、vw、vh などの相対単位を使用して、流動的で適応性のあるレイアウトを確保します。

この系統的なアプローチに従い、可能な限り単純化することで、コードの保守性を確保しながら、過度の複雑さの罠に陥ることなく、効果的なページをデザインすることができます。

あなたの CSS かみそりは何ですか?

以上がCSS かみそりの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。