2024年、CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証環境など

2024/11/07 15 users フレームワーク CSS エバーグリーン 疑似クラス 現状

CSSの進化は速く、IEのサポートが終了してさらに速くなりました。現在はエバーグリーンのブラウザ（最新版に自動アップデートするブラウザ）となり、モダンCSSの新機能が今までよりもすぐに使用できるようになっています。 2024年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2024」を紹介します。今年は例... 続きを読む

デザインシステムにおけるコンポーネントライブラリ管理の改善 - enechain Tech Blog

2024/10/24 19 users コンポーネント 乖離 バリエーション 実装 浸透

はじめに コンポーネントライブラリ管理の課題 デザインと実装の乖離 見た目における乖離 プロパティの乖離 コンポーネントやバリエーションの増加による管理の負担 ガイドラインの浸透 さいごに はじめに enechainプロダクトデザインデスクの伊藤です。現在、私は複数プロダクトのデザインを行いながら、デザインシステ... 続きを読む

最近リリースされたCSSの新機能と新しい関数のまとめ

2024/10/16 18 users CSS 新しい関数 ワーキングドラフト まとめ 新機能

CSSは気がつくと、どんどん進化しています！ 先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。 計算値にキーワード（auto, max-conetntなど）を使用できるcalc-size()関数、ランダムな値を... 続きを読む

便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver

2024/10/08 10 users MutationObserver DOMツリー CSS 登場

DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新... 続きを読む

display:contentsって何？どんな時に使うと便利なの？ - Qiita

2024/08/29 68 users Qiita display contents 結論 要素

先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グ... 続きを読む

ブロック レイアウトの align-content プロパティが Baseline の一部になりました  |  Blog  |  web.dev

2024/08/29 9 users baseline alignment web.dev 分類

ブロック レイアウトの align-content プロパティが Baseline の一部になりました コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ブロック レイアウトとテーブル レイアウトで、CSS Box Alignment の align-content プロパティを使用できるようになりました。これにより、フレキシ... 続きを読む

box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない

2024/08/12 13 users box-shadow フォーカス カスタマイズ 要素 デザイン

box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない 2024.08.11 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモード... 続きを読む

改行可能な ruby 要素と CSS ruby-align プロパティ  |  Blog  |  Chrome for Developers

2024/07/28 17 users 改行 ルビ Ruby 発音 Blog

HTML の <ruby> 要素は、特に東アジア言語のテキスト表示を改善するための強力なツールです。この要素を使用すると、親文字の上下左右に発音やその他の補足情報を表示できます。Chrome 128 以降では、Ruby 要素が改行可能になり、またruby-align CSS プロパティを使用してルビと親文字の揃え方を設定できるようになりま... 続きを読む

Object.groupBy で作られるオブジェクトの prototype は null - Object.create(null)

2024/07/05 15 users prototype オプシ Object.create 継承

おさらい: prototype JavaScript のオブジェクトはみんな prototype というのを持っていて, この prototype からプロパティを継承, より正確には, プロパティアクセス時にそのプロパティがオブジェクトに存在しなければ prototype を辿って見つけにいくことになっている. あるオブジェクトを prototype とした別のオブジ... 続きを読む

知らなかったCSSプロパティ 3選 - Qiita

2024/06/29 48 users Qiita CSSプロパティ Cur CSS ボーダー

はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 cur... 続きを読む

SVG アイコンの表示に mask-image CSS プロパティを使用する

2024/06/15 13 users SVG CSS マスキング アイコン 外部

SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります... 続きを読む

TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita

2024/06/10 167 users Qiita TypeScript 型レベルプログラミング

はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなど... 続きを読む

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

2024/06/01 8 users スクロールバー scroll auto 画面 ボックス

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・... 続きを読む

誤解しているかも！ CSSの詳細度について、よくある誤解を解説

2024/05/23 12 users CSS アルゴリズム 誤解 数字 要素

CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。 このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Spec... 続きを読む

「新入社員向け使える豆知識講座」間違って消しちゃいけないファイルを消しちゃった時の対処法→ちゃんと消しちゃったって報告をしろ、こんなの間に受けるな新人

2024/05/08 31 users 新人 新入社員向け ファイル 対処法 報告

マラ짱 @4bose4_ 🌟新入社員向け使える豆知識講座🌟 間違って消しちゃいけないファイルを消しちゃった時、該当フォルダ内で右クリック→「プロパティ」→「以前のバージョン」を選択し、フォルダのバージョン内に現時刻より以前の時刻のフォルダを選択し、開く→消してしまったファイルが出てくるのでそれを持ってくる 2024... 続きを読む

CSSをより深く理解する、プロパティの値に無効な値を設定する（IACVT）とどのように処理されているのかを解説

2024/04/18 12 users カスタムプロパティ CSS キーワー 解説 color

CSSで無効な値、たとえばcolor: 20px;のようにcolorプロパティにカラー値以外を設定したり、background-colorにカラー値以外をカスタムプロパティで設定したりすると当然その値は反映されません。 CSSにおいて値の処理がどのように実行されているのかを紹介します。無効な値だけでなく、値の上書き、値の継承、キーワー... 続きを読む

ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

2024/03/26 92 users カーニング 垂直方向 ダークモード light-dark 中央

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む

Yu Gothic UIに text-spacing-trim を適用するとバグる

2024/03/25 25 users パク 游ゴシック Windows テキスト 標準

以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。 現象 text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。 halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、G... 続きを読む

CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes

2024/02/07 24 users aspect-ratio border clip-path

HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと... 続きを読む

GA4 と Microsoft Clarity で定量と定性分析の間で旅をする - ブログ - 株式会社JADE

2023/10/10 5 users 定量 村山 ユニバーサル アナリティクス 株式会社JADE

こんにちはあるいはこんばんは。村山(X id:muraweb_net)です。 ユニバーサル アナリティクス が2023年7月に終了し、少しずつデータが停止されるプロパティが増え、いまや GA4 で主に分析される方も増えたかと思います。 ユニバーサル アナリティクス の次世代版としてリリースされた GA4 も分析において得意な面と不得意... 続きを読む

CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます

2023/10/04 19 users subgrid CSS 見出し テキスト ブラウザ

先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（... 続きを読む

CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

2023/09/21 21 users CSS CSSアニメーション アニメーション 実装 要素

先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をア... 続きを読む

CSSの2023年現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど

2023/09/07 145 users フレームワーク CSS エバーグリーン 疑似クラス 要因

CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介... 続きを読む

CSSのコード品質向上のためのStylelint入門 - ICS MEDIA

2023/05/25 48 users CSS ICS MEDIA lint コード品質向上 重複

Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になり... 続きを読む

GA4がわからないを分解して学習すべき項目を明確にする方法 - ブログ - 株式会社JADE

2023/05/18 387 users 株式会社JADE GA4 項目 方法 Twitter

こんにちはあるいはこんばんは。村山(twitter id:muraweb_net)です。 ユニバーサルアナリティクスを見ようとすると、アラートが表示されるようになりましたね。本格的に GA4 のことを考える方も増えてきたのではないでしょうか。 GA360 のプロパティや GA4 プロパティが存在するのに、アラートが一括で表示される手法は... 続きを読む