ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS かみそり
哲学における「カミソリ」とは、不必要な仮説や選択肢を排除することで複雑な選択を簡素化するのに役立つ方法論の原則です。
最も有名なものはオッカムの剃刀です。これは、必要以上に実体や仮説を増やさず、機能する最も単純な説明を選択するようアドバイスしています。
このアイデアを CSS に適用すると、シンプルかつ効果的な方法でページをデザインするためのスタイル プロパティの選択を合理化し、不必要な複雑さを生じることなくレイアウトの問題を解決する手法を採用することが提案されます。
哲学的なカミソリを CSS に適用するには、不必要なルールでコードを過負荷にすることなく、レイアウトの問題を解決するための最もシンプルで最も効果的なソリューションを選択することが重要です。複雑なレイアウト要件を処理しながらシンプルさを維持する先進的なアプローチを採用して、CSS プロパティの選択を効率的に構成する方法を次に示します。
通常のフロー は、特別な介入を行わずに HTML 要素がページ上に配置される自然な方法です。これは最も単純な基礎であり、レイアウトを構築するための開始点となります。
、
常に、これらの自然な動作を操作するだけで基本的なレイアウトを実現できるかどうかを確認することから始めます。例:
通常のフローでは不十分な場合、Flexbox と CSS Grid は、より複雑なレイアウトを処理するための強力なツールです。構造が不必要に複雑になるのを避けて、慎重に使用してください:
フレックスボックスは、1次元レイアウト(行または列)に最適です:
CSS グリッド は、2 次元 レイアウト (要素を行と列に配置する) に適しています。
その考え方は、通常のフローの限界に達した場合にのみ Flexbox または Grid を導入し、実際の必要性なしにどこにでも適用することを避けることです。
詳細については、Josh Comeau による優れたガイドをご覧ください:
要素間のスペースを整理するには、パディングとマージンの違いを理解し、これらのプロパティを系統的に適用することが重要です。
パディング: 要素の内部、コンテンツと境界線の間のスペースを管理します。パディングを使用して、ボタンやカードなど、内部コンテンツとコンテナーの端の間にスペースを追加します。
マージン: 要素の外側、要素の境界線と周囲の要素の間のスペースを管理します。マージンを使用して、フロー内で要素を互いに離すことができます。
一般に、内部スペースにはパディングを使用し、外部スペースにはマージンを使用します。多くの場合、マージンを使用して独立した要素間の間隔を制御し、コンテナ要素内のスペースを調整するためにパディングを予約する方が明確です。
視覚的な証拠については、Nathan Curtis によるこの記事「Space in Design Systems」を参照してください。
CSS での配置により、より動的なレイアウトが可能になりますが、使いすぎないようにすることが重要です。さまざまな位置の値から選択する方法は次のとおりです:
position: static (デフォルト): 要素は通常のフローに基づいて配置されます。
位置:相対: 要素は通常のフロー内に残りますが、元の位置からオフセットされる可能性があります。他の要素の流れに影響を与えずに要素を少し移動したい場合に使用します。
position:Absolute: 要素は通常のフローから削除され、最初に配置された祖先 (位置: 相対、絶対、または固定のもの) を基準にして配置されます。これは、他の要素に影響を与えることなく、要素を階層化したり、コンテナ内に何かを正確に配置したりする場合に便利です。
位置: 固定: 絶対位置と似ていますが、要素はブラウザ ウィンドウに対して相対的に配置され、スクロール中も固定されたままになります (例: スティッキー ナビゲーション バー、ポップアップ)。
position: Sticky: 相対と固定の組み合わせ。特定の条件が満たされるまで要素をフロー内に留めることができます (例: 特定のスクロール ポイントに到達すると、要素がフロー内に留まります)固定になります)。これは、スクロールした後も表示されたままにしておく必要があるナビゲーション バーなどに便利です。
通常のフローとフレックスボックス/グリッドが要件を満たせない特定のケースでは、配置を賢明に使用してください。
具体的な例: Flexbox によって解決されるスティッキー フッター。
レイアウトの流動性と応答性を確保するには、次のような柔軟な単位を使用します。
デバイス間でデザインが流動的であることを保証するために、どうしても必要な場合を除き、px などの固定単位を使用しないでください。
素晴らしい使用例: 流体タイポグラフィ。
この系統的なアプローチに従い、可能な限り単純化することで、コードの保守性を確保しながら、過度の複雑さの罠に陥ることなく、効果的なページをデザインすることができます。
あなたの CSS かみそりは何ですか?
以上がCSS かみそりの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。