サイト構築 -実装
長年の悩みがこれで解決！ CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」
Post on:2026年10月1日
CSSの@supportsはブラウザがその機能をサポートしているか検出するのに便利ですが、単独の機能しか検出ができません。 たとえば、gapは現在はflexboxでサポートされていますが、当初はCSS Gridのみでした […]
ガラスの屈折やぼかしも美しい！ WebページのさまざまなUI要素をリキッドグラスにするエフェクトライブラリ -LiquidGlass
Post on:2026年9月30日
Webページのさまざまな要素（カードやボタンなど）をリアルなガラスにするエフェクトライブラリを紹介します。 リキッドグラスのエフェクトは非常に美しく、屈折、ばかし、色収差、ライティングなども設定でき、かなりリアルなガラス […]
Web制作者は要チェック！ iframeのレスポンシブなサイズ調整など、Chrome 154で新しく追加された7つのCSSの機能
Post on:2026年9月29日
先週アップデートされたChrome 154に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、iframeがレスポンシブなサイズ調整が可能になり、text-decoration- […]
浮世絵にインスパイアされたUIコンポーネント、和紙・墨・朱の和のカラースキームが癒やされる -Hinomaru Ink UI Kit
Post on:2026年9月17日
日本の浮世絵にインスパイアされ、日の丸のポスターのように描かれた再利用可能なUI要素・UIコンポーネントのキットを紹介します。 テキストや罫線には墨色、背景色にはくすんだ和紙のような色、アクセントカラーには日の丸の紅色を […]
これはUIデザイナーの手間が増えそう！ iPhone DuoでWebページがどのように表示されるかを確認できるシミュレータ -iPhone Duo Simulator
Post on:2026年9月16日
Appleから折りたためるスマホ「iPhone Duo」がついに発表されました。364,800円からというお値段も驚きですが、UIデザイナーはその多彩なビューポートに面倒だなと思った人もいると思います。 WebページやW […]
HTMLのcamera要素、CSSで最上行と最上列を固定表示した表を実装できるなど、Chrome 153で追加された新機能
Post on:2026年9月15日
先週アップデートされたChrome 153に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、最上行と最上列を固定表示した表をCSSで実装できる「単一軸のスクロールコンテナ」、ユ […]
Webページをスキャンして、古いCSSに置き換わるモダンCSSを提案してくれる無料ツール -Modern CSS Radar
Post on:2026年9月10日
Webページに使用されているHTMLとCSSをスキャンして、古いHTMLとCSSが使用されている箇所を指摘し、それに置き換わるモダンHTMLとCSSを提案してくれるオンラインツールを紹介します。 現在では必要のないプレフ […]
CSS Gridで実装、弁当グリッドのレイアウトを確認しながらCSSを生成できる無料ツール -Bento Grid Builder
Post on:2026年9月9日
弁当グリッドは見栄えがいいレイアウトですが、HTMLとCSSで実装するとすこし難しいかもしれません。完成レイアウトを調整しながら、HTMLとCSSのコード（Tailwind CSS用も）を生成してくれる無料ツールを紹介し […]
面倒なCSSアニメーションもこれで簡単に実装できる！ 繊細な動きを最優先にしたフレームワーク -EaseMotion CSS
Post on:2026年9月8日
WebサイトやスマホアプリのUI要素やコンポーネント、レイアウトに繊細なアニメーションによる動きを加えるCSSフレームワークを紹介します。 依存関係はゼロ、非常に軽量で、初心者でも扱いやすいCSSに設計されています。cl […]
border-shapeプロパティにこんな使い方があったとは！ 一つの要素だけ背景色を幅いっぱいに広げるモダンCSSのテクニック
Post on:2026年9月3日
section要素を積み重ねたときに、一つの要素だけ背景色をブラウザの幅いっぱいに広げるモダンCSSのテクニックを紹介します。 下記は2番目のテキスト要素のとこだけオレンジ色の背景色をブラウザの幅いっぱいに広げたものです […]
sponsors
