サイト構築
UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
Post on:2019年7月11日
使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームで […]
HTMLに新しい要素ができる動き、ポップアップする通知パネル用のtoast要素
Post on:2019年7月10日
ブラウザの枠外からポップアップやスライドして表示される通知パネルを実装するために、HTMLの新しい要素<toast>ができるかもしれません。 ブラウザへの実装日はまだ決まっていませんが、Chromiumの開発 […]
ユーザーを欺く、UIで見かけるダークパターンのまとめ
Post on:2019年7月9日
たくさんのショッピングサイト、オンラインショップがあります。良心的なサイトもたくさんありますが、意図しない購入や申込に誘導・欺くサイトもあります。利用者として、そして制作者として、気をつけたいダークパターンを紹介します。 […]
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
Post on:2019年7月4日
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要 […]
JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components
Post on:2019年7月3日
Webページでよく使用される、カルーセル、折り畳み、ドロップダウン、モーダル、タブ、ツールチップなどのUIコンポーネントをCSSで実装するPure CSS Componentsを紹介します。 過度な装飾がないので、再利用 […]
スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて
Post on:2019年7月2日
スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンク […]
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
Post on:2019年7月1日
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義され […]
remove.bg 神アップデート！ネコや犬もサポート、動物や植物や物体などの画像から背景を1クリックで切り抜き
Post on:2019年6月28日
remove.bgが神アップデートです！ 1クリックで画像から背景だけを切り抜くremove.bgが、6月のアップデートで動物や植物や物体などもサポートしました。 ネコや犬やアルパカや鳥やペンギン、花や植物、食料、家具、 […]
2019年、CSSのプロパティ・機能やツールについて使用状況や認知度を徹底調査 -The State of CSS 2019
Post on:2019年6月27日
実際のところ、Flexboxはどのくらい使用されているのか、CSS Gridはどうなのか、どのCSSの機能がよく使われ、どのフレームワークやツールが採用されているのか、CSSのプロパティ・機能やツールについて、2019年 […]
この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
Post on:2019年6月26日
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーション […]
sponsors
