GitHub - chenglou/pretext
Pure JavaScript/TypeScript library for multiline text measurement & layout. Fast, accurate & supports all the languages you didn't even know about. Allows rendering to DOM, Canvas, SVG and soon, server-side. Pretext side-steps the need for DOM measurements (e.g. getBoundingClientRect, offsetHeight), which trigger layout reflow, one of the most expensive operations in the browser. It implements its
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
アクセシビリティ上の問題を仕込んだサイトを生成します 勉強の教材、業務の資料としてお使いいただけます 用途にかかわらず無料でお使いいただけます 障壁（バリア）の設定 プリセット版 問題をあらかじめ設定（プリセット）した駒瑠市サイトです。カスタマイズ版にのみ存在する障壁もあります。 プリセット版で使うWCAGのバージョンを選択してください WCAG 2.0以外のバリアは、徐々に増やしています。WCAG 2.2のバリアはまだありません。 WCAG 2.0 WCAG 2.1 WCAG 2.2 代替テキストの不具合の多い駒瑠市駒瑠市のロゴ、COOL CHOICEのロゴ、情報が不足したalt（「温暖化の状況」ページのグラフ）円グラフの内容を説明しない実装（「温暖化の状況」ページの円グラフ）、ツールチップを読み上げない実装（トップページ「あなたにもできる取り組み」）、altと重複したキャプションの提供
Dialog と Popover #7 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ | gihyo.jp
乗りこなせ！ モダンフロントエンド 新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの麦島です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズ フロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載していきます。モダンな仕様の紹介・普段使っているライブラリのコア部分で何が行われているのかの解説・ハンズオンなど、さまざまな内容でお届けする予定です。 CSSの進化 本連載での最初のコンテンツは「CSS Modern Features」です。 CSSの表現力は年々新しい仕様の策定や実装とともに進化しています。従来であれば複雑なCSS定義が必要であったものが簡潔に表現できたり、Ja
スタイルをカスタマイズ可能な新しい `<select>` 要素
2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発者は <s
標準化されたCSSのzoomプロパティ
標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか？ 有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。 zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。 標準化されたzoomがNewly Availableに！ そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏 まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。 zoomに使い道がありそうな予感 CSSで要素を拡大する手段としてはtransform: scale
入力欄のプレースホルダーって結局どうなの - Qiita
書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders in Form Fields Are Harmful」（日本語訳: 入力フォームのプレースホルダーを使ってはいけない）で数々の問題点が指摘されている
放課後NPOアフタースクール | 私たち放課後NPOアフタースクールは、すべての子どもたちが放課後をたのしく過ごせるよう、アフタースクール事業などを行なっています。
お知らせ 放課後NPOアフタースクール「子どものセーフガーディング・ポリシー」を策定｜人権の原点・子どもの権利と尊厳を守るために #プレスリリース 2025.12.10
リンクとボタンを｢押せる｣だけでデザインしない
リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの1つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。たとえば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
行政サイトでウェブ地図を使う際の注意点などまとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨今、行政のウェブサイトでも、JavaScriptを使用したインタラクティブな地図が使われることが多くなってきました。 2016年現在、民間のウェブページでは、動かせる地図を表示することは当たり前に行われるようになっています。 施設やイベントの場所を表現するにあたって、ウェブ地図はたいへん便利なツールであり、これからも利用が進みこそすれ、廃れることは無いはずです。 もちろん行政においても、サイトにウェブ地図を利用することはこれから一般的になってゆくと考えられます。 そうしたなか、行政サイトを構築する際に、いくつかの観点から気をつけたほう
令和時代のページネーションを考える (REST API編) - Sweet Escape
今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説
連載：徹底解剖！ SaaSのUI／UX 本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
Headless UI v1.0
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal) He
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
美しいUIを作るために デザイナーが意識している ちょっとした考え方
GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
https://www.genius.design/
BARTH（バース）公式ブランドサイト
