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

テーブルのヘッダを上部に固定し、さらに列の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 への移行を決めた話 🔖 84

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

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

はじめにはじめまして。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 はすぐに破綻します。 本...

CSS: フロントエンドアーキテクチャに「アフォーダンス」層も必要な理由（翻訳） 🔖 2

Stylelint v17 の主な変更点：ESM 移行と CSS Nesting 対応など 🔖 6

はじめに2026年1月15日に Stylelint v17 がリリースされました。前回のメジャーアップデートは v16（2023年12月）のため、およそ2年ぶりのメジャーアップデートとなります。v17 は breaking changes を含むリリースで、公式のマイグレーシ

タイポグラフィCSS 🔖 354

typography.md タイポグラフィ 汎用的な文章の折り返し指定 下のような指定を:rootに指定しておく。 :where(:root) { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ /* word-break: initial

Rails: Tailwind CSSはコンポーネントに向いているCSSか？ 🔖 2

2026年 オススメの CSS検索サービス 1選（無料・有料・比較付き） – クチコミネット 🔖 10

価格・料金の目安と相場CSS検索サービスは、多くの場合無料で利用できます。 Googleなどの検索エンジンを用いた検索も無料で行えますが、専門性の高いCSS検索サービスや、特定のフレームワークに特化したツールは、有料版と無料版の両方を提供している場合もあります。有料版では、より高

実践ウェブパフォーマンス改善 #1 CSS セレクタ | grip on minds 🔖 26

このシリーズでは実践をとおして、ウェブパフォーマンスの測定からボトルネックの特定、さらには、その改善方法などを紹介していきます。 先日公開したプロジェクト「FEATGRAPH」では、DOM のサイズが大きく膨れ上がり、パフォーマンス上の問題が表面化したため、CSS に関するパフォ

【2025年版】BEMに疲れた全人類へ。AI時代のWebシステム開発におけるCSS選定で意識したいこと 🔖 2

"BEM is Dead ?" 「BEM、辛くないですか」 長年Web開発を続けてきたエンジニアやデザイナーであれば、一度はこの感情を抱いたことがあるはず。というか、今まさにツライと現在進行系で思っているのが原動力となって、このブログを書いているサービス開発部の佐々木です。 生成

メディアクエリに依存しないレイアウト設計 - CSS Notes 🔖 49

WEBにおけるレスポンシブ対応では、これまでメディアクエリが多用されてきました。 メディアクエリは便利ですが、画面幅と実際にコンテンツが配置されたエリアの幅の乖離が大きい時に問題が起こりやすくなります。 特に、サイドバーのあるページでは、画面幅は十分広くてもメインエリアが狭いため

CSSだけで星を"半押し"可能な10段階レーティング機能を実装する（翻訳） 🔖 1

【知らないとやばい】ホームページを作る時の命名規則やセンマティックな骨組みの考え方【HTML/CSS】 🔖 1

自作したホームページがぐちゃぐちゃの地獄になった話HTMLとCSSの勉強が進み、かっこいいサイトと同じ見た目のものを再現できるようになってきました。ちょっと勉強するだけでこんなにできるなんてちょろいな〜なんて思った私は、自分のホームページを作ることにしました。VSC...

2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: CSSのワークフローがより便利になる新機能編 🔖 40

2025年のCSSの新機能のまとめは、いよいよ最終回。 今回はCSSのワークフローがより便利になる新機能が盛りだくさんです！ attr()関数の進化 テキストの配置をより細かく制御できるtext-boxプロパティ ついにCSSで使えるようになったif()関数 関数を自分で定義でき

「このデザイン、CSSで再現できないかも😫」を解決してくれるかもしれないプロパティ、mask 🔖 31

CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれか

「このデザイン、CSSで再現できないかも😫」を解決してくれるかもしれないプロパティ、mask 🔖 31

CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれか

2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: 進化しているインタラクション編 🔖 30

先日紹介したカスタマイズ可能な新しいコンポーネント編に続いて、2025年、CSSの新機能のまとめ: 進化しているインタラクション編を紹介します。 今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしく

Tailwind CSSを使ってはてなブログのテーマを作ってみる 🔖 2

Social Databank Advent Calendar 2025 の16日目です。こんにちは、ik2mです。皆さんはTailwind CSSが好きでしょうか。私は大好きです。特にあらかじめ用意されたわずかなデザイントークンにより、膨大な選択肢から整理されたスタイルを

Tailwind CSSを使ってはてなブログのテーマを作ってみる 🔖 2

Social Databank Advent Calendar 2025 の16日目です。こんにちは、ik2mです。皆さんはTailwind CSSが好きでしょうか。私は大好きです。特にあらかじめ用意されたわずかなデザイントークンにより、膨大な選択肢から整理されたスタイルを

モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック 🔖 113

スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 Chromeの次のバージョンで、この問題が数行のCSSで解決

Design Tokenが変化することを前提にした型安全なCSS — newmoでPanda CSSを採用した理由 🔖 15

© 2023-Present Segun Adebayo newmoでは、1行目のCSSを書く前に1つ目のDesign Tokenを定義しました。Design Tokenを起点にした開発を実現するため、CSSスタイリングフレームワークにはPanda CSSを採用しています。 しか

CSSやJSのファイル名に付いているなぞの文字列って何だろう？ 🔖 1

はじめに この記事は「コドモンAdvent Calendar 2025」1日目の記事です🎅 こんにちは！コドモンの岡村亮太です！ 最近めっきり寒くなってきましたね。 朝の布団から出るスピードが、だんだん "冬仕様" になってきました。 そして気づけば今年もアドベントカレンダーの季

Storybook上でCSSを書き換えてテーマの変更 🔖 1

記事の内容としてデザインシステムなどがあり、色などのデザイントークンぐらいしか変わらない場合がある今回はshadcn/uiによる複数テーマがある場合、実装側でもStorybook上でテーマを切り替えて確認したい場合の対応例になるCSSのカスタムプロパティでテーマを変えるもの

UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025 🔖 149

MTDDC Meetup Tokyo 2025【2025/11/29（土）開催】の発表資料。 https://www.mt-tokyo.net/mtddc2025/speaker/speaker3084563.html ■概要 ここ数年、CSSの進化は目覚ましいものがあります。こ

Rails: Turbo Frameの読み込みプログレス表示をCSSだけで実現する（翻訳） 🔖 2