CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な
CSSの実装方法を少し改善するだけで、Webページの読み込み・表示を最適化するテクニックのまとめ
CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブバイタルに大きな影響を与えます。 ウェブバイタル（Web Vitals）を最適化するためのCSSのテクニックを紹介します。 CSS for Web Vitals by Katie Hempenius, Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レイアウトのCSSを改善 画像のCSSを改善 画像によるレイアウトシフトのCSSを改善 WebフォントのCSSを改善 アニメーションのCSSを改善 クリティカルCSS 終わりに はじめに CSSの記述方法やレイアウトの構築方法で、コアウェブバイタル（Core
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
一気に疑問が解ける！Webページを高速化するテクニックを分かりやすく解説した良書 -Webページ高速化超入門
Webページ高速化、と聞くと専門的な知識が必要で難しそうと思う人も少なくないと思います。Webページを軽量化して表示速度を改善させるテクニックを一つずつ分かりやすく解説した入門書を紹介します。 「超入門」とあり、確かに一つ一つの解説は非常に分かりやすいです。しかし、本書を読み終えた後は、専門的な知識を身につけることができます。 本書はタイトルにある通りコーダーとウェブ担当者向けです。というのは、各章ごとに2部構成となっており、入門編では知識として把握しておきたい人用で、実践編では高速化の取り組み方法が解説されています。 巻末には高速化の目安となるGoogleのPageSpeed Insightsで改善すべき項目に対応した方法がリスト化されていて、非常に役立つ一冊です。
Web制作者は要チェック！Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptはどう変わるのか
これから先、フロントエンド開発者に一番大きな影響を与えるのは、Chromiumを採用したEdgeがリリースされることだと思います。 IEへの対応が、、、Edgeへの対応が、、、と思っていた人には、かなりの朗報です。 Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptのどんな機能が使用できるようになり、ワークフロー、ブラウザテスト、そして他のブラウザへの影響など、フロントエンド開発者にとって何を意味するのかを紹介します。 Edge Goes Chromium: What Does it Mean for Front-End Developers? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chromiumを採用したEdgeがリリースされます 使うのが楽しみな機能 将来はさらにもっと有望 ブラウ
Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty | コリス
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
