スタイルをカスタマイズ可能な新しい `<select>` 要素
Note 2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発
こういうデザイン (Augmented UI? 拡張 UI？) を CSS で実装する方法
はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with technology https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。 なんでこのような形が Augmented UI なのかについて個人的に考えて
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
美しいUIを作るために デザイナーが意識している ちょっとした考え方
3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 Ameba ブランドサイト わ た し の ふ か わ り ょ う タ レン ト い ってくる 場 所 。 か えってくる 場 所 。 今 年 、 芸 歴 3 0 年 を 迎 える タ レン ト の ふ か わ り ょ う さ ん 。 テ レ ビ ・ ラ ジ オ の ほ か 、 D J 、 執 筆 とそ の 活 動 は 多 岐 に わ た り 「 頭 の 中 で 常 に い ろ ん な ア プ リ が 起 動 して い る か の よ う 」 な 状 態 だ と い う 。 そ ん な 多 忙 な 生 活 の 中 で、 毎 日 の よ う に 訪 れて い る 「 f e t e c a f e （ フ ェ テ カ フ ェ ） 」 は 、 心 休 ま る 場 3 数字じゃなくて重心でデザインしてる ゆー
標準化されたCSSのzoomプロパティ
標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか？ 有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。 zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。 標準化されたzoomがNewly Availableに！ そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏 まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。 zoomに使い道がありそうな予感 CSSで要素を拡大する手段としてはtransform: scale
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
ロゴ、ウェブ、グラフィックデザインなど多数のジャンル。 | 99designs
どんなビジネスニーズにも対応できる、クリエイティブなデザインエキスパートにお任せください。一際輝くデザインで、ビジネスを成功に導きます。
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
リンクとボタンを｢押せる｣だけでデザインしない
リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説
連載：徹底解剖！ SaaSのUI／UX 本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mapbox
GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean HTML/Tailwind/JS code
放課後NPOアフタースクール | 私たち放課後NPOアフタースクールは、すべての子どもたちが放課後をたのしく過ごせるよう、アフタースクール事業などを行なっています。
BARTH（バース）公式ブランドサイト
