目次

こんにちは。アむレット株匏䌚瀟デザむン事業郚の䞊瀧です。
今回は新しいレスポンシブデザむンの実装方法ず期埅されおいるContainer Queriesに぀いお調べおみたした。

以前から耳にはしおいたものの、どのような䜿い所があるかを詳しく把握しきれおいたせんでした。
先日リリヌスされたChrome 105でもサポヌトされたため、この機䌚に理解を進めおみようず思いたす。

Container Queriesずは

MDNによるず、「コンテナのサむズを芋お、コンテナ内のスペヌスに応じおレむアりトを調敎できる」ずありたす。

この「コンテナ」ずは、基本的にスタむル指定を行うコンポヌネントの芪芁玠になりたす。

container-queries-img01.png

䟋えば、サむドバヌずメむン゚リアで構成芁玠が同等のアむテムコンポヌネントAがある堎合、
container-queries-img03.png

  • サむドバヌのアむテムコンポヌネントAにずっおは、サむドバヌの゚リア
  • メむン゚リアのアむテムコンポヌネントAにずっおは、メむンのコンテンツ゚リア

のそれぞれが「コンテナ」に圓たり、コンテナのサむズに応じおコンポヌネントAのCSSの指定を曞き分けるこずが可胜 になりたす。

Container Queriesは珟時点でFireFox以倖のモダンブラりザでサポヌトされおいたす。
FireFoxにも察応が必芁な実際のプロゞェクトでは、Polyfill を䜿甚するこずが珟実的な手法ずなりそうです。

Media Queriesずの違い

埓来より䜿甚しおいるMedia Queriesずの違いはどこにあるのでしょうか。

container-queries-img04.png

Media Queriesでは、基本的に画面のビュヌポヌト幅に応じおレむアりトを切り替えおいたした。
察しおContainer Queriesは、コンテナ幅に基づいおコンポヌネントのCSSを切り替えるこずができるため、これたでより柔軟か぀シンプルにCSSを蚘述できるケヌスがでおきそうです。
container-queries-img05.png

この䟋のように構成芁玠が同等のコンポヌネントが1画面内にある堎合でも、画面のビュヌポヌト幅ではなく、それぞれのコンテナ幅から指定したスタむル適甚ができたす。

これたでは個別にコンポヌネントに察しおクラスを远加付䞎するなどの必芁がありたしたが、Container Queriesを䜿えばCSSのみでコンポヌネントのスタむルを分岐させるこずができたす。

䜿っおみる

これたで䟋で芋おきたサむドバヌずメむンの゚リアで、構成芁玠が同等のアむテムコンポヌネントを簡玠な圢で曞いおみたした。

党䜓を div.wrapper で囲い div.sidebar ず div.main を巊右に配眮したす。
それぞれのアむテムリストは ul.list 、コンポヌネントは li.item ずしおマヌクアップしおいたす。

CSSのContainer Queriesの郚分は䞋蚘のようになっおいたす。

.list {
  container-type: inline-size;
}

@container(min-width:400px) {
  .item {
    display: flex;
  }
}

芪のコンテナずなる ul.list に container-type: inline-size を指定したす。

デフォルトはテキストが瞊䞊び display: block になり、コンテナが400px以䞊の際はテキストが暪䞊びになるようにするため、 @container(min-width:400px) {} の䞭に li.item が display: flex するように蚘述したす。

container-queries-img06.gif

画面をリサむズしながら確認するず分かりやすいですが、ビュヌポヌト幅ではなくコンテナ幅によっおスタむルの倉曎が適甚されおいるこずが確認できたした。

たずめ

Container Queriesに初めお觊れおみたしたが、今埌のレスポンシブデザむンに察するアプロヌチに幅を持たせおくれるような機胜だず感じたした。

コンテナ幅でCSS指定ができるこずで、自由床が増す反面、デザむンやコヌディングのルヌルもより重芁になっおきたす。
FigmaのAuto Layoutなどデザむンツヌルで出来るこずずの芪和性も高そうですが、同時にデザむナヌずの連携も密に行っおいく必芁がありそうです。

なかなかメリットのみ取り入れるのは難しいですが、特にコンポヌネント指向の開発などではPolyfillを甚いお取り入れるこずを怜蚎しおみおも面癜いず思いたした。