こんなAI時代に、新しいCSS設計フレームワークを作る理由
最近は なんでもかんでも、ぜーーーーんぶ、 Tailwind CSS。 なぜならAIが吐き出すのがTailwindだから。AIにCSSなんて書かせたら余計カオスになるから。 そんな、Tailwind CSSが圧倒的一強となった世の中で、自分は今「Lism CSS」 という CSS設計フレームワークを開発しています。 しかし「こんなAI時代に今さら新しいCSS設計理論？フレームワーク？バカじゃねーの」という声が聞こえてきます。「WEBサイトなんてAIが一瞬で作れるしCSSなんて書く必要も覚える必要もなくなるのに」と。 ぐぬぬ...たしかに。 とは自分でも少し思ってしまうものの、はたして本当にバカげていることなのでしょうか...。 私は、違うのではないかと思っています。 放っておけばAIによる無秩序なコードが無限生成されていく今だからこそ、新しいCSS設計理論の構築に挑戦する価値がある、と思っ
Web 標準動向 2026年1月版
こんにちは！ サイボウズ株式会社 フロントエンドエンジニアの mehm8128 (@mehm8128) です。 はじめに サイボウズは 2025 年 4 月より、W3C のメンバーに加入しました。 標準化プロセスに関わることができるようになるための最初の一歩として、フロントエンドエンジニアの一部のメンバーは積極的に Web 標準のキャッチアップを行っています。 そこで、毎月メンバーが興味を持った Web 標準に関する話題や、実際に標準化プロセスに関わることができた場合にはその報告などを 1 つの記事としてまとめ、紹介していきます。 また、ここでは W3C に限らず、TC39 や WHATWG などの標準化団体のトピックについても扱います。 HTML Blink: Prototype: Canvas text writing mode support Canvas 上でのテキスト描画において
ブラウザのレイアウトエンジンを自作してみた
前々から自作ブラウザを作ってみたかったんですよね。作ります。 今回はブラウザのGUI周りの、主にレイアウトの座標計算モジュールを自作しました。CSS のボックスモデル, Flex, Grid の座標計算というのが伝わりやすいでしょうか。 HTMLパーサ/CSSパーサ/CSSクエリエンジン/ペインティングも一部実装しましたが、レイアウト可視化のテスト用と割り切っていて、ちゃんと作ったのは主にレイアウトの座標計算周りになります。 作ったもの 雑なプレイグラウンド こんな感じです Terminal で Sixel を描画して Google を表示したもの。今回は主に座標計算周りの実装なので background-color やフォント周りは未実装なんですが、矩形だけでは自分の目視デバッグもしんどかったので、最低限のビットマップフォントをレンダリングできるようにしました。 リポジトリ npm:@m
CSS大解剖 15日目: 「方向」
物理的な方向 ほとんどの人は画面の物理的な方向についての直感を持ち合わせているでしょうから、これについて追加の説明は不要かもしれません。しかし、せっかくなのできちんと前提を整理してみます。 CSSは主に2次元の視覚的なデバイスにおける文書のスタイルを規定します。このような視覚的なデバイスとして代表的なのが以下の2つです。 液晶などのディスプレイ (PC・タブレット・スマートフォンなど) 紙 これらは通常、机の上に横にして置かれるか、垂直に立てて使われるか、またはその中間の角度で閲覧されます。このとき、上下と左右は以下のように決められます。 画面の左右 (left /right) とは、閲覧者から見た左右です。 画面の上下 (top / bottom) はもう少し複雑です。 横置きの場合は、閲覧者から見た奥が上で、手前が下です。 縦置きの場合は、物理的な(重力に基づく)上下と一致します。 も
CSS大解剖 1日目: 「仕様書」
本稿は、2024年2月頃に書き溜めていたシリーズです。最後まで温存させるのが勿体ないので、未完成ですがそのまま公開します(公開日: 2025/9/21)。そのため、内容の重複や記述方針の不一致があるかもしれませんが、ご理解ください。 CSSの仕様を理解するために、1日ごとにテーマを決めて説明する企画1日目です。今日のテーマは「仕様書」です。 仕様書 CSSはWebの標準化団体であるW3Cによって標準化され、各ブラウザベンダによって実装されている規格です。 標準化して挙動を仕様書として書き起こすことによって、Webブラウザ間の相互運用性が高まり、Web開発者も互換性の高い記述を心掛けてCSSを書くことができるようになります。 とはいえ、仕様書と実装の関係は必ずしも一方向的ではありません。「仕様書に記載される → 実装される」というシンプルな順番であるとは限らないのです。実装されたものにあわせ
CSS の ident() による動的な custom-ident の生成 | blog.jxck.io
Intro CSS で Custom Ident 値を動的に生成する ident() が提案されている。 策定中の仕様をベースに解説する。 Anchor Name の動的生成 Popover の Anchoring は、anchor-name と position-anchor の組で対応付けられる。 <a id=anchor>this is anchor</a> <div popover>this is popover</div> <style> #anchor { anchor-name: --anchor; } [popover] { position-anchor: --anchor; } </style> 一方、以下のように複数の Anchor に対して、紐づけを変えながら単一の Popover DOM を再利用する場合も、全ての対象に anchor-name を振り、Popov
最近のCSSを改めてちゃんと学んでみた
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
Thank you - styled-components
First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As I write this in 2025, styled-components as a project is in "maintenance mode". There are a number of reasons for this: The React core team has decided to defac
アクセシビリティを気にし出したエンジニアへ、強制カラーモードの紹介
この記事は、アクセシビリティ Advent Calendar 2024 - Adventar の10日目の記事です。 初めまして、たじまん です。zennのブログ投稿デビューします。 私はとある会社でアクセシビリティエンジニアという名前で、プロダクトチームのイネイブリングなどをするお仕事をしています。 このブログを書くことになったきっかけ 昨今のwebフロントエンド界隈では、コントラスト比やフォームコントロールのアクセシビリティネームをきちんと設定したりと当たり前品質が高まっている気がします。いろんな人がサービスを作る時の指針に「使えるの範囲の広さ」を入れていることが嬉しいです。 そこで、そういったアクセシビリティちょっと気にし始めましたというエンジニアへむけて「強制カラーモード」という使い方があることを紹介したいと思います。 強制カラーモードとは？ 強制カラーモードとは、色のコントラスト
なんぞこれ #fffより 白い色（iPhone css hack, HDR） - Qiita
どうもー、ついにニートから社会復帰したset0gut1です。職場に入って数日目に体験した怪奇現象を、小噺としてひとつ。 （そうは見えないかもしれませんが、この記事はLabBaseテックカレンダー Advent Calendar 2024の4日目の記事です。） mission: ボタンがチカチカするのを直す 新しい会社に入って数日目、仕事の雰囲気に慣れるため、ちょっと軽いタスクでもいただこうかなーと思って選んだのが ボタンがチカチカするのを直す みたいなチケットでした。で、 iPhone 実機で問題のボタンを押すと、たしかになんかチカチカしてる。 ↑こんな感じで、1回タップするとボタン部分の背景色が、約1秒間で gray → white → gray → white → gray みたいな感じに変化してました。 hover で色が変わるんだろうけど、一瞬 hover が途切れる挙動になってる
CSS Nesting Module/CSSの入れ子指定 ［CSS Modern Features no.4］ | gihyo.jp
乗りこなせ！ モダンフロントエンド CSS Nesting Module/CSSの入れ子指定 ［CSS Modern Features no.4］ こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 CSS Modern Features、今回取り上げるCSSの機能はCSS Nesting Moduleです。 CSS Nesting Moduleは、CSS定義のネスト（入れ子）記述を可能とする新しいCSS構文です。CSSのネストはSassやPostCSSといったCSSプリプロセッサ経由で変換することで似た構文が使えるため、そちらをすでに利用したことのある人もいるかもしれません。 次のコードはCS Nesting Moduleの記述例です。 /* .mainクラスを持つ要素の 子孫のa要素のカラーを変更 */ /* 従来の記述 */ .main a { color: re
今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
Dialog と Popover #10 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Tooltip 今回は、Menu の実装を考えてみる。GitHub でいうとこの部分だ。 元となるボタンによって表示され、このボタンからの相対位置で調整されるため、Anchor Positioning を活用することになる。非常によくある実装パターンだ。 HTML の仕様にも、類似の実装が Example として掲載されている。 6.12 The popover attribute https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribut
Dialog と Popover #8 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Cookie バナー 次は、「Cookie 利用への同意」、いわゆる Cookie バナーの UI について考えてみる。想定するのは以下のようなものだ。 前回の規約への同意と異なり、このバナーは画面表示時から右下に表示され、同意か拒否を選択するまで表示し続ける。つまり、表示中は他の操作をブロックしたりはしない。 つまり Dialog ではあるが Modal ではないため、show() する前提で実装を考えていく。 HTML HTML の注意点は、前回の規約と大きくは変わらない。 まず、最初から表示しておくために open 属
Dialog と Popover #7 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
Dialog と Popover #6 | blog.jxck.io
Intro ついに <toast> -> <popup> -> popup -> popover として、要素から属性になり名前も決まった。 とはいえ実装は popup とそんなに変わらないので、popup でやっていた Origin Trials を継続しながら、徐々に実装を進めていくフェーズが 2022/12 くらいの話だ。 Intent to extend Origin Trial: Popover API https://groups.google.com/a/chromium.org/g/blink-dev/c/kZXexHhH7EA/m/UmQYwGW3DAAJ しかし、popover を実用するには足りていない議論があった。それが Animation だ。 Display and content-visibility animations <dialog> や popover
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号)
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr
Dialog と Popover #5 | blog.jxck.io
Intro このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。 popup が紆余曲折を経て popover 属性になり、2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、popover の実装は各ブラウザで一気に話が進む。 Release Notes for Safari Technology Preview 166 https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/ News from WWDC23: WebKit Features in Safari 17 beta https://webkit.org/blog/14205/news-from-wwdc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Magic UI
GitHub - yudppp/styled-formatter: A CLI tool to format `styled-components` template literals in your codebase. It ensures that your CSS-in-JS remains clean, consistent, and easy to read, supporting both `styled-components` and `css` tagged template litera
