CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
CSS コンテナクエリ（@container）の便利な使い方を解説
CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 コンテナクエリの背景 メディアクエリの問題点 コンテナクエリはどのように役立つのか？ コンテナクエリの基礎知識 コンテナクエリの使用例 コンテナクエリのデバッグ方法 まとめ コンテナクエリの背景 私がフロント
ビューポート単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ
CSSのビューポートを基準にした単位「vw, vh, vmin, vmax」は、ここ数年で多く使用されるようになりました。利点はJavaScriptなしで、レスポンシブ対応のレイアウトや要素のサイズを動的に実装できるからです。vw, vh, vmin, vmaxの知っておくと便利なCSSのテクニックを紹介します。 フォントのサイズ指定、高さいっぱいのコンテンツ、フッタを最下部に配置、デバイスに応じた画像配置、記事は固定幅だけど画像は幅いっぱいなど、実用的なテクニックが満載です。 CSS Viewport Units by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートを基準にした単位 vw: ビューポートの幅 vh: ビューポートの高さ vmin: ビューポートの幅または高さの最小値 v
[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。
![[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac45d35aaf5f1c4fa8e28270b3156a50754ca6ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017022201.png)
[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。 基本のスタイル 基本のスタイルでは各アイテムを並らべるために「display: inline-block;
![[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/dba8baab2483c01e8847e7d49e2ec8f98db95ffb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072501.png)
背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法 | スターフィールド株式会社
レスポンシブデザインでリピートしないタイプの背景画像があると悩んでいました。 デバイスによって、横幅が違うため、自ずと要素の横幅が変わる中でどのように背景画像を指定すればいいのだろうか・・・と。 「その要素は横幅が固定です。」となればいいのですが、そういうわけにもいかないと思います。 これは背景画像だけでなく、iframeや動画の埋め込みなんかもこのようなことが起きるかと思います。 この問題を解決する方法を少し前に発見したので記載したいと思います。 ちなみに今までの対処法としては、ブレークポイントに合わせて都度高さの設定を行っていました。 そのブレイクポイントの解像度のデバイスならいいんですが、それ以外だと崩れて見えてしまっていました。 新しい方法の説明する前に、DEMOをご覧ください。 わかりづらいかもしれませんが、今までの方法と新しい方法を２つを載せています。 ブラウザを縮めてみ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webのページレイアウトやコンポーネントのレスポンシブ対応のさまざまなアイデア集 -Responsive Patterns