CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました
2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 はじめに 「update」クエリの基礎知識 新しいメディアクエリ「update」を使用したデモ リソース はじめに CSSのメディアクエリは、Webサイトやアプリを表示されているデバイスに基づいて外観をコントロールできる強力なツールです。メディアクエリを使用すると、さまざまなスクリーンサイズや向きなどに対してレイアウトを最適化できます。 updateクエリは、デバイスのリフレッシュレートに適応することが
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも Googleは、来年1月に登場予定のChrome 97で、DevToolsにWebブラウザ上での操作内容を記録し、再実行や編集、保存などを可能にする新機能を搭載することを明らかにしました。 Introducing the new Recorder panel You can now record, replay and measure user interactions with @ChromeDevTools. See it in action - ordering coffee. Learn more about this preview feature (available in Chrome Canary now): https://t.c
Chrome 95のデベロッパーツールの新機能が便利！vh, vw, rem, emなど、CSSの単位を簡単にオーサリング
先週リリースされたChrome 95のデベロッパーツールに搭載された新機能が便利なので、紹介します。 最近の新機能だと、Flexboxのデバッグツール（紹介記事）やCSS Gridのデバッグツール（紹介記事）などがありますが、Chrome 95ではCSSの単位（vh, vw, rem, emなど）を簡単にオーサリングできるようになりました。 New CSS length authoring tools ※デベロッパーツールの日本語表示（Chrome 94の新機能）は、設定（歯車アイコン）から言語を日本語に変更します。 デベロッパーツールの新機能の使い方は、簡単です。 Webページを開き、デベロッパーツールを起動します。 スタイル（Styles）パネルで、長さを定義したCSSのプロパティ（width, height, margin, paddingなど）を探します。 単位にカーソルを合わせる
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プロパティは名前の通り、アスペクト比を
CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方
CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。 ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。 C
Web制作が捗る！おすすめのChrome拡張機能18選【2021年版】 | Web Design Trends
Web制作や情報収集など、Google Chromeをメインブラウザで使用している方はとても多いと思います。 Chromeの便利な機能の1つが拡張機能ですが、きちんと活用してますか？拡張機能を活用することで、Web制作業務が効率化されたり、日々の情報収集が行いやすくなったりします。 今回は、Web制作者やデザイナー向けのGoogle Chromeのおすすめ拡張機能をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
Windows 11に見捨てられたPCをChromebook化して幸せに
Microsoftは6月24日（現地時間）、次期OS「Windows 11」を発表した。Windows 11 Insider Previewの公開も始まっており、筆者の周りにはPC系ライターも多いので、すでにインストール祭り状態である。 筆者は現在、執筆をMacで行っており、Windows環境はびっくりするほどプアである。クラウド時代の昨今、Macだから、Windowsだからという差はそんなにないのだが、時折レビュー製品でWindows版しか設定アプリがないものがあったり、Macで読めないHDDに動画素材が入ってたりということがたまにある。 そんなときのために、2020年9月にドンキの激安ノートこと「MUGAストイックPC3」を購入していた。CPUにCeleron N3350（Apollo Lake）、メモリ4GB、ストレージ64GBで、1万9800円である。 いや、購入直後はそこそこ普通
JavaScriptのES2021で追加された新機能まとめ
2022/06/22追記 最新仕様ES2022がリリースされたので、新しく記事を書きました。 JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。 これまでの仕様はES2020でしたが、先日2021年6月22日にES2021が正式仕様として承認されました。 22.06.2021 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2021の全機能が使えます。 本記事では、ES2021すべての新機能をまとめて紹介します。 大きな数値を_区切りで書け
Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち
セキュリティ調査に役立つブラウザ拡張機能のまとめ - 午前７時のしなもんぶろぐ
おはようございます。しなもんです。 今回はセキュリティ調査に使える便利なブラウザの拡張機能 (アドオン・エクステンション) をご紹介します。 こうした拡張機能の多くはこの世で唯一無二の機能を持っているわけではありませんが、普段から一番よく使う調査ツールである「Web ブラウザ」に直結するため、手間の節減や各種オンラインサービスへのアクセシビリティ向上に大きな効果を発揮する場合があります。 前提 Mitaka IP Address and Domain information Link Redirect Trace User-Agent Switcher Flagfox IP Domain Country Flag Wappalyser anonymoX Wayback Machine Exif Viewer/EXIF Viewer Pro Simple Translate Mouse Di
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
商用利用無料、ベクターで使いやすい！MacBook, iPhone, Apple Watchなど人気のあるデバイスのモックアップ素材
iPhone, Galaxyをはじめ、Apple Watch, iMac, MacBookなど、人気のあるデバイスやブラウザのモックアップ素材を紹介します。ベクターなので使い勝手もよく、プレゼンにもぴったりです。 ベクター素材は、Figma用とSktch用の2種類が揃っています。 Vector Mockups Library Vector Mockups Libraryはベクターのモックアップ素材、MITライセンスで商用プロジェクトでも無料で利用できます。 デバイス・ブラウザは、下記の通り。 iPhone 12 iPhone SE 2 iPhone SE Samsung Galaxy S20 Apple Watch iMac MacBook Safari Chrome ダウンロードは、下記ページから。 まずは、「Download」ボタンをクリックします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Get ChromeOS Flex for PC or Mac - Chrome Enterprise
