サイト構築
UIに使用する色のコントラストをAIで検証、基準を満たしていないときはデザインに合った代替色を提案してくれる無料ツール
Post on:2026年3月24日
AIを使用して前景色と背景色のコントラスト、WCAG 2.1および2.2のAA/AAA基準を満たすアクセシブルな色の組み合わせをテストし、さらにその組み合わせに合った色で基準に満たした色も提案してくれる無料ツールを紹介し […]
ミニマルなデザインで使いやすい！ シンプルなHTMLでさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI
Post on:2026年3月23日
セマンティックなHTMLで、Webサイトやスマホアプリでよく使用されるさまざまなUIコンポーネントや要素を実装できる超軽量UIライブラリを紹介します。 デザインはシンプルでミニマル！ 依存関係は一切なく、classレスと […]
これは覚えておきたい！ シンプルなCSSで、画像をホバーすると拡大し、マスクまでしてくれる
Post on:2026年3月17日
画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。
Web制作者は要チェック！ スマホでもテキストサイズの拡大縮小ができるようになるなど、Chrome 146で新しく追加された5個のCSSの機能
Post on:2026年3月12日
3/11にアップデートされたChrome 146に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、スクロールの位置に基づいてアニメーションを制御する機能、meta name=t […]
これでSVGアイコンを探すときに困らない！ 無料で商用利用できるライブラリを横断検索できる便利サイト -All SVG Icons
Post on:2026年3月11日
SVGアイコン、特に無料で利用できるオープンソースのSVGアイコンをまとめて検索・閲覧できる便利なサイトを紹介します。 さまざまなSVGアイコンのライブラリを横断検索することもでき、好みのデザインを見つけて、SVGアイコ […]
シンプルだから使いやすい！ ページの途中で上方向にスクロールするとヘッダを上部から表示する超軽量スクリプト -Peek
Post on:2026年3月10日
ユーザーが下方向にスクロールするとヘッダを自動的に非表示にし、ページの途中で上方向にスクロールするとヘッダを表示する、超軽量のスクリプトを紹介します。 実装は非常に簡単で、カスタマイズも簡単、既存のWebページに導入する […]
これはかなり万能に使える！ たった3行のCSSで、要素を中央に絶対配置する新しい記述方法
Post on:2026年3月5日
CSSで要素を中央に絶対配置、特にモーダル、メッセージ、スタック、ポップオーバーなどを中央配置するときに適したCSSの新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、直感的ではないCS […]
OKLCHカラーを使うと異なる色でトーンを合わせたり、単色のシェードも簡単！ UIデザイン用のカラーパレットを生成するツール -ColorPalette Pro
Post on:2026年3月3日
見た目はDTMツールですが、中身はOKLCHカラーでUIデザイン用のカラーパレットを生成できる無料ツールを紹介します。 ベースカラーを指定するだけで、6色で構成される美しいカラーパレットを瞬時に生成します。色相環を元にし […]
これは気がつかなかった！ デベロッパーツールでcalc()やclamp()などの計算値が簡単にデバッグできて便利すぎる
Post on:2026年2月26日
Chromeのブラウザはアップデートをチェックしていましたが、デベロッパーツールはなんとなくしか見ていませんでした。 デベロッパーツールで、CSSのcalc()やclamp()などの複雑な計算式やvwやcqwなどの相対単 […]
これ1つでOK！ CSSでLiquid GlassやGlassmorphism、Nuemorphismを実装できる便利ツール -Aether CSS
Post on:2026年2月24日
iOSにLiquid Glassが採用されてから早半年が過ぎました。 当初はiPhoneやiPadのUIに使いにくさを感じていましたが、Liquid Glassを採用しているアプリも増えた最近では逆に採用されていないアプ […]
sponsors
