業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話
はじめに はじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。 私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリングには Tailwind CSS を採用しており、プロジェクト開始から 1 年半が経過してコードベースは 200 ファイルを超える規模になっていました。 私が入ったタイミングでは、すでにフロントエンドの技術選定に関わったメンバーは異動しており、デザイナーも不在。スタイルのルールが不明確なまま、画面数とコードが増え続けている状態でした。 初めてプロダクトに触れたとき、「画面ごとに見た目が少しずつ違っていて、統一感がないな」と感じました。業務に支障はないものの、文字サイズやフォントの太さ、余白の取り方が画面ごとにバラつい
Tailwind CSSでcorner-shape: squircleをプログレッシブエンハンスメントとして実装する - Qiita
概要 CSSのcorner-shape: squircleプロパティをTailwind CSSで活用し、ブラウザ間で統一された見た目を実現する方法を紹介します。 squircleは通常の角丸よりも洗練された印象を与えますが、同じradius値でも通常の角丸とは見た目が異なるため、適切な調整が必要です。 squircleとは squircle（スクワークル）は、正方形（square）と円（circle）の中間的な形状で、角丸の曲線がより滑らかで自然な印象を与えます。 iOSアイコンなどで採用されており、時折SNSのデザイン界隈で話題になっています。 CSSではcorner-shapeプロパティを使って実現できます。 ブラウザ対応状況 2025年12月現在、corner-shapeプロパティはChromeとEdgeでのみ対応しており、FirefoxやSafariなどは未対応です。 ただし、プロ
タイポグラフィ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 デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点で
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS
kiso.cssの最大の特徴は、日本語環境での使用を前提とした設計にあります。 多くのリセットCSSは欧文を前提としており、日本語のWebサイトで使用する際には追加の調整が必要になることが少なくありません。 kiso.cssでは、副作用が少ない範囲で日本語に特化したスタイル調整を加えています。もちろん、英語圏の方にも配慮しています。 kiso.cssでは、疑似要素や!importantが明示的に指定されたスタイルを除き、すべてのセレクタを:where()擬似クラスで囲むことで詳細度を0にしています。 kiso.cssはスタイルを容易に上書きできるため、カスタマイズ性の高いリセットCSSとなっています。 リセットCSSでありがちなキーボード操作時のフォーカスリングの消失を防止します。また、強制カラーモードをサポートしたアクセシブルな実装を行っています。 SafariとVoiceOverの組み
ブラウザのレイアウトエンジンを自作してみた
前々から自作ブラウザを作ってみたかったんですよね。作ります。 今回はブラウザのGUI周りの、主にレイアウトの座標計算モジュールを自作しました。CSS のボックスモデル, Flex, Grid の座標計算というのが伝わりやすいでしょうか。 HTMLパーサ/CSSパーサ/CSSクエリエンジン/ペインティングも一部実装しましたが、レイアウト可視化のテスト用と割り切っていて、ちゃんと作ったのは主にレイアウトの座標計算周りになります。 作ったもの 雑なプレイグラウンド こんな感じです Terminal で Sixel を描画して Google を表示したもの。今回は主に座標計算周りの実装なので background-color やフォント周りは未実装なんですが、矩形だけでは自分の目視デバッグもしんどかったので、最低限のビットマップフォントをレンダリングできるようにしました。 リポジトリ npm:@m
CSS Wrapped 2025
To open a <dialog> modally by clicking a <button> you typically need an onclick handler that calls the showModal method on that <dialog>. <button onclick="document.querySelector('#my-dialog').showModal();">Show Dialog</button> <dialog id="my-dialog">…</dialog> With invoker commands–available from Chrome 135–buttons can now perform actions on other elements declaratively, without the need for any J
Panda CSS でデザインシステムのメンタルモデルを確立する - 一休.com Developers Blog
この記事は一休.com Advent Calendar 2025の2日目の記事です。 レストランプロダクト UI 開発チームの鍛治です。一休.com レストランのフロントエンドを担当しています。 2025 年 4 月、PayPay グルメ の全面リニューアルが完了しました。このリニューアルでは「一休.com レストラン」と「PayPay グルメ」の 2 つのサービスを 1 つのコードベースに統合しています。 一休レストラン・PayPay グルメではリニューアルプロジェクトを契機に Tailwind CSS から Panda CSS への置き換えを進めています。 また置き換えやってるのか 1 と思われるかもしれませんが、もちろん理由あっての導入です。本稿では、なぜ導入したのか、それにより何が得られたのかをご紹介したいと思います。 PayPayグルメについて 本記事で登場する「PayPayグル
Web 標準動向 2025年9月版
こんにちは！ サイボウズ株式会社 フロントエンドエンジニアの mehm8128 (@mehm8128) です。 はじめに 今月から「Web 標準動向」が始まります。 サイボウズは 2025 年 4 月より、W3C のメンバーに加入しました。 標準化プロセスに関わることができるようになるための最初の一歩として、フロントエンドエンジニアの一部のメンバーは積極的に Web 標準のキャッチアップを行っています。 そこで、毎月メンバーが興味を持った Web 標準に関する話題や、実際に標準化プロセスに関わることができた場合にはその報告などを 1 つの記事としてまとめ、紹介していきます。 また、ここでは W3C に限らず、TC39 や WHATWG などの標準化団体のトピックについても扱います。 HTML headingoffset & headingreset https://html.spec.wh
CSS大解剖 1日目: 「仕様書」
本稿は、2024年2月頃に書き溜めていたシリーズです。最後まで温存させるのが勿体ないので、未完成ですがそのまま公開します(公開日: 2025/9/21)。そのため、内容の重複や記述方針の不一致があるかもしれませんが、ご理解ください。 CSSの仕様を理解するために、1日ごとにテーマを決めて説明する企画1日目です。今日のテーマは「仕様書」です。 仕様書 CSSはWebの標準化団体であるW3Cによって標準化され、各ブラウザベンダによって実装されている規格です。 標準化して挙動を仕様書として書き起こすことによって、Webブラウザ間の相互運用性が高まり、Web開発者も互換性の高い記述を心掛けてCSSを書くことができるようになります。 とはいえ、仕様書と実装の関係は必ずしも一方向的ではありません。「仕様書に記載される → 実装される」というシンプルな順番であるとは限らないのです。実装されたものにあわせ
CSSで最も使われているフレームワークはTailwind、2位はBootstrap。レイアウトで苦労しているのはCSS Gridなど。State of CSS 2025
CSSで最も使われているフレームワークはTailwind、2位はBootstrap。レイアウトで苦労しているのはCSS Gridなど。State of CSS 2025 CSSはHTMLで記述されたWebページのスタイルを設定するためのプログラミング言語の一種です。 数年前からは単に文書に対して静的なスタイルを設定するだけでなく、アニメーションのような動的な表現も記述できるようになるなど、Webアプリケーションのユーザーインターフェイスの構築のニーズを満たすように進化してきました。 State of CSS 2025では、5506人のソフトウェアデベロッパーから回答が寄せられました。回答数が多かった国は米国が19％、ドイツが9％、英国（UK）が7％、フランスが6％、オランダが5％、カナダが4％などとなっており、日本からの回答は全体の2％でした。 この記事では、State of CSS 20
CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は
CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単位もたくさんあります。 Webサイトやスマホアプリでフォントのサイズ、スペース、ポジション、FlexboxとGrid、要素の幅または高さに使用する場合、どのようにCSSの単位を選べばよいのかを紹介します。 What CSS length unit should you use? 以下は、そのフローの解説です。 フローの入り口は、下記のように分かれています。 ポジショニング、ディテール・エフェクトに適したCSSの単位 スペースに適したCSSの単位 フォントサイズに適したCSSの単位 FlexboxとGridに適したC
ウェブ制作者のためのNoto Sans JP最新実装ガイド - ICS MEDIA
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などたくさんの名
日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました – TAKLOG
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS kiso.css は、日本のWebサイトのための「基礎」となるリセットCSSです。日本語に最適化しつつ、アクセシビリティやカスタマイズのし易さを重視しています。 tak-dcxi.github.io kiso.cssは、単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSSです。その名が示すように、Webサイト構築の「基礎」として機能します。 有用なUAスタイルシートは活かしつつ、独自のスタイルも追加しているため、厳密には「リセットCSS」の定義から外れるかもしれません。しかし、類似のCSSが一般的に「リセットCSS」として紹介されている現状を踏まえ、検索性を考慮して本記事でもそのように呼称します。 kiso.cssはdestyle.cssやUA+を参考にしつつ、独自性も加え
JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
このアイデアはすごい！ テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック
テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。 実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。 まずは、実際のデモをご覧ください。 上部でダーク・ライトモードにしたり、アクセントカラーを変更できます。 See the Pen Focus table rows with :not(:focus-within) by coliss (@coliss) on CodePen. HTMLは、普通のテーブルです。 <table role="grid"> <thead> <tr> <th></th> <th>Name</th> <th>Email</th> <th>Subscription</th> </tr> </thead> <tbody> <tr>
JavaScript不要! HTMLとCSSでつくるカルーセルUI - ICS MEDIA
2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？ ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。
FlexboxよりGridを使う理由 | ダーシノ(@bc_rikko)
FlexboxよりGridを使う理由 先日、Grid First, Flex Thirdという記事を読んだ。要約すると「レイアウトを行う際は grid > block > flex の順で使うべき」という主張がなされている。 並びのレイアウトはFlexbox、格子状に区切ってどこに何を配置するかはGridを使う派だったのだが、Gridの有用性を再認識した。 Flexboxの使いづらいところ Flexboxで要素を並べると子要素の幅を指定しても圧縮されてしまう。 <section class="layout"> <div class="item"></div> <div class="item"></div> ... </section> .layout { display: flex; overflow-x: auto; } .item { width: 200px; } 子要素の幅を維持
最近のCSSを改めてちゃんと学んでみた
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
