長年の悩みがこれで解決！ CSSのposition: stickyの仕様が変わり、上部固定と左端固定が同時に実装できるようなります
テーブルのヘッダを上部に固定し、さらに列の1つを左端に固定する、これを実装するのは非常に大変です。 一見、position: sticky;を使って、top: 0;とleft: 0;で実装できそうですが、実際にはどちらか一方しか固定されません。JavaScriptを使用してもかなりの量になります。 ここで朗報です、9年間続いていたCSS仕様の問題が解決されます！ position: sticky;がアップデートされ、軸ごとにもっとも近いスクロール位置に追従できるようになったため、このヘッダと列を上部と左端にそれぞれ固定するのが簡単に実装できるようになります。 CSS position: sticky now sticks to the nearest scroller on a per axis basis! by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記
テキストサイズの拡大設定の問題と解決策
WCAG 2.2 では、ユーザーが画像拡大ソフトや支援技術を使用せずに、200% までテキストを拡大してもコンテンツが正しく表示されることを要求しています。しかし、テキストサイズの拡大に関しては、ブラウザや OS の設定を尊重せず、ユーザーがテキストサイズを拡大してもコンテンツが拡大されないという問題が長年存在していました。この記事では、この問題の原因と解決策について解説します。 WCAG 2.2 では、ユーザーが画像拡大ソフトや支援技術を使用せずに、200% までテキストを拡大してもコンテンツが正しく表示されることを要求しています（1.4.4 Resize Text）。ロービジョンのユーザーの多くは OS やブラウザのテキストサイズの設定を使用してテキストを拡大しています。しかし、テキストサイズの拡大に関しては、ブラウザや OS の設定を尊重せず、ユーザーがテキストサイズを拡大してもコン
ブラウザの強制ダークテーマ対策で `border-color: transparent` を避ける
Web 技術は後方互換性を確保しつつ発展していますから、古い技術で作られた Web ページでも正しい使い方をしている限りは基本的に壊れることはありません。しかし既存の概念を覆す大きな出来事が起こった場合、稀にこの原則から外れることがあります。 2024年から2025年にかけて複数のブラウザに強制ダークテーマが実装されたことは、CSS 的にはこれまでの歴史の中でもエポックメイキングな出来事だったと思います。Netscape と IE が覇権争いをしていた時代と比べて、今はブラウザごとの表示差異に悩まされることは皆無となってきたところ、強制ダークテーマはレンダリングエンジンとは無関係にバラバラの表示結果となり、またそのナレッジも充分に蓄積されていません。 すなわち強制ダークテーマは利用者としては革命的な機能である一方で、Web 制作者の立場からは相当に悩ましい存在と言えます。そして本来あっては
【海外記事紹介】10万サイトの解析データから見たCSS利用動向 — モダンCSSの普及が進むも、今なお蔓延する!important
2月15日、Project Wallaceが「The CSS Selection」と題した記事を公開した。この記事では、10万件以上のウェブサイトにおけるCSSの利用実態と統計データについて詳しく紹介されている。 2月15日、Project Wallaceが「The CSS Selection」と題した記事を公開した。この記事では、10万件以上のウェブサイトにおけるCSSの利用実態と統計データについて詳しく紹介されている。 以下に、その内容を紹介する。 概要 本調査は、大規模なCSSの利用状況を俯瞰することを目的として実施されたものである。これまで「Web Almanac」が担ってきたCSSの年次報告が2022年を最後に途絶えている現状を受け、Project Wallaceの解析エンジンを用いて独自の視点から分析が行われた。 CSSは近年、新しい機能やプロパティ、アットルール（at-rul
画像を囲うボーダーの色を半透明にしてコンテンツに馴染みやすくする
CSSのborderプロパティに半透明の色を指定すると、ボーダーが透過してその背景と合成される。 button { border: 2px solid oklch(0 0 0 / 0.25); background-color: rebeccapurple; } ボーダーの色はその背景に応じたものになり、単なる不透明なグレーを使うよりも馴染んで見えるようになる。背景が単色であれば、必ずしも半透明でなくても個別に調整した色を使うことができるが、特に画像やグラデーションが用いられている場合はこの手法が効果的である。 しかしimg要素を使う場合、borderプロパティでは同様の効果を実現できない。img要素のボーダーは画像の外側に描画されるが、前述の効果を実現するには、画像の上に覆い被さるように位置していなければならないからだ。box-shadowプロパティとinsetキーワードを使ってボーダー
text-scale によるユーザ指定倍率での文字拡大 | blog.jxck.io
Intro 小さい文字が見づらい場合、ユーザは OS の文字サイズを大きくすることで、視認性を調整することができる。 こうした機能は大抵の OS が備えており、システムフォントのサイズなどに反映される。 しかし、その指定がそのまま Web コンテンツにも反映されるかというと、必ずしもそうではない。 この問題を解決するために、いくつかの標準が提案され、策定と実装が進んでいる。 サイズの相対値指定 「ユーザは文字を拡大することがある」というのは、おそらく多くの開発者が認識しているだろう。 WCAG を引き合いに出すなら、以下のセクションで「200% までの拡大に対応すべき」といった基準(AA)がある。 text can be resized without assistive technology up to 200 percent without loss of content or fun
Introducing ReliCSS: A Tool for Front-End Archaeology
Introducing ReliCSS: A Tool for Front-End Archaeology 28th of January 2026 As a contracting front-end developer and Design Systems consultant, I don't always get to work on new things. Sometimes I work within codebases. Sometimes alongside them. Sometimes these codebases are years and years old. When you dive into these projects, you're not just reading code, you're excavating years of decisions,
Tailwind CSS × React に cn が必要な理由
はじめに Tailwind CSS と React を組み合わせて開発していると、次のようなコードを頻繁に目にします。 <div className="px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded"> 最初は問題ありませんが、条件分岐や状態ごとのスタイルが増えてくると、className はすぐに破綻します。 本記事では、Tailwind CSS × React の現場でよく使われる cn というユーティリティが なぜ事実上必須になるのかを、具体例とともに解説します。 cn とは cn は className を安全かつ読みやすく組み立てるためのユーティリティ関数です。 React + Tailwind 界隈では、以下のような役割を担います。 条件付きクラスの整理 classNa
タイポグラフィ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 デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点で
ブラウザのレイアウトエンジンを自作してみた
前々から自作ブラウザを作ってみたかったんですよね。作ります。 今回はブラウザのGUI周りの、主にレイアウトの座標計算モジュールを自作しました。CSS のボックスモデル, Flex, Grid の座標計算というのが伝わりやすいでしょうか。 HTMLパーサ/CSSパーサ/CSSクエリエンジン/ペインティングも一部実装しましたが、レイアウト可視化のテスト用と割り切っていて、ちゃんと作ったのは主にレイアウトの座標計算周りになります。 作ったもの 雑なプレイグラウンド こんな感じです Terminal で Sixel を描画して Google を表示したもの。今回は主に座標計算周りの実装なので background-color やフォント周りは未実装なんですが、矩形だけでは自分の目視デバッグもしんどかったので、最低限のビットマップフォントをレンダリングできるようにしました。 リポジトリ npm:@m
空のグリッドセルを使う余白設計を広めたい – TAKLOG
昨今では「margin不要論」を唱える方々が目立つようになっています。margin不要論者の意見としては、主に以下のような点が挙げられます。 marginの相殺が厄介であること相殺を防ぐためにmarginを上下どちらに付けるかという宗教論争が起こりやすいことgapやpaddingで余白を設計すればmarginを使う機会が減るこれに関しては、以下の記事がよくまとまっていますので、ぜひご覧ください。 私がマージンをできるだけ使いたくない理由 - Qiita はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと... qiita.com 私個人としては、marginは未だに現役であ
CSS Linter の現在地 2025年のベストプラクティスを探る
フロントエンドカンファレンス東京 2025 (2025/09/21) での発表資料 https://fec-tokyo.connpass.com/event/352581/
ウェブ制作者のための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+を参考にしつつ、独自性も加え
背景色を前景色として扱う場合はシステムカラーをフォールバックする – TAKLOG
上記のような実装はよく見かける手法ですが、この実装はアクセシビリティ的な問題を孕んでいます。 それは「強制カラーモード」下での挙動であり、background-color は強制カラーモード下では明示されたシステムカラー以外はブラウザで指定された値に強制的に上書きされてしまう点です。 つまり、上記のような実装では強制カラーモード下ではボタンの背景色もろとも同一のシステムカラーに置き換えられるため、mask-image で設定したアイコンは消失してしまいます。 あくまで「装飾」的なものであればそこまで問題にはならないかもしれませんが、チェックボックスやラジオボタン、アイコンのみのリンクなどで背景色を前景色として使用するケースも存在し、その場合は強制カラーモード下では可視化されず利用できなくなります。これに関してはアクセシビリティを強みとしている制作会社のWebサイトでも見受けられ、強制カラー
font-size には rem を使うべきかどうかについての見解
font-size-rem.md font-size には rem を使うべきかどうかについての見解 結論 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。 ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。 結論に至った背景 「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。 font-size だけ rem を指定すればいいという訳ではなく、文字拡大に伴ったレイアウトの変更に耐えうる設計とする必要がある。つまり、font-size だけでなく文字の拡大に依存する余白やサイズなどもフォントサイズを基準とした相対値（remやemなど）で指定する必
次期 Windows で Chrome (Edge) のデフォルト表示が Noto フォントになりそうなので、ズレない CSS を追加する
TL;DR 今後のデフォルトの Noto Sans を尊重するのであれば text-box: trim-both ex alphabetic でハーフリーディング（ハーフレディング）を除去して上下の位置を合わせる。 もしくは、明示的に font-family: Meiryo を指定して Noto Sans で表示されないようにする。 Windows での Noto フォントの標準搭載 現在の Release Preview 版の Windows では Noto フォントが標準搭載されるようになっている。 [Noto Fonts] This update enhances text quality and customer experience in web browsing for Chinese, Japanese, and Korean languages by introducing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web フォントを使って contenteditable から脱出する
日本語縦書きWebの現在地 2025 - フロントエンドカンファレンス東京
2025年のz-index設計を考える
