渚  直樹

渚 直樹

1656702000

CSSサブグリッドとコンテナクエリを使用する方法

CSSを頻繁に使用する場合は、レイアウトを並べて配置すると、片側のサイズが変更されたときにレイアウトが壊れたり、ずれたりすることがあります。ほとんどすべてのWebデザイナーがこれに直面しており、解決するのはイライラする可能性があります。幸い、CSSには、コンテンツが変更されたときに配置を維持するWebレイアウトを作成できる機能があります。これらはサブグリッドおよびコンテナクエリと呼ばれます。

CSSサブグリッドとコンテナクエリは、WebレイアウトデザインとレスポンシブWeb開発を大幅に改善できる2つの機能です。この記事では、CSSサブグリッドをコンテナークエリでシームレスに使用するためのチュートリアルを提供することにより、CSSサブグリッドについて詳しく説明します。

CSSサブグリッドとは何ですか?

CSSサブグリッドはCSSエコシステムの比較的新しい機能であり、レベル2のCSSグリッドWebデザインとレイアウト仕様への重要な追加であることが証明されています。

従来のグリッドコンテナ内で構築および調整する要素(子コンポーネント)は、親コンポーネントから行と列を直接継承しません。これにより、各要素が独立して動作する傾向があるため、それらを親グリッドに一貫して配置することが困難になります。

次に、冗長になる可能性のある2つの別々のグリッドを管理する必要があります。グリッドの子コンポーネントが親コンポーネントと完全に同期できるようになったため、プロパティsubgridの値として追加することで、この問題をすばやく解決できます。grid-template-rowsgrid-template-columns

CSSサブグリッドを使用すると、子コンポーネントはグリッド設定を維持せずに親の行と列の設定を継承できます。

以下のネストされたグリッドシステムの3枚のカードについて考えてみます。

 

中央でカードのコンテンツを増やすとどうなるか見てみましょう。

 

 

コンテンツが増えると、タイトルとフッターの位置が損なわれることがすぐにわかります。

この問題に対処するにはいくつかの方法があります。それでも、ネストされたグリッドシステムで個々のグリッドを手動で管理することになり、より大きなコードベースで作業する場合に問題が発生する可能性があります。

サブグリッドは、コンテンツを変更しても行と列がグリッドシステム内の初期位置を維持できるようにする代替修正を提供するようになりました。

subgrid上記の例から、カードのsの値として追加grid-template-rowすると、異なる出力が生成されます。

.card {
  grid-template-rows: subgrid;
}

結果は次のとおりです。

 

2枚目のカードのコンテンツが増えても、タイトルとフッターの要素は完全に配置され、親グリッドと同期しています。

サブグリッドは、子コンポーネントが親コンポーネントと祖父母コンポーネントのプロパティを継承できるため、CSSグリッドレイアウト仕様への重要な追加です。ネストされたグリッドシステム、完全に配置されたフォームレイアウト、およびその他の編集用Web配置を構築する場合に便利です。

現在、FirefoxブラウザのみがCSSサブグリッドをサポートしていますが、他の一般的なブラウザはそれほど遅れていません。このガイドを参照して、CSSサブグリッドとその機能を詳しく調べることができます。

コンテナクエリとは何ですか?

ブラウザにメディアクエリが導入されて以来、レスポンシブWebデザインは、ブラウザのビューポート用に特定のレイアウトを設計できるようになったため、将来に向けて大きな一歩を踏み出しました。

これは素晴らしいことですが、メディアクエリは、より複雑なWeb構造を作成するときに冗長性の問題も明らかにしました。たとえば、Webページのビューポートの変更に合わせて主要なレイアウトプロパティ(幅や高さなど)を調整する必要がある包含セクションにラップされたコンポーネントは、デザインに影響を与えたり、壊したりする可能性があります。

この問題を解決するには、コンポーネントのメディアクエリを包含セクションと同期させて、コンポーネントがすべてのビューポートサイズで適切に表示されるようにします。ビューポートサイズの代わりに、実際のプロパティに基づいて要素を設計するようになったため、コンテナクエリを使用してこれを簡単に解決できます。コンテナクエリを使用すると、指定したコンテナごとに任意のコンポーネントが応答できます。

たとえば、グリッドシステムでは、子コンポーネントをコンテナに合わせて、動作と応答性を決定できます。(ビューポートではなく)コンテナ内の位置に応じてスタイルを変更できます。レスポンシブグリッドレイアウトを使用してWebページを構造化することはできますが、コンテナクエリを使用することは、レスポンシブWebデザインへのより簡単なアプローチです。

コンテナクエリはどのように機能しますか?

CSSコンテナクエリについて最初に理解することは、「コンテナ」はクエリされる要素ですが、コンテナクエリ内のルールはコンテナの子孫にのみ影響するということです。たとえば、ターゲットコンテナとして、、、またはおそらくをクエリする場合mainsectionコンテナdivクエリを使用すると、コンテナサイズの変更に応じて、その中の要素がどのように変化するかについてのルールを定義できます。

を使用してコンテナクエリを作成できます@container。最も近い包含コンテキストを探します。

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

上記のコードは、コンテナクエリの操作を示しています。カードのflex-direction列の値をrow、コンテナの幅が450px以上の場合に変更するようにブラウザに指示するだけです。

コンテナクエリはに含まれるように指定されましたCSS containment。3つのプロパティがそれらに付随します:

1.1。container-type

このプロパティは、クエリコンテナを要素に割り当てて、その子コンポーネントがレイアウト機能のいくつかの側面をクエリできるようにします。

  • sizeブロックおよびインライン軸のディメンションクエリ用のクエリコンテナを作成します。レイアウト、スタイル、およびサイズの包含が要素に適用されます
  • inline-sizeコンテナのインライン軸上にディメンションクエリ用のクエリコンテナを作成します。要素のレイアウト、スタイル、およびインラインサイズの包含が適用されます
  • block-sizeコンテナのブロック軸上にディメンションクエリ用のクエリコンテナを作成します。レイアウト、スタイル、およびブロックサイズの包含が要素に適用されます
  • styleスタイルクエリ用で、クエリコンテナを作成します
  • state状態クエリ用のクエリコンテナを作成します

2.2。container-name

コンテナの名前をさらに指定するオプションのプロパティ。この属性は、最も近い親コンテナをターゲットにしたくない場合にエスケープハッチとして機能します。

以下のコードを検討してください。

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

上記のCSSsidebarは、インライン軸のコンテンツのみを含む指定された名前()のコンテナーを生成します。これは、コンテンツがブロック軸で必要なだけ大きくなる可能性があることを意味します。次に、その特定のコンテナを次のcontainer-nameようにクエリできます。

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.3。container

container-typeこのプロパティは、多くの場合、両方とcontainer-name1つのステートメントで設定するために使用できる省略形のプロパティとして使用されます。

コンテナクエリのユースケース

コンテナクエリは、使用可能なコンテナスペースに依存するレイアウトを持つ再利用性の高いコンポーネントに適しています。これらはさまざまな状況で使用したり、ページ上の複数のコンテナに追加したりできます。

その他のコンテナクエリのユースケースは次のとおりです。

  • 適応可能なレイアウト
  • カード、フォーム要素、バナー、およびその他のモジュラーコンポーネント
  • CSSサイズ変更実験
  • 明確な機能を備えたモバイルおよびデスクトップのページネーション

ほとんどのブラウザはまだコンテナクエリをサポートしていませんが、GoogleChromeCanaryでその機能を簡単にテストできます。に向かいchrome://flags、有効にしCSS Container Queriesます:

 

about:config次の場所に移動して有効にすることで、MozillaFirefoxでコンテナクエリを試すこともできlayout.css.container-queriesます。

 

コンテナクエリは現在、最初の公開草案に含まれていますが、これは役立つことが証明されている機能であり、すべてのブラウザバージョンに組み込まれる可能性があります。

コンテナクエリでのCSSサブグリッドの使用

CSSサブグリッドとコンテナクエリは2つの魅力的なCSS機能であり、ウェブページのレイアウトデザインとレスポンシブスタイリングへのアプローチを変えると思いますが、どうすればそれらを組み合わせることができますか?

次の形式の3つの記事を含むセクションがあるとします。

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

次に、これらの記事をネストされたグリッドシステムに配置して、サブグリッドとコンテナクエリがそれぞれの役割を果たすことができるようにします。

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

上記のCSSコードから、2列のグリッドシステムで最初の2列が、すぐ下にある3番目の列と同じスペースを取るようにしました。次に、記事内にサブグリッドを作成して、記事のコンテンツが増えても内部の要素が同期して壊れないようにしました。

 

このシステムの応答性を高めるには、セクションをターゲットにして、子孫として記事に適用されるコンテナクエリルールを設定する必要がありました。inline-size記事(子)コンポーネントをセクション(コンテナ)の幅に合わせて拡大または縮小する必要があるため、セクションのプロパティを照会したことに気付くかもしれません。

この場合、セクションの幅が最大のときに、記事を列方向に曲げます80ch。これにより、記事はビューポートのサイズではなく、コンテナの幅に対応できるようになります。

結果は次のとおりです。

 

結論

この記事では、CSSサブグリッドとコンテナークエリ、それらの動作、およびユースケースについて説明しました。また、両方の概念を実験し、それらを組み合わせてレスポンシブレイアウトを実現することもできました。コンテナクエリとCSSサブグリッドは現在、最初の公開草案に含まれていますが、これらは有用であることが証明されている機能であり、ほとんどの新しいブラウザバージョンに組み込まれる可能性があります。

この記事があなたにとって貴重であったことを願っています。ハッピーコーディング!

ソース:https ://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

What is GEEK

Buddha Community

CSSサブグリッドとコンテナクエリを使用する方法
渚  直樹

渚 直樹

1656702000

CSSサブグリッドとコンテナクエリを使用する方法

CSSを頻繁に使用する場合は、レイアウトを並べて配置すると、片側のサイズが変更されたときにレイアウトが壊れたり、ずれたりすることがあります。ほとんどすべてのWebデザイナーがこれに直面しており、解決するのはイライラする可能性があります。幸い、CSSには、コンテンツが変更されたときに配置を維持するWebレイアウトを作成できる機能があります。これらはサブグリッドおよびコンテナクエリと呼ばれます。

CSSサブグリッドとコンテナクエリは、WebレイアウトデザインとレスポンシブWeb開発を大幅に改善できる2つの機能です。この記事では、CSSサブグリッドをコンテナークエリでシームレスに使用するためのチュートリアルを提供することにより、CSSサブグリッドについて詳しく説明します。

CSSサブグリッドとは何ですか?

CSSサブグリッドはCSSエコシステムの比較的新しい機能であり、レベル2のCSSグリッドWebデザインとレイアウト仕様への重要な追加であることが証明されています。

従来のグリッドコンテナ内で構築および調整する要素(子コンポーネント)は、親コンポーネントから行と列を直接継承しません。これにより、各要素が独立して動作する傾向があるため、それらを親グリッドに一貫して配置することが困難になります。

次に、冗長になる可能性のある2つの別々のグリッドを管理する必要があります。グリッドの子コンポーネントが親コンポーネントと完全に同期できるようになったため、プロパティsubgridの値として追加することで、この問題をすばやく解決できます。grid-template-rowsgrid-template-columns

CSSサブグリッドを使用すると、子コンポーネントはグリッド設定を維持せずに親の行と列の設定を継承できます。

以下のネストされたグリッドシステムの3枚のカードについて考えてみます。

 

中央でカードのコンテンツを増やすとどうなるか見てみましょう。

 

 

コンテンツが増えると、タイトルとフッターの位置が損なわれることがすぐにわかります。

この問題に対処するにはいくつかの方法があります。それでも、ネストされたグリッドシステムで個々のグリッドを手動で管理することになり、より大きなコードベースで作業する場合に問題が発生する可能性があります。

サブグリッドは、コンテンツを変更しても行と列がグリッドシステム内の初期位置を維持できるようにする代替修正を提供するようになりました。

subgrid上記の例から、カードのsの値として追加grid-template-rowすると、異なる出力が生成されます。

.card {
  grid-template-rows: subgrid;
}

結果は次のとおりです。

 

2枚目のカードのコンテンツが増えても、タイトルとフッターの要素は完全に配置され、親グリッドと同期しています。

サブグリッドは、子コンポーネントが親コンポーネントと祖父母コンポーネントのプロパティを継承できるため、CSSグリッドレイアウト仕様への重要な追加です。ネストされたグリッドシステム、完全に配置されたフォームレイアウト、およびその他の編集用Web配置を構築する場合に便利です。

現在、FirefoxブラウザのみがCSSサブグリッドをサポートしていますが、他の一般的なブラウザはそれほど遅れていません。このガイドを参照して、CSSサブグリッドとその機能を詳しく調べることができます。

コンテナクエリとは何ですか?

ブラウザにメディアクエリが導入されて以来、レスポンシブWebデザインは、ブラウザのビューポート用に特定のレイアウトを設計できるようになったため、将来に向けて大きな一歩を踏み出しました。

これは素晴らしいことですが、メディアクエリは、より複雑なWeb構造を作成するときに冗長性の問題も明らかにしました。たとえば、Webページのビューポートの変更に合わせて主要なレイアウトプロパティ(幅や高さなど)を調整する必要がある包含セクションにラップされたコンポーネントは、デザインに影響を与えたり、壊したりする可能性があります。

この問題を解決するには、コンポーネントのメディアクエリを包含セクションと同期させて、コンポーネントがすべてのビューポートサイズで適切に表示されるようにします。ビューポートサイズの代わりに、実際のプロパティに基づいて要素を設計するようになったため、コンテナクエリを使用してこれを簡単に解決できます。コンテナクエリを使用すると、指定したコンテナごとに任意のコンポーネントが応答できます。

たとえば、グリッドシステムでは、子コンポーネントをコンテナに合わせて、動作と応答性を決定できます。(ビューポートではなく)コンテナ内の位置に応じてスタイルを変更できます。レスポンシブグリッドレイアウトを使用してWebページを構造化することはできますが、コンテナクエリを使用することは、レスポンシブWebデザインへのより簡単なアプローチです。

コンテナクエリはどのように機能しますか?

CSSコンテナクエリについて最初に理解することは、「コンテナ」はクエリされる要素ですが、コンテナクエリ内のルールはコンテナの子孫にのみ影響するということです。たとえば、ターゲットコンテナとして、、、またはおそらくをクエリする場合mainsectionコンテナdivクエリを使用すると、コンテナサイズの変更に応じて、その中の要素がどのように変化するかについてのルールを定義できます。

を使用してコンテナクエリを作成できます@container。最も近い包含コンテキストを探します。

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

上記のコードは、コンテナクエリの操作を示しています。カードのflex-direction列の値をrow、コンテナの幅が450px以上の場合に変更するようにブラウザに指示するだけです。

コンテナクエリはに含まれるように指定されましたCSS containment。3つのプロパティがそれらに付随します:

1.1。container-type

このプロパティは、クエリコンテナを要素に割り当てて、その子コンポーネントがレイアウト機能のいくつかの側面をクエリできるようにします。

  • sizeブロックおよびインライン軸のディメンションクエリ用のクエリコンテナを作成します。レイアウト、スタイル、およびサイズの包含が要素に適用されます
  • inline-sizeコンテナのインライン軸上にディメンションクエリ用のクエリコンテナを作成します。要素のレイアウト、スタイル、およびインラインサイズの包含が適用されます
  • block-sizeコンテナのブロック軸上にディメンションクエリ用のクエリコンテナを作成します。レイアウト、スタイル、およびブロックサイズの包含が要素に適用されます
  • styleスタイルクエリ用で、クエリコンテナを作成します
  • state状態クエリ用のクエリコンテナを作成します

2.2。container-name

コンテナの名前をさらに指定するオプションのプロパティ。この属性は、最も近い親コンテナをターゲットにしたくない場合にエスケープハッチとして機能します。

以下のコードを検討してください。

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

上記のCSSsidebarは、インライン軸のコンテンツのみを含む指定された名前()のコンテナーを生成します。これは、コンテンツがブロック軸で必要なだけ大きくなる可能性があることを意味します。次に、その特定のコンテナを次のcontainer-nameようにクエリできます。

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.3。container

container-typeこのプロパティは、多くの場合、両方とcontainer-name1つのステートメントで設定するために使用できる省略形のプロパティとして使用されます。

コンテナクエリのユースケース

コンテナクエリは、使用可能なコンテナスペースに依存するレイアウトを持つ再利用性の高いコンポーネントに適しています。これらはさまざまな状況で使用したり、ページ上の複数のコンテナに追加したりできます。

その他のコンテナクエリのユースケースは次のとおりです。

  • 適応可能なレイアウト
  • カード、フォーム要素、バナー、およびその他のモジュラーコンポーネント
  • CSSサイズ変更実験
  • 明確な機能を備えたモバイルおよびデスクトップのページネーション

ほとんどのブラウザはまだコンテナクエリをサポートしていませんが、GoogleChromeCanaryでその機能を簡単にテストできます。に向かいchrome://flags、有効にしCSS Container Queriesます:

 

about:config次の場所に移動して有効にすることで、MozillaFirefoxでコンテナクエリを試すこともできlayout.css.container-queriesます。

 

コンテナクエリは現在、最初の公開草案に含まれていますが、これは役立つことが証明されている機能であり、すべてのブラウザバージョンに組み込まれる可能性があります。

コンテナクエリでのCSSサブグリッドの使用

CSSサブグリッドとコンテナクエリは2つの魅力的なCSS機能であり、ウェブページのレイアウトデザインとレスポンシブスタイリングへのアプローチを変えると思いますが、どうすればそれらを組み合わせることができますか?

次の形式の3つの記事を含むセクションがあるとします。

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

次に、これらの記事をネストされたグリッドシステムに配置して、サブグリッドとコンテナクエリがそれぞれの役割を果たすことができるようにします。

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

上記のCSSコードから、2列のグリッドシステムで最初の2列が、すぐ下にある3番目の列と同じスペースを取るようにしました。次に、記事内にサブグリッドを作成して、記事のコンテンツが増えても内部の要素が同期して壊れないようにしました。

 

このシステムの応答性を高めるには、セクションをターゲットにして、子孫として記事に適用されるコンテナクエリルールを設定する必要がありました。inline-size記事(子)コンポーネントをセクション(コンテナ)の幅に合わせて拡大または縮小する必要があるため、セクションのプロパティを照会したことに気付くかもしれません。

この場合、セクションの幅が最大のときに、記事を列方向に曲げます80ch。これにより、記事はビューポートのサイズではなく、コンテナの幅に対応できるようになります。

結果は次のとおりです。

 

結論

この記事では、CSSサブグリッドとコンテナークエリ、それらの動作、およびユースケースについて説明しました。また、両方の概念を実験し、それらを組み合わせてレスポンシブレイアウトを実現することもできました。コンテナクエリとCSSサブグリッドは現在、最初の公開草案に含まれていますが、これらは有用であることが証明されている機能であり、ほとんどの新しいブラウザバージョンに組み込まれる可能性があります。

この記事があなたにとって貴重であったことを願っています。ハッピーコーディング!

ソース:https ://blog.logrocket.com/using-css-subgrids-container-queries/

#css