サイト構築 -実装
浮世絵にインスパイアされた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番目のテキスト要素のとこだけオレンジ色の背景色をブラウザの幅いっぱいに広げたものです […]
このデザインは一体何？ 長年のもやもやが解決、Adobeの管理画面で見かけるユーザー名横の謎アイコンの正体
Post on:2026年9月2日
Adobeを長年使用してきて、もやもやしていたのが、アイコンのデザインです。 円グラフにしてはバランスがおかしいし、右下にはなんか切れ端があるし、これって一体何だろう？ とずっと疑問に思っていました。
CSSの新機能！ 元のカラーの透明度だけ変更できる相対アルファカラーなど、Chrome 152で新しく追加された5個の機能
Post on:2026年9月1日
先週アップデートされたChrome 152に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、元のカラーの透明度だけ変更できる相対アルファカラー、HTMLのグローバル属性「aut […]
おお、これはかなり便利になる！ 複数のセレクタをまとめて対象にできるCSSの新機能クラスプレフィックスセレクタ
Post on:2026年8月27日
CSSで複数のセレクタをまとめて記述できたら楽なのに、と思ったことがある人も多いと思います。 .btn-primary, .btn-secondary, .btn-danger といった同じプレフィックスを持つ複数のクラ […]
sponsors
