CSSのattr()関数が進化！ HTML属性値を参照する新しい使い方 - ICS MEDIA
HTMLの属性値をCSSから参照できるattr()関数は、これまで::beforeや::afterといった疑似要素のcontentプロパティで使える機能として知られていました。 attr()関数の拡張構文は、CSSの値や単位の扱いを定義する仕様書「CSS Values and Units Module Level 5」で定義されています。さらに、Chrome・Edge 133（2025年2月）以降では、この拡張構文をcontentプロパティ以外でも利用できるようになりました。 拡張されたattr()関数には、次のようなメリットがあります。この記事では、デモを交えながら紹介します。 個別のstyle属性やクラスを減らせる HTMLの属性値をCSSの値として直接利用できる ※注意：本記事のデモは、Chrome・Edge 133以上でご覧ください。 1. HTML属性で色・サイズを指定するデモ
業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話
はじめに はじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。 私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリングには Tailwind CSS を採用しており、プロジェクト開始から 1 年半が経過してコードベースは 200 ファイルを超える規模になっていました。 私が入ったタイミングでは、すでにフロントエンドの技術選定に関わったメンバーは異動しており、デザイナーも不在。スタイルのルールが不明確なまま、画面数とコードが増え続けている状態でした。 初めてプロダクトに触れたとき、「画面ごとに見た目が少しずつ違っていて、統一感がないな」と感じました。業務に支障はないものの、文字サイズやフォントの太さ、余白の取り方が画面ごとにバラつい
主要ブラウザに対応してほしい！2026最新Web技術25選 | gihyo.jp
本連載は分散型マイクロブログ用オープンソースソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyの開発を行う上では、「活用したいがまだ一部のブラウザにしか実装されていない」技術がよくあります。JavaScriptを用いると非対応ブラウザでも再現可能なものもありますが、ネイティブに実装されているに越したことはありません。 今回は、今後それらの技術が広く実装されることに期待を込め、各主要ブラウザの対応状況も示しつつ簡単に紹介します。 なお、対応状況を示すアイコンの意味は、✅＝完全対応、⚠️＝部分対応または不安定、❌＝未対応とします。 注意 各項目では、MDNなどの技術仕様のドキュメントへリンクをかけています。 ただし、MDNに示されている対応状況は、稀に間違いや反映の遅れがあるほか、実際は「一部対応」のところ「完全対応」表示になってし
ブラウザのレイアウトエンジンを自作してみた
前々から自作ブラウザを作ってみたかったんですよね。作ります。 今回はブラウザのGUI周りの、主にレイアウトの座標計算モジュールを自作しました。CSS のボックスモデル, Flex, Grid の座標計算というのが伝わりやすいでしょうか。 HTMLパーサ/CSSパーサ/CSSクエリエンジン/ペインティングも一部実装しましたが、レイアウト可視化のテスト用と割り切っていて、ちゃんと作ったのは主にレイアウトの座標計算周りになります。 作ったもの 雑なプレイグラウンド こんな感じです Terminal で Sixel を描画して Google を表示したもの。今回は主に座標計算周りの実装なので background-color やフォント周りは未実装なんですが、矩形だけでは自分の目視デバッグもしんどかったので、最低限のビットマップフォントをレンダリングできるようにしました。 リポジトリ npm:@m
新人AI禁止令と、その結果の答え合わせ - Qiita
はじめに こんにちは、和田です。いえらぶGROUPで開発部の執行役員を務めています。 弊社も例に漏れず、今年はAI活用に非常に注力してきました。Cursorを全エンジニアに導入し、テックリードにはClaude Codeを配布、業務効率化・実装スピード強化・精度向上を進めてきました。 そんな会社で、私はある新人エンジニアに対して「AIの使用を禁止する」という判断を下しました。 先日ちょっと話題になってましたね、こちらの彼の話です。 社内でも圧倒的なAI推進派の私がなぜそのような判断をしたのか。そして3ヶ月後、その新人はどう変わったのか。この記事では、私の目線からのある種答え合わせ的なつもりで経緯と結果をまとめてみました。 最初は「AIをどんどん使わせていた」 新人が入社した当初、私は彼にもCursorを使わせていました。なんならClaude Codeも使わせていました。理由はシンプルです。
【海外記事紹介】HTMLは死んだ — 問題だらけのWeb技術をどう未来につなげるか
8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 以下に、その内容を紹介する。 DOMとHTMLの現状：終焉と限界 記事は、Web開発の現場において、HTMLやDOMが肥大化し、今や誰も全容を把握できないほど複雑化しているという問題意識から始まる。 たとえば、Chromeにおけるdocumen
便利？ それとも混乱？ CSSのif()関数 - ICS MEDIA
CSSの仕様の策定を行っているCSS Working Group（CSSWG）では、CSSにif()関数を追加する提案が出されています。このif()関数は文字通りCSSにおける分岐を行う関数です。仕様策定中ではありますが、すでにChrome・Edge 137（2025年5月リリース）より利用可能となっています。この新しいif()関数の特性、もたらすメリット、そしてデメリットについて解説します。 ▼Chrome・Edge 137以降のブラウザでご確認ください サンプルを別ウインドウで開く コードを確認する if()関数の基本的な使い方 CSSのif()関数の基本的な使い方について解説します。if()関数はCSSの値を条件分岐するので値部分に記述します。 /* --colorの値がprimaryなら赤、それ以外は青 */ .hoge { background-color: if( style(
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示 Visual Studio Code 1.100もしくはそれ以後のバージョンでは、標準でコード内のHTMLやCSSがWeb標準のBaselineに対応しているかどうかをチェックする機能が搭載されていることが、web.devブログで紹介されています。 これにより、HTMLやCSSが主要なWebブラウザで問題なく表示されるかどうかが、Visual Studio Codeで簡単にチェックできるようになりました。 Baselineは安心して使えるWeb標準 Baselineとは最新のWeb標準のサブセットです。Baselineに含まれているHTMLやCSSの機能であれば主要なWebブラウザで実装済みであるため、Webアプリケーション開発者が安心して使える機
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA
CSSで特定の形に切り抜く（マスキングする）にはmask-imageプロパティが便利です。マスク用の画像をmask-imageプロパティを使って要素に適用すれば、その画像の不透過部分のみにマスキングできます。mask-imageプロパティに関連して2024年から使用可能になったmask-compositeプロパティを使うと、マスクの合成方法を指定でき、より幅広いマスク表現ができるようになりました。この記事ではmask-compositeプロパティについて解説します。 サンプルを別ウインドウで開く コードを確認する mask-compositeプロパティの値とそのマスク結果の違い mask-compositeプロパティは、複数のマスク画像をどのように合成するかの方法を指定するためのプロパティです。実はmask-imageプロパティは複数画像の指定にも対応しています。複数画像からマスク領域を生
Dialog と Popover #7 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ | gihyo.jp
乗りこなせ！ モダンフロントエンド 新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの麦島です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズ フロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載していきます。モダンな仕様の紹介・普段使っているライブラリのコア部分で何が行われているのかの解説・ハンズオンなど、さまざまな内容でお届けする予定です。 CSSの進化 本連載での最初のコンテンツは「CSS Modern Features」です。 CSSの表現力は年々新しい仕様の策定や実装とともに進化しています。従来であれば複雑なCSS定義が必要であったものが簡潔に表現できたり、Ja
便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver
DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。 Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライブラリのデモ ライブラリのインストール ライブラリの使い方 ライブラリの仕組み ライブラリのサポートブラウザ カスタムプロパティのトランジションに関する注意事項 はじめに
スタイルをカスタマイズ可能な新しい `<select>` 要素
2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発者は <s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com
Web Motion Catalog
https://inspira-ui.com/
GitHub - bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.
FlyonUI - Free Tailwind CSS UI Components Library
