タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

cssに関するihirokyxのブックマーク (2)

  • コンテナ要素に基づく相対的な CSS の単位(cqw, cqh, cqi, cqb, cqmin, cqmax)

    コンテナクエリ(@container)とは、親コンテナ要素に基づいてスタイルを定義できる CSS の機能です。メディアクエリ(@media)では画面全体の幅に応じてスタイルを変更する必要がありましたが、コンテナクエリでは任意の要素に基づいたスタイルを適用できるため、より柔軟なレイアウトの実現が可能です。 .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 600px) { /* カードの親要素の幅が 600px 以上の場合、2 列に変更 */ .card { display: grid; grid-template-columns: 1fr 1fr; } } コンテナクエリを使用してスタイルを適用する場合、コンテナクエリ単位を使用できます。コンテナクエリ単位は、親コンテナ要素に対する相対的な

    コンテナ要素に基づく相対的な CSS の単位(cqw, cqh, cqi, cqb, cqmin, cqmax)
    ihirokyx
    ihirokyx 2024/04/22
  • How To Center a Div • Josh W. Comeau

    First, we need to constrain the element's width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can't really center something that is full-width. I could constrain the width with a fixed value (eg. 200px), but really what I want in this case is for the element to shrinkwrap around its content. fit-content is a magical value that does exactly this.

    How To Center a Div • Josh W. Comeau
  • 1