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