🎞️　5.1 SurroundのYouTube動画を再生リストにまとめました。🎞️🎬　更新は不定期です。気が向いた時に修正・追加します。🎬⭐️YouTube 5.1 Surroundに関する記事はブログafter work labの下記ページをご覧ください。⭐️　　https://www.heavy-pe...

はじめに 皆さんはどんなワークスペースでPC作業を行ってますか。 管理人はこれまで古いパソコンデスクを使ってました。 天板は幅75cm×奥行45cm、キーボードスライダーは幅60cm×奥行40cmのサイズです。 パソコンデスクはスペース効率は良いのですが、デザインが事務機的でおしゃれとは言い難く、横幅も狭いのでゆったりとしたPC作業は望めません。 部屋の片隅に物が積み上げられ使ってない背が低いセンターテーブルがあったので、これをリユースし実質0円で快適でおしゃれなワークスペースを構築できたのでブログで紹介したいと思います。 快適なワークスペースが欲しい理由 管理人が考える快適なワークスペースはゆったりとした広さです。 また、お気に入りのアイテムや植物が配置され、おしゃれな空間が演出されているとベストだなと思ってました。 美味しい飲み物とお菓子を食べながら、カフェ気分でPC作業ができると疲れ

2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a

CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む

PICK Pick a bitmap image that you want to vectorize and drag and drop it onto the page. Bitmap images, such as JPEGs and PNGs, are represented as a grid of little squares called 'pixels', each with its own color. PROCESS We analyze, process, and convert your image from pixels to geometric shapes. The resulting vector image can be scaled to any resolution without getting blurry, and can be used to

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で便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直

Kazuho Oku @kazuho lead developer of H2O HTTP server / works at @fastly / contributes to @IETF / HTTP, TLS, QUICといった通信プロトコルの開発者、実装メイン、標準化がサブタスク。ダジャレの合間にインターネットを速くするのが仕事です kazuhooku.com Kazuho Oku @kazuho gmail の容量が15GBいっぱいになった件、一年以上前の未読の広告扱いされたメールとか不要やろってことで is:unread category:promotions older_than:1y で検索して全消した。使用量9.38GBまで下がった！ 2023-10-18 12:03:41

騒音問題にピンポン玉が役立つことが判明したという。科学者によると、ピンポン玉にいくつかの改良を加えることで、この軽量のプラスチック球が、主に低周波騒音に効果的な吸音材として機能することがわかったそうです。 リール大学とギリシャのアテネ国立工科大学による共同研究チームは、ピンポン玉をヘルムホルツ共振器（※騒音を下げることを目的として、自動車用エンジンの吸気系、建物の壁材などに幅広く使われている）として利用した音響メタサーフェス（人工構造体）を作り上げました。 研究著者のRobine Sabatはメディアリリースでこう述べています。 「ピンポン玉はよく知られた日常的なもので、世界中にたくさんあります。私たちの動機は、このような簡単に手に入るものを使って低周波絶縁パネル構造を作ることでした。ピンポン玉は、低コストとリサイクルの可能性の両方において、音響絶縁材の経済的な代替品となるものなのです」

先日の記事（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以前は、

当ブログの記事でも、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 終

TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」で発表したスライドです。 https://techfeed.io/events/techfeed-experts-night-26 Zennの記事でも詳しく解説しています。 → CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する https://zenn.dev/moneyforward/articles/css-subgrid-all-browsers