CSSの「@property」を活用しておしゃれなボタンを作る方法をエキスパートが解説
Firefoxが2024年7月9日にリリースしたバージョン128で、CSSの「@property」に対応したことにより、主要なブラウザ全てで「@property」の記法を使用できるようになりました。「@property」を使うことで実現できるデザインの一例について、ウェブエンジニアのライアン・マリガン氏がブログに投稿しました。 CSS @property and the New Style https://ryanmulligan.dev/blog/css-property-new-style/ マリガン氏がデモとして提示したのは下図のようなボタンのアニメーションです。 最初にマリガン氏はボタンの周りをループする光について解説しています。カスタムプロパティとして「--gradient-angle」を宣言し、宣言においてこのカスタムプロパティには「angle(角度)」の値を設定可能で、初期値
ReactプロダクトにおけるButtonコンポーネント実装の最適解を探し続けた結果
2023/12/13 aria-disabledの付け方を改良 2023/12/11 タイポ修正 2023/12/08 next/linkのhrefにundefinedを渡すとエラーがでるため、disabledにする方法を修正 <Button asChild ref={}>とrefを指定できてしまっていたのを修正 セミコロンをつけないように 2023/12/07 タイポ修正(priamry -> primary) import { cloneElement, forwardRef, isValidElement } from "react" import styles from "./style.module.css" import clsx from "clsx" export type ButtonProps = { variant?: "primary" | "secondary"
React アプリのモーダルを dialog 要素で実装する - 30歳からのプログラミング
モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが、これはモーダルとして開発者が求めているものとは、多くの面で異なる。 そのためなのか、モーダルを実現するためのライブラリは多数公開されている。 だが個人的な方針として、依存ライブラリはあまり増やしたくない。 かといって自分で開発するのもそれなりに手間がかかる。 そこで、HTML 5.2 で標準化されたdialog要素を使うことにした。 標準化された機能なら、知識やノウハウが陳腐化しにくく、第三者が作ったライブラリより採用しやすい。 そう考え、React アプリのモーダルをdialog要素で実装することにした。 だが、DOM を操作するため
Show a browser picker for date, time, color, and files | Blog | Chrome for Developers
For a long time, you had to resort to custom widget libraries or hacks to show a date picker. The web platform now ships with the HTMLInputElement showPicker() method, a canonical way to show a browser picker not only for dates, but also time, color, and files. Background A frequent request we hear from web developers is: How do I programmatically show a picker for controls like date? Stack Overfl
label で input[type="file"] を装飾するな
input[type="file"] な要素を装飾する方法を検索したときに、次のような間違った label 要素の使い方を紹介する記事ばかりヒットするのが気になったので書きました。label 要素を使っても問題ない場合もありますが、間違った使い方をしている（しようとしている）人に届きやすいようにこのような表題にしています。 何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素ではないので Space / Enter キーで click イベントを発火することができません。 どうするべきか butto
![label で input[type="file"] を装飾するな](https://cdn-ak-scissors.b.st-hatena.com/image/square/abcddc7bb77ffd423240f83b7922f8b6d66776fc/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fjF5h3Vm--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Alabel%252520%2525E3%252581%2525A7%252520input%25255Btype%25253D%252522file%252522%25255D%252520%2525E3%252582%252592%2525E8%2525A3%252585%2525E9%2525A3%2525BE%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525AA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Adqn%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYxMjZlNDcxNWEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
フットスイッチでリモートワークが少し快適になった話 - あしたのチーム Tech Blog
もうすぐ発売される ELDEN RING が待ち遠しい @snaka です。 今回は連載企画とは全然別のリモートワークに関するガジェットネタです。 リモート会議におけるマイクミュートの切り替え問題 近頃ではリモート会議が当たり前の日常ですが、個人的にリモート会議で地味にストレスに感じる点が1つありました。 それは、マイクミュートの ON/OFF の切り替えでした。 リモート会議では発言時以外マイクミュートが基本 リモート会議のマナーとしてよくあるのが、自分が発言しない間は基本マイクをミュートした状態で、発言するときだけミュートを解除するというものだと思います。 他の人が発言しているとき(このときマイクミュートしている)、ブラウザやエディタを開いてメモをとったり関連資料を参照してたりする最中に話を振られると... まず Discord のウィンドウを探し *1 マイクミュートのボタンの位置を
Ever Given Ever Ywhere
Want to try more scale comparisons ... not only the Ever Given but anything else? Try the new @bplmaps Insizeor tool! Why should the Suez Canal have all the fun? From the comfort of home you can get the Ever Given stuck wherever you want it. Drag and zoom the map to move this big old boat somewhere else. Click the rotate button to get it wedged perfectly. Hit the "to scale" button to make it appro
Riot.js 5.2.0 がリリース🎉 旧バージョンの文法もサポート
つい先日 Riot.js(以下、riot) のバージョン v5.2.0 がリリースされました ❗ このバージョンのリリースは riot 界隈でちょっと話題になっており、今回はこのアップデートについて書き残していきます。 リリースノート 公式リポジトリのリリースノートの v5.2.0 を見てみると、以下のように書かれていました。 Some liked more the old RIot.js syntax so you can now write components also as follows なるほど、思ったより v3 系の昔のシンタックスが人気だったようですねー。v4.0.0 にて破壊的変更が入り、シンタックスもドラスティックに変更が入りましたので、v4 系から riot から離れた方も一定数いると思います。 では次にリリースノートに載せてあるコードを見てみましょう。 <old-s
WAI-ARIA 1.0 Authoring Practices
How to build accessibility semantics into web patterns and widgets ARIA Authoring Practices Guide (APG) Home Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences. This guide describes how to apply accessibility semantics to common design patterns and widgets. It provides design patterns and functional
MediaRecorder API
Safari Technology Preview 105 and Safari in the latest iOS 14.3 beta enabled support for the MediaRecorder API by default. This API takes as input live audio/video content to produce compressed media. While the immediate use case is to record from the camera and/or microphone, this API can take any MediaStreamTrack as input, be it a capture track, coming from the network using WebRTC, or generated
AbemaTVのアクセシビリティ 小さな一歩｜シュンスケ｜ABEMA
「アクセシビリティ」という言葉を使うほどではないかも。（予防線） 正直なところ、マシンリーダブルな部分は僕はまだよく理解してない。 アプリにおけるスクリーンリーダーとか操作や表示調整諸々とかちょっと待って！頑張るから！という意気込み。 で、完全に僕の主観だけど、多くのデザイナーがまず初めにとっつきやすいアクセシビリティは「色のコントラスト」だと思う。 ということで、 まずはAbemaTVのiOSアプリの色を全部見直したよ！（2018年3月） （2019年春：追ってWebも対応済み） （Androidは元々マテリアルデザインのカラースキームを採用してたのでそこまで問題ありませんでした） これまでのUIの色周りの課題でいうと主にこの3つ。 ・「黒背景」と「白背景」の画面が混在していた。 ・どの背景でも文字のコントラスト比が十分に保たれてなかった。 ・使用している色数がちと多い。 「黒背景」と「
iOSアプリのアクセサビリティ
対応しないとと思いつつも、後回しになってしまう アクセサビリティ対応。 先日、ユーザさんにフィードバックを頂いて、「う、ごめんなさい」と思いつつ具体的に調べてみた。 iOSアプリで対応が必要なのは、VoiceOver という読み上げ機能。 ある程度デフォルトで組み込まれているので、意識せずアプリを作成していても、VoiceOverが動作する。 良い意味でも悪い意味でも、iOSアプリはアクセサビリティ対応が標準という位置づけ。 そのため、知らずに恥ずかしい状態でアプリをリリースしている可能性がある。 iOSアクセシビリティプログラミングガイド に日本語のドキュメントがある。 プログラミングガイドとなっているが、どんなラベル、ヒントなどを入れると良いのか？という記述もあり、プログラマー以外でもとても参考になると思う。 （ただドキュメントは少し古いようで、Accessibility Inspec
こんなエレベーター、見たことある？ 乗り方を知らずに海外で赤面した話 / 手押しのトラップに気をつけろ！
» こんなエレベーター、見たことある？ 乗り方を知らずに海外で赤面した話 / 手押しのトラップに気をつけろ！ 特集 よく言われることだが、世の中は知らないことだらけである。そしてそれを身に沁みて感じるのが、海外に行ったときではないだろうか。環境や言語が変われば、今まで当たり前にしていたことが出来なくなって戸惑うことは珍しくない。だけど……！ さすがに、エレベーターの乗り方が分からずにテンパるとは思いもしなかった。というか、あんな手押しタイプがあったなんて……。エレベーターひとつとっても、色々あるんですなぁ。 ・ヨーロッパのホテルで見たエレベーター 私はそのエレベーターを今まで2回見たことがある。最初はオランダのスケベニンゲンにあるホテル。そして、ギリシャのロードス島にあるホテルだ。その2つに細かな違いはあったものの、サイズが小さかったことと、日本のホテルにあるエレベーターとは全く違う雰囲気
現地価格でお買い物。 アメリカ転送サービス 『Fishisfast』の使い方。 | ミソジカラ ~ 30代メンズが知りたいコト
転送って?? ブログを拝読してくださっている方は、ほとんど日本在住かと思いますのでその前提で、お話しさせていただきます。 こんにちは! 現役ファッションバイヤーのオカダ(@maisongaikotsu)です！ 海外通販で購入したいとき、日本へ直送している通販も増えてきました。 しかし、まだ日本へ配送してくれないSHOPの方が多いのが現状。 海外の方が極端に価格が安いブランドも多数ございます。 アメリカを拠点にしているブランドなど 私が今から紹介する、Fishisfastはすぐにアメリカの住所(ロッカー)が取得でき今まで購入できなかった商品を購入できるようになります。 発送代行にいざ登録 Fishisfast 登録は無料です。 日本語の対応していますので登録もとても簡単です。 カスタマーサポートも、日本語対応可能なので嬉しいですね。 いざ入力し登録！ あなたのアメリカの住所が完成！ Fish
キャンセル「2度押し」のナゾ エレベーターの階数ボタン 方法なぜ共通？ | 乗りものニュース
キャンセル「2度押し」にはワケがある 東芝エレベーターでは2000年代前半から、日立ビルシステムや三菱電機ではおよそ10年前から、エレベーターの行き先キャンセル機能を製品に標準装備しているといい、異なる方法のものは、それ以前に製造された機種に多いようです。あるメーカーによると、ボタンの「2度押し」は業界で統一的に決めた方法だといいます。 その方法を定めたのが、昇降機メーカーの業界団体である日本エレベーター協会です。2006（平成18）年に、ボタンの「2度押し」を行き先キャンセルの方法とした「利用者による登録呼び取消し方法の標準」を作成しました。製造会社ごとにキャンセル方法が異なると、利用者に混乱を与えることから定めたのだとか。しかしこれはあくまで協会の標準であり、新造機でも、キャンセル機能を持たないものもあるそうです。 キャンセル機能が備わってきた背景について、日本エレベーター協会は「エレ
一般的な電化製品をスマート家電に変えてくれる 超小型ロボット「マイクロボット・プッシュ」2nd Generation - +Styleショッピング
マイクロボット・プッシュはボタンを長く押すことはできますか？ ボタンを押す長さを設定することができます。例えば、長くボタンを押すことで強制的に再起動させるパソコンの電源ボタンの場合、マイクロボット・プッシュにそれを設定、実行させることができます。 マイクロボットプッシュ 1st Generation と 2nd Generationの違いにはどういうものがありますか？ マイクロボットプッシュ Generation 2の主要機能は以下の通りです。 ＊ビルトインタイマー ＊タッチスクリーン対応 ＊さらに強くなったギアー ＊ノイズ減少 ＊iBeacon 対応 ＊強力な接続 プロタがなくてもマイクロボットファームウェアアップグレード可能ですか？ プロタなしでもマイクロボットモバイルアプリよりファームウェアアップグレードが可能です。 新しいファームウェアバージョンが発見された時、マイクロボットの横に
トレタの増井さんに聞く、B2Bサービスのカスタマイズ
今日の夜、トレタの増井さん（@masuidrive）さんと会って晩御飯を食べました。下らない話や日本企業の海外進出の話などをする中で、B2Bサービスがカスタマイズを受け入れるというのがどういうことなのか、という話が大変面白かったので、許可を得た上でブログ記事にさせてもらいました。 B2Bとは、Business to Businessの略語であり、企業が主に企業に向かってサービスやプロダクトを提供するタイプのビジネスモデルを指す言葉です。対義語がB2C(Business to Consumer)で、企業が主に個人に向かってサービスやプロダクトを提供するタイプのビジネスモデルを指します。B2Bビジネスの場合は契約1口あたりの金額が大きくなる傾向があり、逆にB2Cビジネスは1口あたりの金額はさほど大きくないのが普通です。 自分も昔の会社でB2Bを経験したことがあるのですが、B2Bをやる上で1つ大
DCGAN face generator demo
各タグベクトルに強度を掛けた総和 ＋ ノイズ を元に、ニューラルネットが画像を生成します noise strengthスライダーでノイズ強度を調整できます。変な画像が多いときは下げて、似たような画像ばかり出るときは上げましょう 各タグ強度の初期値は0で、右に動かすとプラスに、左に動かすとマイナスになります draw!ボタンを押すと、ノイズはそのままにタグ強度の更新を反映します shuffle!ボタンを押すと、タグ強度の更新を反映し、ノイズも再サンプルします reset!ボタンは各タグ強度を0にリセットするだけです Chainer-DCGANで生成された画像は自由に使用することができます。使用により生じた一切の損害に対し、Chainer-DCGANの開発者は責任を負いません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Component Story Format 3.0
ミュージシャンがつくった耳栓「Knops」は、あなたの耳に「音量調整ボタン」を授けてくれる