2025年のz-index設計を考える社内勉強会用 またしても破綻しがちな z-index の設計を考える。 --- 【質問への解答】 Q. Sassのmapでの管理はどうですか？ 使用しなくて良いと思います。 理由としては、z-index を map で定義したとしても @each するわけでもなく旨味が無…
CSS Variablesはここまで進化した | gihyo.jp
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。 その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。 CSS Variablesとは CSS Variables（CSS変数）は、カスタムプロパティとも呼ばれ、CSSで変数を使用できる機能です。 CSS変数を使うと、ウェブサイト内で共通して使われるテーマカラーなどの値を使いまわしたり、動的にプロパティの値を変更することが可能です。さらに、CSSで用意されている色関数と組み合わせると、同じく動的に相対的な色の定義が行え、表現の幅を大きく広げることが可能です。 MisskeyのWebクライアントに
フォーム全体を非活性化（ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目 フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。 でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！ デモ https://codepen.io/ginpei/pen/ByBjLYR <fieldset> <fieldset>: フィールドセット要素 – HTML: ハイパーテキストマークアップ言語 | MDN <fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。 disabled
【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 ｜ Tips Note by TAM
2016.05.30 【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。 要素名::before{ content: 値; } 要素名::after{ content: 値; } このcontentプロパティの値を動的に変更したい時、jQueryを使用するのであれば、セレクタで、疑似要素::beforeまたは::afterを指定してアクセスすればいいのでは…？と思ってしまいますが、疑似要素はセレクタで直接指定することができません。そもそも擬似要素は非DOMであるため、JavaScriptから操作すること
State of CSS 2023
CSS is going through a period of unprecedented progress. Between :has(), container queries, subgrid, and many more, new features are making their way to browsers seemingly every month. The consequence of all this growth is that things can get a bit overwhelming. Thankfully this year we had Chen Hui Jing to help design the survey and guide us through the CSS jungle. And speaking of the survey, did
CSSにそのうち導入されそうな@scopeとその関連概念
気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。
Scoped CSS is Back
Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from the community, it died. Well, great news — it’s back. And it’s so much better than the previous version. Even better, the W3C spec is mostly stable, and there’s a working prototype in Chrome now. We just need a little interest from the commun
Don’t use custom CSS scrollbars
In the spirit of “everything old is new again,” browsers are once again supporting the ability to style the scrollbar. Much like custom CSS mouse cursors, I feel this is also a mistake. When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The scope of concern for the browser is this: The browser’s UI is infor
UAスタイルシートとリセットCSSとは - 2023 - kojika17
以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」
今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ そしてCSSの新機能として、単位を変数として使用できる「Variable Units（変数単位）」が登場しようとしています。 たとえば、--baseを8pxにし、4倍にしたい時はcalc(4 * (var(--base)))と記述していましたが、4--baseで32pxになります。 The Future of CSS: Variable Units by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Var
CSS設計における、すべてがコンポーネントであるという誤謬
後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB
破綻しにくい CSS 設計手法と命名規則
HTML 側の内容とセレクタがマッチすればスタイルが適用されます。このように CSS はとても単純な仕組みですが、その単純さゆえに大規模な実装では管理が難しく簡単に破綻してしまう問題点を抱えています。 CSS が破綻してしまう主な理由は以下の通りです。 セレクタには詳細度 (優先順位) が存在するスタイルには子要素にまで継承する同じセレクタを多重定義できるHTML 側の各要素はスタイルが複合的に適用される 開発現場では CSS が単純であるがために軽視されてしまう嫌いがあります。多くのプロジェクトでは Java や SQL などのコーディング規約やアンチパターンなどは用意されていますが、CSS は用意されていないケースは珍しくありません。その結果、統一されたルールがない状態でプロジェクトが進み、開発が佳境にさしかかったタイミングで CSS の逆襲が始まります。CSS が悪いわけではありませ
CSS 条件付き規則 （CSS Conditional Rules） Level 5 仕様 （草案） に追加された @when と @else 規則について
CSS 条件付き規則 （CSS Conditional Rules） Level 5 仕様 （草案） に追加された @when と @else 規則について つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに加わった @when、および @else 条件付き規則について面白そうだったので簡単に紹介。 つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに @when、および @else 条件付き規則が加わりました。 CSS Conditional Rules Module Level 5 - W3C First Public Working Draft, 21 December 2021 CSS
Your CSS is an interface
My partner is learning Japanese using the Duolingo app. They’ve been dutifully opening the app and doing daily challenges for over 400 days now. A few days ago, they shared this screenshot with me: If I could wager a guess, it looks like there was a bug with dark mode color logic on their multiple choice button component. I totally get it. Managing color across a mature application like Duolingo i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】子要素が特定の数の場合にのみスタイルを適用する方法 - Qiita
全ブラウザ対応したcontainer queryは何がスゴイのか？
今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022
PostCSSの導入検証 / r&d_meetup_css_t_okkan
place-itemsで縦横中央寄せ（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 16日目） | Ginpen.com
What's the difference if I put css file inside <head> or <body>?