【React】useMediaQuery は最終手段にしよう

2024/07/03 15 users React matchmedia React Hooks

こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせるこ... 続きを読む

CSSのメディアクエリでcalc()が使用できるの知ってた？

2024/06/12 9 users Calc ビジター CSS 比較 多く

CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む 続きを読む

CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる

2024/03/19 26 users CSS スタイルクエリ 実装 クエリ コンテナクエリ

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可... 続きを読む

2024年のCSSの書き方、ワークフローとツールについて

2024/01/18 207 users ワークフロー CSS Flexbox subgrid ブラウ

CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウ... 続きを読む

CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました

2023/05/09 49 users update CSS リフレッシュレート Media デバイス

2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様の... 続きを読む

CSSの進化が早い！ スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説

2023/03/14 121 users CSS スタイルクエリ クエリ コンテナクエリ 進化

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、これからはメディアクエリからコンテナクエリを使用する機会が増えてくると思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）... 続きを読む

レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説

2022/10/13 118 users CLAMP ＭＡＸ min UIコンポーネント CSS

CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を... 続きを読む

CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました

2022/10/06 42 users ポリフィル アップデ ブラウザ 安定版 準備

コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナクエリが安定版のブラウザにサポートされ、ポリフィルも大幅にアップデ... 続きを読む

CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style

2022/08/30 15 users アクセシビリティ Media デバイス さま CSS

Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さま...記事の続きを読む 続きを読む

レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説

2022/08/25 137 users Has ビューポート CSS Container 疑似クラス

CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素... 続きを読む

CSSの実装はコンテナクエリで大きく変わる！ コンテナクエリをデベロッパーツールで検証およびデバッグする方法

2022/07/15 26 users コンテクスト レスポンシブ デベロッパーツール デベロッパー

Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。Googleのデベロッパーによるコンテナクエリを... 続きを読む

これは朗報！ CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

2022/06/20 137 users CSS 朗報 min-width Media width

これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New s... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem height font-size width マージン

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

2022/05/31 158 users CLAMP font-size CSS 関数 スクリーン

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、と... 続きを読む

ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

2022/04/01 15 users landscape hover matchmedia ポパー

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用すること... 続きを読む

Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装

2022/01/26 19 users Flexbox コンテナクエリ CSS レイアウト 実装

メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexbox... 続きを読む

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

2021/11/18 385 users CSS テクニック ブレークポイント Grid Flexbox

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, ... 続きを読む

レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック

2021/10/14 36 users border-radius ビューポート 矩形 マージン 関数

border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸にな... 続きを読む

CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方

2021/10/07 328 users rem CSS コンテナ単位 相対単位 コンテナクエリ

CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新し... 続きを読む

レスポンシブ対応のレイアウトを実装する最新テクニックを解説、モバイルファーストとデスクトップファーストの現状 | コリス

2021/09/09 39 users コリス モバイ ビューポートサイズ レイアウト ワークフロー

モバイルファーストとデスクトップファーストの現状、それぞれのワークフローを解説し、今日のレスポンシブ対応のレイアウトを実装するより良いアプローチ方法について紹介します。 ビューポートサイズとは関係ないすべてのデバイスで共通の基本スタイルを優先的に記述する方法、メディアクエリを使用しない方法、モバイ... 続きを読む

知っておくと役立つ、CSSの新機能！コンテナクエリの基礎知識と便利な使い方を解説 | コリス

2021/05/13 10 users コリス ビューポートサイズ コンテナクエリ CSS プラグ

CSSのコンテナクエリが、Chrome Canaryのフラグで利用できるようになりました。正式なサポートはこれからですが、一足先に、コンテナクエリの基礎知識と便利な使い方を紹介します。 メディアクエリはビューポートサイズに基づきますが、コンテナクエリは文字通り親コンテナに基づいてスタイルを定義できます。これにより... 続きを読む

CSS の Container Queries おためし - 見返すかもしれないメモ

2021/04/25 176 users Container Queries CSS div メモ 要素

CSS に、コンテナクエリという機能があるらしい。 メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (m... 続きを読む

CSS メディアクエリのチートシート、デスクトップ・タブレット・スマホ、主要デバイスごとのメディアクエリ | コリス

2021/02/08 17 users CSS タブレット コリス ベース デスクトップ

WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、デスクトップ、タブレット、スマホの各デバイスごとのメディアクエリ、主要デバイス用のメディアクエリのチートシートをまとめたので紹介します。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024,... 続きを読む

Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニック | コリス

2020/12/01 21 users コリス ブッダ レスポンシブ グリッド CSS Grid

Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニックを紹介します。 ヘッダ・コンテンツ・フッタを積み重ねたもの、12カラムのグリッド、メディアクエリなしのレスポンシブなど、実際によく使用されるレイアウトばかりです。 CSS Gridを使用すると、今まで少し複雑だったレ... 続きを読む

JavaScriptでのメディアクエリ、matchMedia()の使い方を解説 | コリス

2020/09/15 20 users matchmedia コリス match Media CSS

メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、match... 続きを読む