2023年11月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2023年11月の、これだけは押さえておきたいWeb関連の動き Friday, December 1st, 2023 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma Adobeによる3兆円規模のFigma買収についてEUの規制当局が独占禁止法違反で訴訟を起こす予定だと判明 「EU当局はこの買収が、大企業が競合他社を排除するために中小企業を買収する『キラー買収』であるとの懸念を強めています」とのこと。 AdobeはFigma
朗報！ これでCSSネストの記述方法がより簡単になります
2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定のChrome 120で、CSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になるので紹介します。 CSS nesting relaxed syntax update by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 要素タグのネスト このネストを可能にするために何が変更されたのか はじめに CSSのネストは、2023年3月にリリースされたChrome 112でサポートされ、現在では主要な各ブラウザでサポートされています。
Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
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つの新
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
CSSをコピペするだけで簡単に実装できる！ ディズニーからインスピレーションを得た、美しいローディング
: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
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
海外で有名なデザインおしゃれなトグルボタンをコーディングしてみた
FigmaのXアカウントがおしゃれなトグルボタンを公開していて、「コーディング泣かせだ」との声を見かけたので、改めて自分でコーディングしてみようと思い書いてみました。 デザイナに作れよ！って言われれば作るよ。だってぷろだもん。https://t.co/HF6afHhfzm https://t.co/IXl7iufv7v pic.twitter.com/T4x4uV7tKX — ゆひゃ (@zaty_Akiyama) October 14, 2023 元ネタ 参考にしたのはFigmaのこのポストですが、結構有名なデザインで、最初に見たのはこのポストだと思います。 still laughing at this pic.twitter.com/Ny525aAuYH — Joie Chung (@hellojoie) April 28, 2023 このポストの一連の引用や返信を見ると、海外でもっと
「Google Chrome 118」安定版リリース、CSSのスタイルルールの適用範囲を限定できる「@scope」をサポート
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン118.0.5993.71がリリースされました。CSSにおいて特定範囲のみにルールを適用できる「@scope」がサポートされたほか、「scripting」と「prefers-reduced-transparency」という2つのメディア特性の追加や開発者ツールの機能向上などのアップデートが行われています。 New in Chrome 118 - Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-118/ New in Chrome 118: the @scope CSS rule is here, scripting and prefers-reduced-transparency, & more! - YouTube ◆CSSで
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info
" class=code-demo loading=lazy style=height:350px>これを突き詰めると、スプリングアニメーション（Spring Animation）のような、従来は JavaScript でフレームごとに描画していたアニメーションも CSS アニメーションで実装できます。 iOS のスプリングを CSS 数式アニメーションで再現する この記事では数式を使ったアニメーションを CSS で行う方法について、実際にデモを実装しながら解説します。 数式でアニメーションを表現できることの利点 #数式でアニメーションを表現すると聞いて、ピンとこない人もいると思います。以下の画像はこの記事のはじめのデモで使っている数式をグラフにしたものです。このグラフの形がイージング関数に似ていると気づいた方もいるかもしれません。 このようなグラフを描く数式を作ることができればイージング
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。 参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。 まずは、さっそく機能拡張のインストールから。 下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストア この機能
BudouX: 読みやすい改行のための軽量な分かち書き器
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。 Chrome 117 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @starting-styleルール overlayプロパティ transition-behaviorプロパティ CSS Gridのsubgrid値 text-wrap: pretty; contain
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/kyohei-dan/pen/gOZLbrP
2023 CSS
