New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) CSSのclip-pathで「geometry-box」値 CSSのclip-pathで「xywh()」と「rect()」値 Chrome 119で追加された4つの新しいCSSの機能 11/1にリリースされたChrome 119で4つの新しいCSSの機能が追加されました。対象となるChrome 119は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。 以下、その4つの新
Time-based CSS Animations
In my earlier post Time Uniform For CSS Animation, I took a note about a way to do CSS animations with time ticks instead of keyframes. It was limited applicable because CSS lacked the ability of doing complex Math calculations. After years of wait, CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions. It's time to revisit the time-based way of anim
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね？ 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @font-faceの新しい構文のブラウザサポート @font-faceによる可変フォントの使用方法 tech()によるカラーフォントの使用方法 @supportsでも同等の機能が使用できる @font-faceの新しい構文のブラウザサポート CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Fir
親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS 2024.03.30 CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価し、指定された条件が一致する場合にスタイルが適用されます。 CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーは以下の 2 種類に分類されます。 コンテナサイズクエリー：コンテナ要素の現在のサイズに基づいてスタイルを適用する。e.g. @container (min-width: 3
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
変なWebサイトを作った話｜Koji Kimura
結構変わったWebサイトを作ったので、企画の経緯やサイトの仕組みなどについて解説したいと思います。 作ったWebサイトはこちら。松山真也さんの個人Webサイトです。 クレジットはこちら https://www.starryworks.co.jp/projects/shinyamatsuyama サイト制作の経緯以下のようなオーダーで個人サイトをリニューアルしたいということでお声がけいただきました。 ポートフォリオ機能（かなり厳選し、個人作品とか思い入れの強いものに限定。作家松山としてのポートフォリオにしたい） noteに展開してるようなコラム的なテキストを書く場所として使いたい（考えてることの発信、新しい考えの発表、娘に残したいテキストなど） web作品として小ネタをいくつか実装したい また、打ち合わせしていく中で、Pinterestのように、気になるものをクリックしたらまたそれに関連する
CSSのネスト記法がFirefox 117でも対応、すべてのモダンブラウザでサポートへ Firefox 117が8月29日リリースされ、このバージョンから、CSSのネスト記法（CSS Nesting）に基本的な部分で対応した。Chrome・Edge・Safariなどでもすでに基本的なサポートは行われており、これでいわゆるモダンブラウザすべてで使えるようになってきた[1]。 CSSのネスト記法を使うことで、あるセレクターのCSS指定内で、Nesting Style Rulesに沿った形でそのセレクターに関するセレクターや@規則を記述できるようになる[2]。 CSSネストが使えない場合には、親のセレクタの記述が必要だった .parent { color: red; } .parent > .self { color: green; } .parent > .self > .child {
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
ウェブ開発者を対象にHTMLの使用状況について調査するアンケートプロジェクト「State of HTML」が開始しました。このプロジェクトはGoogleとニジボックスによる協賛を得ており、ブラウザ開発におけるロードマップの優先順位にも影響を与えるとのことです。 State of HTML https://stateofhtml.com/ja-JP/ State of HTML 2023 now open! • Lea Verou https://lea.verou.me/blog/2023/state-of-html-2023/ ウェブ開発において、HTMLはJavaScriptやCSSと並んでよく使われる言語であり、さらにさまざまなウェブサービスやウェブページの基盤として機能しています。World Wide Webの国際標準化団体・World Wide Web Consortium(W3
The Static Site Guide
This is a book about creating and publishing static websites using HTML, CSS, and the Hugo static site generator. It’s still a work in progress, but you can read the draft chapters here. Table of ContentsIntroductionMaking Your First Web PagePublishing Your Web PageSprucing Things UpCreating a Static Website Using HugoCustomizing Our Hugo WebsiteUsing a Custom Domain NameImplementing Version Contr
hoverを指定するならany-hoverメディア特性を使いなさい！俺流hover実装例も紹介します ｜ TAKLOG
タップデバイスでもhoverが動いているWebサイトが多すぎる！ hoverを指定するならany-hoverメディア特性を使いなさい前提として、タップデバイスでのhoverアクションは次のようなデメリットから無効化すべきです。 タップデバイスでhoverアクションを用いると、タップ後にhover状態が継続し、UIの予期しない振る舞いやユーザー体験の混乱を招く可能性があるデバイスによってはhoverが指定されている要素はダブルタップしないと反応しない可能性があるタップ操作orポインター操作の区別を行うための方法はいくつかありますが、現在ではhoverメディア特性が全モダンブラウザでサポートされているためこちらを利用しましょう。 /* 🙆♂ Recommended */ @media (any-hover: hover) { .button:hover { background-color
年末になっても、CSSの進化が止まりません！ 先日リリースされたChrome 120で追加された7つの新しいCSSの機能を紹介します。JavaScriptをサポートしているかチェックできる新しいメディアクエリ、新しい指数関数、CSSネストの記述方法がより簡単になったり、要チェックです。 New in Chrome 120 Chrome 120 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 120で追加された7つの新しいCSSの機能 カスタムプロパティに対する<image>構文 カスタムプロパティ用の<transform-function>および<transform-list>構文 JavaScriptをサポートしているかチェックできる新しいメディアクエリ :dir
先日リリースされたChrome 116 デベロッパーツールの新機能で、正常に読み込まれなかったスタイルシートを簡単にデバッグできるようにするための多くの改良が加えられました。 What's New in DevTools (Chrome 116) 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 正常に読み込まれなかったスタイルシートのデバッグ 正常に読み込まれなかったスタイルシートのデバッグ Chrome 116のデベロッパーツールでは、欠落しているスタイルシートの問題をより迅速に特定し、デバッグできるようにするために多くの改良を加えました。 「ソース」>「ページ」ツリーで、正常に読み込まれたスタイルシートのみが表示されるようになり、混乱が最小限に抑えられます。 「ソース」>「エディタ」で
この記事の概要 あるときこちらの記事を見ました。 CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。 この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。 この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。 Progressive blur の実現の方向性 usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。 フィルターを小刻みに並べる アルファマスクによる擬似 Progressive blur 1 の フィルターを小刻みに並べる は冒頭の codepen のようなやり方です。 2 の アルファマスクによる擬似 Progressive blur は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ
WebKit Features in Safari 17.4
Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You can experience Safari 17.4 on iOS 17.4, iPadOS 17.4, macOS Sonoma 14.4, macOS Ventura, macOS Monterey, and in visionOS 1.1. Architectural improvements It’s always exciting to ship new features that you can use while b
<!doctype html> <meta charset="utf-8"> <script async type="module"> import {transpile, ScriptTarget} from "https://esm.sh/typescript@5.3.3?bundle&target=esnext"; import {minify_sync} from "https://esm.sh/terser@5.27.0?bundle&target=esnext"; for(const {type, textContent} of document.getElementsByTagName("script")){ if(type !== "text/typescript" || !textContent){ continue; } const js = transpile(tex
CSSのメディアクエリでcalc()が使用できるの知ってた？
CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む
CSSの美しいシャドウもこれなら簡単！ box-shadowを重ねた面倒なコードを簡単に生成できるツール -boxshadows.xyz
直感的なインターフェイスで、CSSのbox-shadowを使用した複雑で美しいシャドウを簡単に作成できるツールを紹介します。 シャドウはさまざまなパラメータで正確に調整でき、リアルタイムにシャドウの見た目とCSSのコードが生成されます。CSSの初心者でも経験豊富な人にとっても便利だと思います。 boxshadows.xyz boxshadows.xyzとは boxshadows.xyzの使い方 boxshadows.xyzとは boxshadows.xyzは直感的なインターフェイスで、レイヤー化された複雑なシャドウを正確に、そして簡単に作成できるオンラインツールです。シャドウのタイプ、シャドウのぼかしと広がり、オフセットの調整など、さまざまなパラメータを調整しながらリアルタイムにシャドウを確認しながら作成できます。
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクトです。 data 属性, 属性セレクター, CSS カスタムプロパティを使う 記事のリストがあって、記事のカテゴリごとに文字色やボーダーの色を変えたい、みたいな状況だったとする。多分素朴に書くと以下のようになるはず。 import styles from './Entry.module.css'; import clsx from 'clsx' function Entry(props) { return ( <div className={ clsx(props.category === '暮らし' ? s
:root { --hue: 210; --size: 100px; --border: 10px; --speed: 1s; --blur: var(--border); } body { background: hsl(var(--hue) 50% 8%); } .loader { width: var(--border); aspect-ratio: 1; background: white; border-radius: 50%; position: absolute; --y: calc((var(--size) * -0.5) + (var(--border) * 0.5)); transform: rotate(0deg) translateY(var(--y)); animation: spin var(--speed) infinite linear; } .loader
An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
HTMLタグにデフォルトスタイルを付けるCSSライブラリ
以下を満すようなツール (自分は)書き捨てHTMLを見やすく(pretty)する用途で使う ビルドツール不要 スタイル用にHTMLを修正しなくていい(class-less)
細かすぎ…？FigmaやWebで文字の表示位置がズレる問題を知っておこう - Goodpatch Tech Blog
この記事はGoodpatch Advent Calendar 2023 15日目の記事です。 株式会社グッドパッチでエンジニアをしているちげと申します。Strap というオンラインホワイトボードサービスの開発に携わっています。最近は小学生時代にハマっていたレゴを触って懐かしさと構造設計の奥深さに浸っています。 product.strap.app 今回はFigmaやWebで文字の表示位置がズレるいくつかの問題について取り上げて解説したいと思います。 時間がない人向けサク読み ハーフリーディングを削ることで、文字をぴったり上揃えできる。※(行間の高さ - フォントサイズ) ÷ 2 = ハーフリーディング Figmaのトリミング機能は現状Webでは実装できない。 Figmaが小数点以下のピクセルを四捨五入する影響で、Webの実装と 0.Npx 分ズレたり、完璧に中央に揃わなかったりする。 上記の
SVGのロゴをネオンサインが点灯するようなイメージのアニメーションにできないかと試行錯誤した結果を記事に残しておく。 最終完成バージョン まずは出来上がりを、Codepen で確認してほしい。Start ボタンを押すと、ロゴが点灯する。 ネオンサインが点灯する雰囲気にみえるとうれしい。 （と言っても、今となってはネオン管っぽいLEDチューブが主流なので、本物のネオン管を見たことがない世代が多いかもしれないが...） See the Pen Neon Sign by hiroatsu (@scqspcfg-the-solid) on CodePen. なお、このアニメーションは、地図共有サイト Toboggar のスプラッシュ画面で使用しているものである。 どうやったらネオンサインの点灯のように見えるか 今回の方法がベストだとは思えないし、ベターですらないような気がするが、とりあえず私はこれ
MistCSS
MistCSSWrite React components using CSS only A new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS 👍
これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill
先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネックはSafariのサポートだと思います。 Scroll-driven Animationsの仕様で定義されているScrollTimelineとViewTimelineのポリフィルがリリースされ、これでSafariでも動作します。 Scroll-timeline Polyfill -GitHub まずは、Scroll-driven Animationsの簡単な紹介を。 スクロールをトリガーにしたアニメーションは、最近のWebサイトでよく見かけます。Appleの新製品ページもスクロールをトリガーに要素をアニメーションで表示しますね。 実装にはJavaScriptを使用したり、かな
0から作らないデザイントークン | ドクセル
スライド概要 プロダクトデザインに一貫性をもたらすデザイントークンは有用ですが設計が難しく、デザイン負債になりやすい一面もあります。既存の良くできた技術をうまく取り入れることで、0ベースでの設計を避け、リソースを割きすぎることなくトークン設計を行うことができます。今回は実例を交えながら設計方法を紹介します。
CSS relative color syntax | Blog | Chrome for Developers
In Chrome 119 is a very powerful color feature from CSS Color Level 5. Relative color syntax creates a smooth path for color manipulation within CSS, offering ways for authors and designers to: Lighten Darken Saturate Desaturate Chroma boost Adjust opacity Invert Complement Convert Contrast Color palettes Monochromatic Analogous Triadic Tetradic Monochromatic with hue rotation Before relative colo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
ノーコードツール「STUDIO」がスゴイ！ HTML・CSSが不要、FigmaからコピペでWebサイトが完成【1週間まとめ】 - 9/30～10/6のWeb担の記事まとめ | 先週のWeb担まとめ記事 | Web担当者Forum
App Router時代のゼロランタイムCSS in JSに何を使えばいいの？
親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS
CSSのネスト記法がFirefox 117でも対応、すべてのモダンブラウザでサポートへ | gihyo.jp
Unity 製 WebGL ゲームを AWS でお手軽公開
Vivliostyleでなにができるの？ | gihyo.jp
文の途中でのおかしな改行がなくなる？ Chromeに日本語の改行位置の自動調整機能が追加へ【やじうまWatch】
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
ウェブ開発の未来を左右するかもしれない大規模アンケート「State of HTML 2023」がスタート
CSSの進化が止まらない！ Chrome 120で追加された7つの新しいCSSの機能
Chrome 116 デベロッパーツールの新機能が便利！ 正常に読み込まれなかったスタイルシートのデバッグが簡単に
CSSをより深く理解する、プロパティの値に無効な値を設定する（IACVT）とどのように処理されているのかを解説
CSS だけで、かつ不要な div を使わずに、擬似 Progressive blur - Qiita
HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？ - Qiita
CSS Modules で作る SVG Icon Component
似ているけどちょっと違うものをスタイリングする CSS テクニック - mizdra's blog
CSSをコピペするだけで簡単に実装できる！ ディズニーからインスピレーションを得た、美しいローディング
Adobe、新しいUIデザインシステム「Spectrum 2」を発表 ～2024年Web製品より順次展開／アクセシビリティ、親しみやすさ、クロスプラットフォーム一貫性の3点が軸
!importantで上書きできないブラウザのスタイルとは
【Hothotレビュー】 MacBook Airは値下げされたM2世代もイイ。だがM3版には価格差に見合う価値がある。何が変わったのか機能や性能を比較
CSS アニメーションでネオンサインの点灯の雰囲気を出してみる - Qiita