知っておくと便利なCSSの単位: コンテナクエリに基づく相対単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 第3弾となる今回はコンテナクエリに基づく単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を紹介します。 Container query length units -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 第1弾・第2弾は、下記をご覧ください。 フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説 ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
CSSの実装はコンテナクエリで大きく変わる！ コンテナクエリをデベロッパーツールで検証およびデバッグする方法
Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。Googleのデベロッパーによるコンテナクエリをデベロッパーツールで検証およびデバッグする方法を紹介します。 Inspect and debug CSS container queries by Sofia Emelianova, Jecelyn Yeen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。 はじめに コンテナとその子孫を見つける コンテナクエリを確認する方 コンテナ要素を検索する方法 コンテナクエリをデバッグする方法 はじめに この記事では、Chromeの
CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な
CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
