CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能 🔖 27

先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべき点は、たくさんあります！ まずはshape()がshape-outsideプロパティで動作するようになり、UIをシェイプできるようになりました。さら

数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ 🔖 34

優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこ

【Frontend CSS – パート3】なぜ font-family は継承されるのに background は継承されないのか？ 🔖 1

注意この記事はAIのアシスタントによって翻訳・編集されています。目次1. 問題：なぜボタンの文字色がマルーンになるのか？2. 本質：CSSにおける継承の仕組み3. 継承を制御する5つのグローバルキーワード4. all: 全プロパティを一括リセット（...

【Frontend CSS – パート2】カスケードと詳細度の真実 ─ CSS優先順位はどう計算されるのか？ 🔖 1

注意本記事はAIの支援を受けて執筆しています。目次1. 問題：なぜスタイルが「効かない」のか？2. 原因：ブラウザがスタイルを決める6つの基準3. Origin（スタイルの出所）― 最も重要な優先順位4. Cascade Layers（@layer...

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 191

Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書けるようになります。 スキルが参照するガイドラインはMarkdownで書かれており、Googleが推奨するWeb開発のDos / Don'ts、つまり

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 191

Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書けるようになります。https://zenn.dev/ubie_dev/articles/modern-web-guidanceスキルが参照するガ

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 191

結論、Modern Web Guidanceのドキュメントから、Googleが推奨するCSSのやるべきこと・やってはいけないことをまとめました。Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書け

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 191

結論、Modern Web Guidanceのドキュメントから、Googleが推奨するCSSのやるべきこと・やってはいけないことをまとめました。Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書け

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 261

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。 私のAIの使い方が悪いというのは前提にありつつも、たとえばCSSではSubgrid

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 261

AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 261

AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 261

AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる

鹿野さんに聞く！CSSの最新トレンド Ver.2026 🔖 120

2026/05/14開催の「鹿野さんに聞く！CSSの最新トレンド Ver.2026」 の登壇資料です https://findy.connpass.com/event/390152/ 各デモのURLはこちら https://tonkotsuboy.github.io/findy-

Tailwind CSS v4 で知っておきたい隠れた便利技16種を公開します（翻訳） 🔖 1

兄弟要素のインデックスを返す CSS 関数 sibling-index() 🔖 4

`sibling-index()` は要素の兄弟要素の中でのインデックスを返します。`sibling-index()` 関数により取得したインデックスを使用することにより、スタッガー（時間差）アニメーションや、色相を段階的に変えるといった、兄弟要素の位置に基づいたスタイリングが可

自分なりのCSSアニメーションとの向き合い方 🔖 1

Zenn初投稿になります。死ぬほど文章書くの下手なので、日本語おかしいところめちゃくちゃあると思いますが、暖かい目で見ていただけるとありがたいです…昨今だと「いや、AI使えよ」って話かもしれませんが、今回の内容は自分の心境なども話したいこともあり、自分の言葉で話したいので自分

CSSだいたい理解した 🔖 106

CSSを書き換えて、画面のどこかにあるボタンを押すだけのゲームです。 ただし、ボタンはズレていたり、隠れていたり、押せなかったり、なぜか埋まっていたりします。 margin、position、display、overflow などを駆使して、壊れたレイアウトをさらに壊しながら正解

最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選 🔖 66

この記事では、2024〜2025年にかけて主要ブラウザで使えるようになったCSS（一部HTML）の機能を10個紹介します。「昔はセレクターとか頑張って追いかけてたけど、最近は全然追えてない」という方を対象としています。 それぞれの機能について、目的・できること・昔のやり方・注意点

CSSカスタムハイライトAPI - DOM操作なしでテキストをハイライト - ICS MEDIA 🔖 24

ウェブサイトやウェブアプリで特定の文字や文章をハイライトしたいとき、今までは<span>タグなどで囲んでCSSのスタイルを当てるのが一般的でした。 この方法では、文章の構造には関係のないタグが必要になり、HTMLの階層構造が深くなりがちです。また、動的にハイライトする場合はJav

CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit 🔖 23

iOSにLiquid Glassが採用されてから早半年が過ぎました。 慣れない当初は使いにくさを感じていましたが、Liquid Glassを採用しているアプリが増え、最近では逆にLiquid Glassを採用していないアプリのUIを見るとちょっと古くさい感じがしたりします。 We

【CSS】明暗見やすい色を返してくれる`contrast-color()`が使えるようになった 🔖 2

contrast-color()はCSSの要素のひとつで、コントラスト的に見やすい色を返してくれます。2025/09/15リリースのSafari 26.0・2025/12/09リリースのFirefox 146・2026/04/07リリースのChrome 147でそれぞれ実...

モダンCSSでWebの課題をスマートに解決！一歩進んだアクセシビリティ対応テクニック3選 🔖 3

前回の記事では:focus-visibleによるフォーカスインジケーターのカスタマイズ、カラーコントラスト、visually-hiddenパターンについて紹介しました。今回はその続編として、CSSを用いたアクセシビリティ対応のポイントをさらに3つ紹介します。https://z

長年の悩みがこれで解決！ CSSのposition: stickyの仕様が変わり、上部固定と左端固定が同時に実装できるようなります 🔖 89

テーブルのヘッダを上部に固定し、さらに列の1つを左端に固定する、これを実装するのは非常に大変です。 一見、position: sticky;を使って、top: 0;とleft: 0;で実装できそうですが、実際にはどちらか一方しか固定されません。JavaScriptを使用してもかな

こんなAI時代に、新しいCSS設計フレームワークを作る理由 🔖 4

最近は なんでもかんでも、ぜーーーーんぶ、 Tailwind CSS。なぜならAIが吐き出すのがTailwindだから。AIにCSSなんて書かせたら余計カオスになるから。そんな、Tailwind CSSが圧倒的一強となった世の中で、自分は今「Lism CSS」 という CSS

そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css 🔖 78

CSSのさまざまな古い書き方をモダンCSSやTailwinds CSSでどう書くのか教えてくれるサイトを紹介します。 要素を中央配置するCSSをはじめ、スクロールバーの出現によるレイアウトシフトを防ぐCSS、HEX値やrgb()値より鮮やかなoklch()による色設定、JavaS

【35歳未経験でも理解できた】破綻しないCSS設計の基本 🔖 3

こんにちは！気づけば35歳、未経験からWeb開発の世界に飛び込んだ者です。ヘッダーの余白を少し直しただけなのに、なぜか遠く離れたフッターが崩壊する。直せば直すほど他の場所が壊れていく。「これ、CSSじゃなくてジェンガかな？」と何度も心が折れかけました。しかし、ある本を...

CSS Responsive Rules 🔖 87

css-responsive.md CSS Responsive Rules 目的 レスポンシブ実装の判断基準を明確にし、不要なブレイクポイントとコード量を最小化する。 CSS はブラウザへの「提案」であり、厳密な命令ではない。ブラウザに委ねられる仕事は委ねる。 基本方針: エス

CSSのattr()関数が進化！ HTML属性値を参照する新しい使い方 - ICS MEDIA 🔖 38

HTMLの属性値をCSSから参照できるattr()関数は、これまで::beforeや::afterといった疑似要素のcontentプロパティで使える機能として知られていました。 attr()関数の拡張構文は、CSSの値や単位の扱いを定義する仕様書「CSS Values and U

モダンCSSが変えるフロントエンド設計「アフォーダンスレイヤー」のすすめ 🔖 87

1. はじめに：コンポーネント指向の限界 UIを構築する際、ファイルアップロード用の<input type="file" />を、ページ内の他のボタンと同じ見た目（シャドウ、ホバーエフェクト、余白など）にしたいケースはよくありますよね。しかし、ファイル入力をネイティブのUIと競合

Kongyo CSS - 画像→Pure CSS 変換 🔖 27

使い方 画像を選択し「変換する」をクリック 最大幅: 画像を指定幅にリサイズ（小さいほど軽量） 色差許容値: 0 = ピクセル完全再現、値を上げるとグラデーションが滑らかになりサイズ削減 出力は単一の <div> タグ — CSSグラデーションのみで画像を表現 制約 url()、

適用されていないCSSを検出するChrome拡張を作った 🔖 26

経緯CSSを書いていて「あれ、なんで効かないんだっけ」ってなることないでしょうか。私はしょっちゅうあります。span { width: 200px;}DevToolsを開いてもプロパティはちゃんと適用されてる。打ち消し線もない。でも見た目は変わらない。しばらくして

業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話 🔖 85

はじめに はじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。 私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリング

業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話 🔖 85

はじめにはじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリング

これは覚えておきたい！ シンプルなCSSで、画像をホバーすると拡大し、マスクまでしてくれる 🔖 25

画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。 実際の動作は、デモページをご覧ください。 See the Pen 画

CSSだけでできるアクセシビリティ改善3選【やりがちなミスも解説】 🔖 1

前回の記事ではクリッカブルエリアの調整とprefers-reduced-motionを利用したアニメーションの制御について紹介しました。今回はその続編として、CSSを用いたアクセシビリティ対応のポイントをさらに3つ紹介します。https://zenn.dev/gemcook/

JS不要！CSSだけでサイトに画面遷移アニメーションを付けてみる 🔖 4

こんにちは、ik2mです。皆さんはカッチョイイサイト作りをしたいと思ったことはありますか？私はあります。学生の頃はWebフロントエンドのキラキラ感に惚れ込んで自分のサイトを作ったりしていました。（黒歴史）その中でも特にこだわりたかったのが画面遷移（トランジション）のアニメー

JS不要！CSSだけでサイトに画面遷移アニメーションを付けてみる 🔖 4

こんにちは、ik2mです。皆さんはカッチョイイサイト作りをしたいと思ったことはありますか？私はあります。学生の頃はWebフロントエンドのキラキラ感に惚れ込んで自分のサイトを作ったりしていました。（黒歴史）その中でも特にこだわりたかったのが画面遷移（トランジション）のアニメー

これはかなり万能に使える！ たった3行のCSSで、要素を中央に絶対配置する新しい記述方法 🔖 89

CSSで要素を中央に絶対配置、特にモーダル、メッセージ、スタック、ポップオーバーなどを中央配置するときに適したCSSの新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、直感的ではないCS […]

CSSだけで動くx86 CPUエミュレータが公開 🔖 83

CSSを表示しただけでコード実行 -- ブラウザUAF脆弱性の仕組み 🔖 32

この記事では、以下の内容を扱います。 use-after-free（UAF）脆弱性がなぜ危険なのか CSSの処理がどのようにメモリ破壊を引き起こすのか UAFからリモートコード実行に至るエクスプロイトチェーンの全体像 ブラウザの防御機構と、開発者としてできること 対象読者: We

x86CSS 🔖 42

PlantUMLの表現力をTailwind CSSで設計書品質に仕上げる 🔖 1

このホバーエフェクト、楽しい！ CSSのみで実装する、弓の弦のように弾けるホバーエフェクト（方向も認識） 🔖 24

カーソルで下からホバーすると弓の弦のように上から弾け、上からホバーすると下から弾ける、操作するのが楽しくなるホバーエフェクトを紹介します。 弓の弦のように弾けるホバーエフェクトはモダンCSSの機能（shape(), sibling-index()/sibling-count(),

Chromeの安定版でついにタブの分割がサポートされました！ Chrome 145で新しく追加された6個のCSSとUIの機能 🔖 28

2/11にアップデートされたChrome 145に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、まずタブの分割が正式サポートされたこと。そしてテキストの配置方法を制御するtext-justifyプロパティ、border-radiusの

Tailwind v4互換のセマンティックなCSSを正しく書く（翻訳） 🔖 1

Tailwind CSS v4にBaseline Lintingを行う 🔖 3

はじめにあなたのTailwind CSS、ベースラインに準拠していますか？Tailwind CSSを使っていると、ブラウザ互換性の問題に気づきにくくなります。開発者はユーティリティクラスを書くだけ、裏側でどんなCSSプロパティが生成されているかを意識することが少ないためです。

「まだそんな古いCSSを使ってるの？」現在では必要のない古いCSSを見つけて、仕様に準拠したCSSを提案してくれるツール -ReliCSS 🔖 61

CSSの新機能を早く使ってみたいと思うかもしれませんが、その前に古いCSSのメンテナンスをしなくてはと思っている人にお勧めの無料ツールを紹介します。 CSSをコピペするだけで、現在では必要のない古いCSSのハックを検出し、W3Cの仕様に準拠したCSSを提案してくれます。 Reli

CSS: 確認ダイアログをCSSだけでアニメーションするときの落とし穴（翻訳） 🔖 1

CSSの100vwで水平スクロールバーが表示される問題がようやく解決！ vwにスクロールの幅が含まれなくなります 🔖 42

Web制作者の長年の悩みがようやく解決されます！ CSSで100vwを使用して幅いっぱいにすると、垂直のスクロールバー分が含まれて、水平スクロールバーが表示されてしまいます。この問題はWindowsで起こり、macOSでもクラシックのスクロールバーを使用していると起こります。 C

Tailwind CSS × React に cn が必要な理由 🔖 29

はじめに Tailwind CSS と React を組み合わせて開発していると、次のようなコードを頻繁に目にします。 <div> 最初は問題ありませんが、条件分岐や状態ごとのスタイルが増えてくると、className はすぐに破綻します。 本...