ログイン
ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるように、Chrome 144で新しく追加された8個のCSSの機能
1/13にアップデートされたChrome 144に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、ページ内検索の検索結果をスタイルする::search-text疑似要素、スクロ […]
リーディングビュー
年明けは気分一新！ 2026年、CursorやVS Codeで最近人気のテーマや機能拡張
年明けは気分一新したいですね。日常的に使用しているものを新調すると、良い1年が過ごせると言われています。 とは言っても、新調するのにはお金がかかるので、エディタのテーマを新調して、気分を一新てみるのはどうでしょうか。Cu […]
Affinityの有料版を買ってた人に朗報！ v3無料化記念、v1, v2ユーザーは有料フォントが無料でダウンロードできます
2025年11月にAffinityが無料化という大きなニュースがありましたが、同時に既存のv1, v2ユーザーに有料フォントを無料でプレゼントするという予告も実はありました。 気がつかなかった人や忘れていた人もいるかと思 […]
モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック
スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 […]
Web制作者は要チェック！ Chrome 143で新しく追加された4個のCSSの機能
12/3にアップデートされたChrome 143に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートの注目は、CSSの「@container anchored(fallback)」という新しいク […]
ブックマークしておくと便利！ デスクトップのモニターからスマホまで、あらゆるスクリーンのドット抜け・表示ムラをテストできる無料ツール -Free Screen Test Tool
デスクトップ用のモニターをはじめ、ノートパソコンのスクリーン、タブレット、スマホ、テレビ、プロジェクターなど、さまざまなデバイスのあらゆるスクリーンのドット抜け、単色テスト、グラデーションテスト、グリッドパターン、モーシ […]
Web制作者は腕試し！ JavaScriptやReactなどのコードでキーボードのタイピング練習ができるAIアプリ -TypeQuicker
キーボードで文書や単語のタイピング練習をはじめ、JavaScriptやReactなどのコードでもタイピング練習ができるオンラインツールを紹介します。 タイピング練習できるサイトはたくさんありますが、本ツールはAIによる詳 […]
これなら超簡単！ CSSのclamp()によるレスポンシブ対応のフォントサイズを数クリックで定義できるツール -Size Matters
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動 […]
これは便利！ ついにChromeでも分割表示がネイティブに、1つのタブ内を分割して2つのWebページを表示 -Split View
1つのタブ内に2つのWebページを分割表示したい、と思ったことはありませんか？ 現在はEdgeやZenなどの一部のブラウザのみが分割表示できますが、ついにChromeでも分割表示をネイティブにできるようになります。 1つ […]
UIデザインに特化！ 数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツール -Harmonizer
UIデザインに特化され、アクセシブルでライトモードでもダークモードでも各レベルのすべてのカラーが同じ彩度とコントラストを保ち、数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツールを紹介します。 カラーパレッ […]
パスワード生成、黄金比・白銀比計算、スクショ分割、電子印鑑生成、個人情報のダミーデータなど、日本人制作者による便利ツールがまとめて使える -マッハーツール
Web制作やデザインでよく使用するツール、たまにしか使わないけど必要なツールをまとめて使用できる、日本人制作者によるツールを紹介します。 本ツールは先月リリースされたばかり！ パスワード生成、黄金比・白銀比計算、スクショ […]
CSSの進化は止まらない！ コンテナクエリとif()関数がさらに便利になり、興味を示したときに反応する新属性など、Chrome 142で新しく追加された9個のCSSの機能
10/29にアップデートされたChrome 142に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、コンテナクエリとif()関数の範囲構文、ビジターが興味を示したときに反応する […]
2025年、W3Cのロゴがかなりモダンなデザインに変更されました
2025年10月1日に、W3Cの新しいロゴがリリースされました。 W3Cは1997年から基本的に同じロゴを使用しており、2022年に公益非営利団体として独立した際にロゴがすこし変更されましたが、この変化はあまり気がつかれ […]
UIデザイン向けに視覚的に美しく、アクセシビリティの高い配色を簡単に作成できるツール -ColorMate
WebサイトやスマホアプリのUIデザインをはじめ、ブランドアイデンティティの構築などで視覚的に美しく、アクセシビリティの高い配色を簡単に作成できるツールを紹介します。 アクセシビリティのテストをしたり、実際のUIコンポー […]
これは簡単で便利すぎる！ すぐに使えるさまざまなフォームを数回のクリックで実装できるAIツール -Formcn
フォームの実装ってなかなか面倒ですよね。 数回クリックするだけで、すぐに使えるさまざまなフォームを実装できる無料のAIツールを紹介します。 お問い合わせやログインのフォームをはじめ、サインアップ、アンケード、イベント登録 […]
これなら簡単で便利！ 色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツール -Kigen Color Generator
指定したカラーをベースにシェードのバリエーションを生成し、色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツールを紹介します。 このツールのUIも非常に洗練されており、操作性も非常に快適です。 Kige […]
このUIデザインかっこいい！ 近未来をテーマにしたUIコンポーネントとデザイン要素のセット -Cosmic UI
未来的な別世界のインターフェイスを作ろう、とデザインされた近未来をテーマにしたUIコンポーネントとデザイン要素のセットを紹介します。 オープンソースで、商用プロジェクトでも無料で利用できます。 Cosmic UI Cos […]
小規模なアップデートだけど、Web制作者は要チェック！ Chrome 141で新しく追加されたCSSとUIに関する機能
10月1日にアップデートされたChrome 141に追加された、CSSとUIに関する新しい機能を紹介します。 前回のアップデートでは10個のCSSの新機能が追加されました（紹介記事）が、今回は小規模なアップデートとなって […]
これは助かる！ AIエディタ Cursorから公式の日本語ドキュメントがローンチ、要注目のポイントを解説
AIエディタ Cursorから公式の日本語ドキュメントが、先週にローンチされました！ 当ブログのビジターも多くの人が使用していると思いますが、公式のドキュメント、しかも日本語版もあるというのは嬉しい知らせですね。 Cur […]
UIデザインに使用するカラーのコントラストをチェックできる、使いやすくて、アクセシビリティを重視したツール -Contrastly
UIデザインでカラーを決めるときに、カラーのコントラストを確認することは必須です。コントラストをチェックできるツールはたくさんありますが、Tailwinds CSSのカラー、16進数コンバーター、コントラストの確認がひと […]
