CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から3年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 UA+ -アクセシビリティを重視した新時代のリセットCSS A (more) Modern
スクロール連動UIはCSSだけで作れる！ 疑似クラス:target-current/before/afterが便利 CSSには、スクロール位置が対象コンテンツの「前か」「後か」を判定するのに役立つものがあります。:target-before、:target-after、:target-currentの3つの疑似クラス、scroll-target-groupプロパティを使うと、今までJavaScriptを必要としていたスクロール連動のインタラクションをCSSだけで実現できます。 この記事ではそれぞれのCSSの使い方と、CSSだけで実装したインタラクションのデモを紹介します。 ※注意：本記事のデモは、Chrome・Edge 142以上でご覧ください。 スクロールに連動させるCSSの基本の使い方 ウェブサイトの「目次」を例に基本的な使い方を説明します。スクロールに連動して目次のスタイルが切り替わ
CSSでスタッガーアニメーションがつくれる！ sibling-index() / sibling-count()の活用アイデア sibling-index()関数とsibling-count()関数は、兄弟要素の「並び順」や「総数」を整数として返すCSS関数です。数値として使えるので、calc()関数などと組み合わせられます。 具体例としてわかりやすいのが、スタッガーアニメーション（要素が順番に遅れて動くアニメーション）です。これまでCSSでスタッガーアニメーションを実装するには、:nth-child(1)、:nth-child(2)…と個別に指定したり、JavaScriptでインデックスを付与する必要がありました。sibling-index()関数とsibling-count()関数を使えば、これらの手間なく、CSSだけで柔軟なスタイリングが可能になります。 今回はスタッガーアニメーショ
typography.md タイポグラフィ font-family フォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。 Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。 Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。 Mac/iOS はヒラギノ角ゴ ProN が適用される。 アップデートによるフォントの変更の懸念はあるものの、ディスクリシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点で
2026年1月13日に、Firefox 147がリリースされ、「CSS Anchor Positioning」が全ブラウザ対応しました。HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになりました。 たとえば、タスク管理のサブメニューを右側に表示する表現や、ヘッダーのユーザーアイコン下にドロップダウンメニューを表示できます。 タスク管理のサブメニュー ユーザーアイコンの下にドロップダウンメニューが表示される 私はずっっっとこの表現をHTML・CSSで実現したいと思っており、Firefoxの対応を待ち望んでいました。本記事で詳しく解説します。 Popover APIとは 従来、ポップオーバーを実装するには、大量のイベントリスナー、複雑な位置計算のロジック、スクロールやリサイズへの対応が必要でした。 たとえば次のようなJavaScriptのコ
主要なブラウザで WebGPU がサポートされるようになりました コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 11 月 25 日 ウェブ デベロッパーとユーザーの皆様にビッグニュースです。WebGPU（高性能 3D グラフィックスと汎用 GPU 計算を実行するための強力な新しい API）が、Chrome、Edge、Firefox、Safari で正式にサポートされるようになりました。つまり、AAA ゲーム、複雑な 3D モデリング、高度な AI アプリケーションなどのハイエンドのブラウザ内エクスペリエンスの未来は今なのです。 この重要なマイルストーンは、W3C GPU for the Web ワーキング グループによる長年にわたる広範な共同開発の結果であり、Apple、Google、Intel、Microsoft、Mozilla
CSSに便利な機能が追加されます！ スクロールした方向を記憶するクエリで、たとえば下にスクロールしたときにはヘッダも普通に上部に隠れ、その後ページのどこからでも上にスクロールするとヘッダを上からアニメーションで再度表示するといったことがほんの数行のCSSで簡単に実装できるようになります。 Solved by CSS Scroll State Queries by Bramus! スクロールの状態をクエリするCSSのscroll-stateに新しいタイプscrolledが使えるようになります。 スクロールが可能であることを表すscrollableとは異なり、scrolledは、最後にスクロールした方向を記憶します。これを利用することで、「非表示バー」を作成できます。つまり、下にスクロールすると（または下にスクロールした後）、非表示バーは非表示になります。その後、上にスクロールすると、非表示バ
Notoファミリーは「すべての言語で文字化けのない世界」を掲げて開発されたフォント群です。通常のフォントでは、該当する文字（グリフ）が存在しない場合、代替として四角い記号が表示されます。この四角い記号は「□」のような形で表示され、見た目が豆腐のブロックに似ていることから「豆腐（Tofu）」と呼ばれています。そんな中、Notoファミリーは、豆腐のないフォント＝No Tofuを意味して「Noto」と命名されたことは有名なエピソードです。 「Noto Sans JP」は数多くのウェブで利用されています。今年4月のWindowsにもNoto Sans JPが搭載され大きな話題となりました。しかしNotoフォントは2014年の登場から11年以上経過し、複雑な状態になっているのも事実です。 Noto Sans JP、Noto Sans Japanese、Noto Sans CJK JPなどたくさんの名
乗りこなせ！ モダンフロントエンド モダンなスクロール関連機能を使いこなそう ［CSS Modern Features no.7］ スクロールに絡む機能の実装 こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。今回のテーマは「スクロール」に関するモダンな機能群です。 ブラウザ上でスクロールに絡む機能を実装しようとすると、考慮すべき点や制約は多くなります。 たとえば、スクロールに応じて何か処理をする場合、JavaScriptによるスクロールの監視が必要です。このスクロールの監視処理は、イベントがトリガーされる回数が非常に多くなりやすく、パフォーマンスへの考慮が必要となります。 他にも、スクロールに応じた計算処理も複雑になりがちです。スクロールコンテナ自体のサイズ・内包コンテンツのサイズ・現在のスクロール位置・関連する要素の座標やサイズ、といった多くの情報に基づいた計算が必
JavaScriptは使用せずに、シンプルなCSSだけでスクリーンの幅と高さ、さらには任意の要素の幅と高さの値を取得する方法を紹介します。 取得する値は単位のない値なので、CSSのあらゆる数式で再利用できます。 まずはスクリーンの幅と高さの値を取得するデモページをご覧ください。 See the Pen Screen width/height (CSS-only) by coliss (@coliss) on CodePen. このCSSで取得できる値は厳密に言うと、ビューポートのサイズです。そのためスマホのように幅と高さいっぱいで表示するような環境であれば、スクリーンのサイズと同義になります。デスクトップの場合はブラウザをフルスクリーンで表示した際にそうなります。 下記のシンプルなCSSでスクリーンの幅と高さの値を取得できます。
はじめに みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 今まで、このようなアニメーションを実装するには、JavaScriptを使っていたので大変でした。 しかし、Chrome 115で使えるようになった、scroll-driven animationsを使うと、CSSだけでスクロールに合わせたアニメーションを作れるようになります。 この記事では、そんなscroll-driven animationsを使って、パララックスを再現したので紹介します。 パララックス（parallax）について まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイト
#Introduction Apple introduced the Liquid Glass effect during WWDC 2025 in June—a stunning UI effect that makes interface elements appear to be made of curved, refractive glass. This article is a hands‑on exploration of how to recreate a similar effect on the web using CSS, SVG displacement maps, and physics-based refraction calculations. Instead of chasing pixel‑perfect parity, we’ll approximate
Webサイトに使用されているCSSをはじめ、自分で書いたCSSに問題がないか解析し、改善点を教えてくれる無料ツールを紹介します。 CSSは、保守性、複雑性、パフォーマンスの面から解析され、問題がある箇所はどのように改善するればよいかも教えてくれます。 CSS Code Quality Analyzer CSS Code Quality Analyzer -GitHub 使い方は簡単です。 「URL to analyze」に解析したいページのURLを入力して、「Analyze URL」をクリックするだけです。 今回は、当ブログのCSSを解析してみました。「Prettify CSS」のチェックを入れると、整形したCSSも生成されます。 CSS Code Quality Analyzer CSSはハイレベルで分析され、3項目に分かれたスコアが算出されます。 Maintainability: 保守
9/2にChromeは17周年を迎えました、時が経つのは早いですね。先日アップデートされたChrome 140に追加された、CSSの新しい機能を紹介します。 今回のアップデートではCSSの新機能がかなりの数で追加されており、calc()で使える計算式が増えたり、カスタムハイライトが使えるようになったり、バリアブルフォント用のプロパティが増えたりなど、Web制作者は要チェックです！ New in Chrome 140 Chrome 140 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに calc()で使える計算式が増えます CSSのscroll-target-groupプロパティ contentプロパティの代替テキスト ビュー遷移の疑似ツリー ネストされたビュー遷移 ov
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
HTMLのdialog要素を利用すると、モーダルダイアログをシンプルに実装できます。dialog要素は、2022年頃から主要ブラウザで利用可能です。 モーダルとは、表示している間は他の操作をできなくするUIを指します。dialog要素の登場以前は、次のような制御を自前で用意する必要がありました。 画面の最前面にモーダルUIを表示 モーダルUIが表示されている間、ほかの操作を制限 モーダルUI開閉時に、フォーカス位置を調整 こうした複雑さについては記事『HTMLでモーダルUIを作るときに気をつけたいこと』でも解説しています。苦労してきたフロントエンドエンジニアは多いでしょう。 HTML標準のdialog要素を利用すれば、シンプルかつ一貫した方法でモーダルダイアログを扱えるようになります。本記事では、dialog要素の基本的な使い方を紹介します。 本記事で紹介すること： dialog要素の基本
Webサイトやスマホアプリに最適、モダンCSSとTailwind CSSで作成されたプロ仕様の背景パターンとグラデーションを紹介します。 100種類以上の背景パターンとグラデーションはシームレスに設計されているので、あらゆるサイズで利用できます。 Pattern Craft Pattern Craft -GitHub Pattern Craftは優れたデザインを重視するデベロッパー向けに、100種類以上の背景パターンとグラデーションをまとめたサイトです。背景パターンとグラデーションはモダンCSSとTailwind CSSなので、コピペで簡単に利用できます。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
最近はこれまで以上にユーティリティクラスを使用したTailwind CSSの需要が高まっている気がします。さまざまなフレームワークやライブラリ、AIツールにも使用されており、ますます人気が高まっています。 2025年現在、最新のTailwind CSS v4.1をサポートしたチートシートを紹介します。使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。 Tailwind CSS Cheatsheet Tailwind CSS Cheatsheet -GitHub Tailwind CSS v4.1の概要 v4.1をサポートしたTailwind CSSのチートシート Tailwind CSS v4.1の概要 Tailwind CSS（Tailwind CSS -GitHub）はユーティリティファーストのCSSのフレームワークで、汎用的なクラス
5月にリリースされたChromeとEdgeで、CSSのif()関数がサポートされました。これによりCSSでもif elseの条件文が使えるようなり、プロパティに対して条件付きで値を設定できるようになりました。 新機能なので、実際にどのように使えばよいのか分からないことも多いと思いますので、if()関数の便利な使い方を紹介します。 たとえば下記のCSSだと、ボタンの幅はマウスで操作できるデバイス（デスクトップなど）だと30px、タッチデバイスだと44pxになります。 CSS conditionals with the new if() function 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if()関数のデモ: インラインのメディアクエリ if()関数のデモ: インライン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
