CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説 | コリス

2021/05/27 554 users コリス CSS コンポーネント アニメーション 進化

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユ... 続きを読む

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

2022/05/26 451 users iOS LVH svh Calc Safari

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc... 続きを読む

[CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ | コリス

2016/01/21 434 users コリス サポートブラウザ CSS 天地 Vista

テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、天地・左右・天地左右・ビューポートの天地左右の中央に配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実... 続きを読む

これからはこの実装がオススメ！ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック | コリス

2021/08/19 403 users iOS コリス height min-height CSS

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。Ja... 続きを読む

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス

2015/07/22 394 users vmin vmax コリス フォントサイズ レスポンシブ

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは... 続きを読む

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

2018/09/27 343 users コリス エフェクト スクロール CSS Apple

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えること... 続きを読む

CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック | コリス

2020/09/11 341 users iOS コリス height min-height CSS

iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heigh... 続きを読む

iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか | コリス

2020/10/18 284 users コリス アスペ タネ 解像度 デバイス

iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペ... 続きを読む

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ | コリス

2017/07/31 258 users コリス transform Flex CSS position

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transform, position, display:flex;などを使ったテクニックが紹介されて... 続きを読む

[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

2018/08/08 255 users コリス スクロールバー CSS ナビゲーション 要素

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表... 続きを読む

[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js | コリス

2014/01/26 228 users コリス スクリプト アニメーション Apple 単体

スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 scrollReveal.js scrollReveal.js -GitHub scrollReveal.jsのデモ scrol... 続きを読む

朗報！ CSSの新しい単位（lvh, svh, dvh)がChromeに実装、100vhがビューポートの高さいっぱいにならない問題を解決

2022/10/04 215 users iOS LVH dvh svh Safari

Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChrome 108で実装されます！ CSSの新機能で、Chromeが一番最後というのは珍しいですね。 最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュー... 続きを読む

2022年、注目しておきたいCSSの新機能のまとめ

2022/01/13 207 users CSS カスケードレイヤー まとめ コンテナクエリ 新機能

2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加... 続きを読む

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス

2014/02/11 181 users コリス jQuery不要 スクロール スクリプト WOW.js

ページを表示した時やスクロールした時など、ページ上の要素がビューポートに表示された時に各要素にさまざまなアニメーションをセットする超軽量（3KB）スクリプトを紹介します。 上から左から右からスライドさせたり、タイミングをずらして順番に表示したり、さまざまな設定を簡単に実装できます。 WOW.js WOW.js -GitHub WOW.jsのデモ WOW.jsの使い方 WOW.jsのデモ デモでは上... 続きを読む

スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる | コリス

2021/07/13 168 users コリス Intersection Observer 要素

スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using ... 続きを読む

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

2022/08/25 137 users Has CSS Container 疑似クラス 実装

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

[JS]デモがバツグンにかっこいい！さまざまな要素がビューポートに表示される時にエフェクトを与えるスクリプト -onScreen | コリス

2013/11/06 133 users jQuery コリス サムネイル 好物 バツグン

ブログのように記事のサムネイルを縦長に配置したり、画像ギャラリーのように画像を垂直・水平に配置したり、ブラウザの表示範囲外の要素を水平・垂直スクロールで表示する時にちょっと素敵なエフェクトを加えるjQueryのプラグインを紹介します。 ユーザー全員が気がつくエフェクトではないですが、こーゆの好物です。 onScreen onScreen -GitHub onScreenのデモ onScreenの使... 続きを読む

iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される

2022/03/15 129 users カスケードレイヤー Safari iOS・macOS 到来

2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法など... 続きを読む

[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス

2014/07/02 124 users コリス jQuery class スクリプト 実装

ページがロードされた時、ビューポートに要素が表示された時に、指定した要素をさまざまなCSS3アニメーションで表示するjQueryのプラグインを紹介します。 外部ファイルをセットして、あとは要素にclassを加えるだけの簡単実装です！ CSS3 Animate It CSS3 Animate It -GitHub CSS3 Animate Itのデモ CSS3 Animate Itの使い方 CSS3... 続きを読む

11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります

2022/11/15 100 users クロスブラウザ fixed position 挙動 配置

11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹... 続きを読む

今までにない快適動作！サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar | コリス

2017/10/16 99 users コリス jQuery スクロール スクリプト ジャンク

サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。 スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。 スクロール時のラグやジャンク... 続きを読む

最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator

2023/02/07 97 users CLAMP calculator フォントサイズ CSS 関数

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠か... 続きを読む

[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート | コリス

2019/02/18 91 users コリス RFS プリプロセッサ Stylus CSS

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(R... 続きを読む

[JS]シンプルでかっこいいスクロールエフェクトを簡単に実装できるスクリプト -ScrollMe | コリス

2014/06/12 87 users コリス jQuery スクロールエフェクト スクリプト CSS

スクロールしてビューポートに要素が表示された時に、さまざまなアニメーションを適用するjQueryのプラグインを紹介します。 スクリプトは外部ファイルを加えるだけで、アニメーションはHTMLに記述する簡単実装です。アニメーション用に他のJSやCSSは必要ありません。 ScrollMe ScrollMe -GitHub ScrollMeのデモ ScrollMeの使い方 ScrollMeのデモ ページ全... 続きを読む

[CSS]HTML5対応、さまざまなデバイスのMedia Queriesを使ったリセット用スタイルシート -320 and up | コリス

2011/04/13 87 users コリス CSS Media Queries デバイス スタ

Media Queriesとはビューポートのサイズやカラーなどユーザーの環境ごとに異なる最適なスタイルシートを条件式のように適用できるもので、下記のようにブラウザのサイズを変更すると、レイアウトがそれに合わせて最適なものを提供できるようにすることができます。 320 and upのスタイルシートの構成 スタイルシートの構成は、最小限なものとなっています。 リセット用のスタイルシート カラー用のスタ... 続きを読む