CSS のトリッキーな概念

**

フレックス & グリッド レイアウトの説明

**
CSS フレキシブル ボックス レイアウト.通称 Flexbox で、CSS3 Web レイアウト モデルです. CSS3 flexbox は、さまざまな画面サイズやさまざまなディスプレイ デバイスで要素を使用した場合に、要素が予測どおりに動作するようにするために使用されます.コンテナ内のアイテム間でスペースをレイアウト、整列、および分配するためのより効率的な方法を提供します.これは主に、CSS3 がアイテムの幅と高さを変更して、使用可能なすべてのスペースに最適になるようにするために使用されます.これは、ブロック モデルよりも優先されます. CSS3 フレックスボックスには、フレックス コンテナーとフレックス アイテムが含まれています.
Flex レイアウトとグリッド レイアウトの違い -

CSS3 グリッド レイアウトとフレックス レイアウトの主な違いは、CSS グリッドのアプローチがレイアウト優先であるのに対し、フレックスボックスのアプローチはコンテンツ優先であることです.

2. Flexbox レイアウトは、アプリケーションのコンポーネントに最も適しています.そのほとんどは、基本的に直線的で小規模なレイアウトであるのに対し、グリッド レイアウトは、設計が直線的ではない大規模なレイアウトを対象としています.

3.CSS Grid Layout は 2 次元システムです.つまり、主に 1 次元システムである flexbox とは異なり、列と行の両方を処理できるため、列または行のいずれかで処理できます.

4.レイアウトを行または列として定義したい場合は、おそらくフレックスボックスが必要です.グリッドを定義し、それにコンテンツを 2 次元で合わせたい場合は、グリッド レイアウトが必要です.

**

メディア クエリを使用して Web サイトをレスポンシブにする

**
CSS メディア クエリは、使用されている画面の解像度やデバイスに応じてサイトのスタイルを変更するために使用されます.
メディア クエリを組み合わせて、特定のルールをその状況に適用したい場合の特定のシナリオを作成できます.これにより、レスポンシブおよびアダプティブ デザインの概念が作成され、ブラウザーで首尾一貫して機能することが可能になりました.
メディア クエリは、CSS3 で導入された CSS 手法です. CSS メディア クエリを使用すると、デスクトップからモバイルまで、すべての画面サイズで適切に表示されるレスポンシブ Web サイトを作成できます.メディア クエリはレスポンシブ Web デザインで使用され、さまざまな画面サイズやブラウザーでサイトを表示できるようにします. Web サイトをレスポンシブにするには、所定の手順を使用してメディア クエリを設定します.

ブレークポイントを追加します

常にモバイル ファースト向けに設計する

別のブレークポイント

次に、choices device breakpoints を入力します

向きを設定します: 縦または横
タイプ-2:
回答 2: メディア クエリは、印刷と画面などのデバイスの一般的なタイプや、画面の解像度やブラウザーのビューポート幅などの特定の特性とパラメーターに応じて、サイトやアプリを変更する場合に役立ちます.メディア クエリは @media ルールを使用して、特定の条件が true の場合にのみ CSS プロパティのブロックを含めます.
例:

超小型デバイス (電話、600px 以下) の場合、
@media のみの画面と (最大幅: 600px) { }

**小型デバイス (縦向きのタブレットと大型の電話、600px 以上)
@media のみの画面と (最小幅: 600px) { }

*** 中型デバイス (横長のタブレット、768px 以上)
@media のみの画面と (最小幅: 768px) { }

****大型デバイス (ラップトップ/デスクトップ、992px 以上)
@media のみの画面と (最小幅: 992px) { }

**** 特大デバイス (大型のラップトップおよびデスクトップ、1200px 以上)
@media のみの画面と (最小幅: 1200px) { }

この高さと幅を @media で使用することにより、主にレスポンシブ レイアウトを修正できます.メディア クエリには、さらに多くのメディア機能があります.たとえば、アスペクト比、色域、カラー インデックス、グリッド、ホバー、最大アスペクト比、最大カラー インデックス、最大高さ、最大幅、最大解像度、向き、フックなどです.最後に、上記と残りのメディアクエリ機能を使用すると、誰でもウェブサイトをレスポンシブにすることができると言えます.
推奨読書:

Udacity's - Responsive Web Design Fundamentals
MDN's - Using Media Queries
CSS Trick's - CSS Media Queries