レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ
スゴイ便利！Webページの構造を視覚化し、レスポンシブの表示サイズごとの変化を確認できるChromeの機能拡張
こんな便利な機能拡張があったんですね！ レスポンシブ対応ページを作成する時に大切なのは、さまざまな表示サイズでレイアウトや要素がどのように変化するかです。 レイアウトやコンポーネントの構造を視覚化し、px, emでサイズを表示し、その変化を確認できるChromeの機能拡張「Responder」を紹介します。 ResponderはWebページの表示サイズを変更すると、ページ上の要素をブロックレベルでアウトラインで表示し、どのように変化するかが確認できます。 Responderが表示されるのはブラウザのサイズを変更している間だけで、変化しない場合は表示されません。 サイズはpx単位とem単位に対応しており、幅と高さが表示されます。 インストールは、下記ページから。
px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス
Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック Schemaの特徴 Schemaのデモ Schemaの特徴 Schema UI Frameworkの特徴 SchemaはMITライセンスのオープンソースのプロジェクトで、軽量でクリーンなフロントエンド用のフレームワークです。 セマンティックなマークアップ Web標準で、きれいなマークアップが使用されています。 LESSベース
Chromeの機能拡張 -Responsive Inspector | コリス
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
