自分でマストドンのシェアボタンを作ってみた。 <a href="#" class="js-mstdn-share-button">Share: {title} {}</a> <script defer src="https://github.com/windymelt/mastodon-share-button-scalajs/releases/latest/download/mstdn-share.js"></script> このコードを貼り付けるとテンプレートが展開されてシェアボタンになる。Share: {title} {}としている箇所は文言のテンプレートで、{}がURLで、{title}がタイトルで置換される。 初めてクリックするとポップアップが出てきて、自分のインスタンスがどこなのか教える必要があるけれど、一度使ったらLocalStorageに覚えてもらうようにした。一度設定した
Webページやスマホアプリで使用するボタンをモジュール式の拡張可能なCSSで実装されたライブラリを紹介します。 通常のボタンのさまざまなスタイルだけでなく、アイコン付きボタン、ブロック状のボタン、リフレッシュボタン、グルーピングボタン、プルダウンボタンなどを簡単に実装でき、Webページやスマホアプリだけでなく、プロトタイプにも適しています。 Knopf.css Knopf.css -GitHub Knopf.cssの特徴 Knopf.cssのデモ Knopf.cssの使い方 Knopf.cssの特徴 Knopf.cssはWebページやスマホアプリ、そしてプロトタイプの両方向けに設計された、モダンCSSで実装されたモジュール式の拡張可能なボタンシステムです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
If you want to give your website a little extra flair, you’ll definitely want to investigate and utilize CSS animated buttons. These bits of code add a layer of interactivity to your website that most site visitors will appreciate. Plus, they can be used to add a sense of dynamics and further help to solidify your brand. If you’re not sure where to start in getting these buttons for your site, how
電車の非常ボタン
今日自分が乗ってる電車の車両内で女性が意識を失って突然倒れて 誰かが非常ボタンを押して電車が停車した 非常ボタンのマイクで車掌とやり取りしたらしく、次の駅で対応するとなって電車は再び動き出した 駅についたらホームで待機してた駅員が入ってきて対応していたが 急病人が出た場合電車を止めるより、次の駅まで行ったほうが処置も早く出来るしいいと思うのだが 非常ボタンを押さないと車掌とやりとり出来ない仕組みになっているようだ 非常ボタンとは別に、次の駅で対応必要ボタンみたいなのも設置し、それを押すと次の駅で該当車輌のホームで駅員が待機して対処できるようにすれば 最小限の遅延で済むのではないか もちろん状況によってはすぐに電車を止めたほうがいい場合もあるので、乗客の判断で押せる「止める」か「次の駅で対応」か２つのボタンを用意するべきじゃないかと思った
Javaでは複数の定数をまとめて扱う型としてenum(列挙型)が用意されています。 これはこれで便利なのですが物足りないところもあって、それがSealedクラスなどを使うことで解決できるようになるので、解説します。 enum型 enumは状態やデータ区分を表すのによく使われます。 構文は次のようになります。 enum 型名 { 列挙1, 列挙2, ... } 例えば次のような状態を表すとします。 この状態を表すenumは次のようになります。それぞれの値は大文字で書くようにします。 enum State { READY, RUNNING, SUSPENDED, TERMINATED } enumではそれぞれの値ごとに処理を行うということがよくあります。そこでswitchと相性がいいです。 State s = State.READY; switch (s) { case READY -> Sy
Microsoft CopilotがSuno V3に対応。チャットAIで超お手軽に作曲する最新操作マニュアル（CloseBox） | テクノエッジ TechnoEdge
出版時にはさらにアップデートしたものにする予定。AI作曲関連の動きも早いので一体どうなることやら……。 Microsoft Copilotで作曲してみようSunoを使う方法が、実はもう一つあります。 それは、マイクロソフトが提供しているAIチャットサービス「Microsoft Copilot」（マイクロソフト・コパイロット）を利用することです。 Microsoft Copilotは、生成AIの代名詞ともなっているChatGPTと同等の機能が組み込まれているサービスで、Microsoftアカウントを持っていれば、copilot.microsoft.comにアクセスするだけで、基本無料で使えます。 画面下部に「なんでも聞いてください」と書かれているところにテキストを入力して▶️ボタンを押せば、AIが解凍してくれるという仕組みで、会話を続けながら、目的の情報を得ることができます。 ▲ログインしな
Update November 22nd, 2021: I added a recording of my CascadiaJS on this topic to the end of this post. Enjoy! Recently, I shared this tweet: 🔥 take I haven't fully thought through incoming: Every use of useEffect should be in a custom hook with a damn good name. It's frequently difficult to read & comprehend intention of the code when effects are strewn about. Better to encapsulate and provide c
こんにちは。GMOアドマーケティングのH.Tと申します。 Bluetoothボタンシャッターを使ってSwitchBotのスマートプラグを操作してみたのでご紹介いたします。 きっかけ 自宅にSwitchBotのスマートプラグがあり照明のオンオフを制御しています。 GoogleHomeと連携して声で「照明つけて」などと言って制御しています。 声で操作するのは状況によっては便利なのですがいちいち声を出したくない時もあり、かと言ってスマートプラグをアプリで操作するのも大げさなのでBluetoothボタンで操作する方法を試してみました。 Bluetoothボタンシャッターとは 100円ショップで売っている(売っていた？)スマホにBluetooth接続してカメラのシャッターボタンを押せたりするボタンです。 100円ショップ数店舗に問い合わせたのですが今は在庫がないとのことでAmazonで似たようなのを
こんにちは。株式会社トルクのデザイナー山﨑です。唐突ですが私は発達障害当事者です。ASD（自閉症スペクトラム障害/アスペルガー症候群）とADHD（注意欠如・多動症）を持っています。トルクでは私の障害を受け入れていただきウェブデザイナーとして一般雇用で勤務しています。 近年、発達障害は話題にあがりやすいトピックスですので、聞いたことある方やなんとなくご存じの方もいらしゃるかと思います。発達障害について説明しますとそれだけで長くなってしまいますので詳しくは「大人の発達障害ナビ」や政府広報オンラインの「発達障害って、なんだろう？」などをご覧いただくか、ご興味のある方は各自でググっていただければと思います。 今回は発達障害当事者デザイナーがウェブデザインをする上で工夫していることやアクセシビリティの観点からも書いていこうと思います。 ASD編：発達障害デザイナーがデザインする上で工夫していること①
A user made the mistake of posting their private information publicly. They accidentally set their account to public when they wanted it set to private. What caused this error wasn’t the user, but bad toggle button design. The user misperceived the toggle button that controls the public and private modes. The cue for the active state looked inactive to them. Their misperception was caused by the i
Chrome の Back button を押した際に「意図しない Cache」が利用されて、期待と違うページが表示される問題について調査した - Nao Minami's Blog
以前、同僚と話していた際に「同じ URL で Accept request header に応じて response の Content-Type を変えていると、Chrome で Back button を押した際の結果が意図しないものになる」ということが話題になりました。 これは、自分も過去に経験した事があり、不思議に思っていた部分です。Safari や Firefox では発生せず、Chrome だけで発生するというのもポイントです。この挙動について、今回は調査してみました。 TL; DR 今回の調査内容を簡潔にまとめると、以下のようになります。 同じ URL で Accept request header に応じて response の Content-Type を変えると、Chrome では Back button を押した際に意図しないコンテンツが表示される事がある。Safar
CSSで使えるおしゃれすぎるボタンデザインをまとめてみました！ codepenから引用しています おしゃれすぎるプロのボタンデザイン・アニメーションまとめ！ コピペで実装 工夫の仕方がプロ！ こだわりが強いアニメーション付きボタンを集めました シンプルながらも個性的なものなので、取り入れやすくユーザーにインパクトも与えやすい！ 王道とローディング 一見、よくあるボタンだけど、クリックすると… See the Pen animation submit button by Valentin Galmand (@valentingalmand) on CodePen. あっちからきたりこっちからきたり いろんなホバーアニメーションが楽しめます！ どれもすごい… See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
How to create a super-ellipse CSS button based on Lamé curve
I’ve always been a CSS fiend. Ever since I started creating web content I have been looking for the “perfect” button. The one button that users want to click over and over again. We’ve seen the rise of flat, material, skeuomorphism and atomic design over the years, but I haven’t seen any CSS frameworks make use of the Lamé curve on buttons yet. So today, I’m going to teach you how to create your v
福島県郡山市で生産管理や販売管理、EAP(従業員支援プログラム)業務支援など、オーダーメイドな業務システムの開発をしているエンジニアのサイト Windows 10上にVB6の開発環境を構築する必要があり作業を行ったのですが、そのときいろいろな問題が発生しました。 インターネット上には、Windows 10へVB6をインストールための様々な情報が公開されていますが、実際に試してみると公開されている情報と違う箇所や端折れる手順などがありました。 今回、実際に行った一連の作業を記事にまとめました。 確認を行った環境 Windows 10 Pro Version 1803 (64ビット版) Visual Basic 6.0 Enterprise Edition Visual Studioサブスクリプション(https://docs.microsoft.com/ja-jp/visualstudio/
ContextAPI と useState は本来組み合わせてはいけない ContextAPI の機能は、コンポーネントの階層を飛び越えてデータを配信することにあります。しかしここで気をつけなければならないのが、Provider に設定する値を useState で管理すると、Provider を持っているツリーが全て再レンダリングされることです。この書き方は最悪のアンチパターンです。 アンチパターン Provider に渡す値を更新をするのに上位のコンポーネントの useState のディスパッチャーが使用しています。どれか一つでも値を更新すると、全てのコンポーネントが再レンダリングされます。ContextAPI での解説などでこの方法をよく見かけます。しかし値一つの変更で全てを再レンダリングするなら、状態管理の必要性そのものが無くなってしまいます。これはやってはならない書き方です。 i
![[React]ContextAPIのアンチパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/272a515da385a1f469e3be36a2c50fa6ade78082/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bZLUf-z---%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255DContextAPI%2525E3%252581%2525AE%2525E3%252582%2525A2%2525E3%252583%2525B3%2525E3%252583%252581%2525E3%252583%252591%2525E3%252582%2525BF%2525E3%252583%2525BC%2525E3%252583%2525B3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
リンクテキストを具体的なものにすれば、リンクに偽りがないとユーザーに期待してもらえるし、その期待に応えることもできる。また、中身のある具体的なリンクテキストにすることで、簡潔なまま、単独で意味がわかるようになる。 Better Link Labels: 4Ss for Encouraging Clicks by Kate Moran on March 24, 2019 日本語版2019年10月30日公開 ユーザーはリンクテキストによってサイト内を移動する。コンテンツの見つけやすさや発見しやすさ、アクセシビリティに対する、この小さくて控えめなUXの文言による貢献度は大きい。 そして、こうした役割を最もうまく果たせるリンクとは以下のようなものである： 具体的である（Specific） 偽りがない（Sincere） 中身がある（Substantial） 簡潔である（Succinct） 具体的であ
HTMLとCSSのコピペでできるボタンデザイン50選
CSS /* 001 */ .button001 a { background: #eee; border-radius: 3px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 280px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 500; } .button001 a:hover { background: #313131; color: #FFF; } .button001 a:after { content: ''; width: 5px; height: 5px; border-top
a タグの download 属性でダウンロード 従来は Content-Disposition で「ファイルに保存」としていた これまで、サーバーからのデータを「ダウンロードしてファイルに保存」するには、サーバーからクライアントへの HTTP レスポンスを送信するときに次のような HTTP ヘッダーを送る必要がありました。 Content-Disposition: attachment; filename="foo.png" ブラウザ側では、Content-Disposition というヘッダーをみることで、そのコンテンツをそのままインラインで表示するのではないということを知ることができます。 言い換えると、Content-Disposition というヘッダーがある場合に、ブラウザはそのページにナビゲートするのではなく、これからサーバーから送られてくるデータは今のページのアタッチメント
💡Update, March 12: Storybook 8 and Visual Tests addon are out now! Learn more in the Storybook 8 launch announcement or Visual Tests addon’s launch announcement.Storybook 8 introduces a totally new workflow for safeguarding your UI from unexpected visual changes through Storybook’s Visual Tests addon! Learn how it works and try the beta today. Why visual testing?The challenge of testing UI is tha
見た目は、角丸の普通のボタン。 ホバーすると、高電圧の電流が流れるようなエフェクトが美しくてかっこいいボタンを紹介します。厨二病心を全力でくすぐられますね！
Google Apps Script を使って、一定時間より古い Gmail を自動的に削除するスクリプトを定期動作させる方法を書きます。 ちなみに、Google Drive の容量が不足している場合、Drive にメール以外の容量の大きなファイルがあるかもしれません。Google Drive にある容量の大きなファイルは、 https://drive.google.com/drive/quota こちらから一覧で見れます。 1. Google Apps Script のページを開く。 https://script.google.com/ もしログインしてなければ、「Start Scripting」のボタンを押してログインします。 2. 左上の「新しいプロジェクト」のボタンを押します。 3. 上の「無題のプロジェクト」をクリックし、「古いGmailを削除」にプロジェクト名を変更します。 下
Avoid Flip-Flop ひとつのボタンでオンとオフを切り替える場合、ラベルが現在の状態を表すのか押した後の状態を表すのかわかりづらいことをフリップフロップ問題という。状態表現とラベルを分離してこの問題を回避する。
Flutter開発する中で、「この形のボタンどうやって書いたっけ？」と調べ直すことが何度かありましたので、ここにまとめておきます。 特に、ボタンウィジェットのshapeで定義できるのは、RoundedRectangleBorderやStadiumBorder、BeveledRectangleBorderなどなど色々ありますが、少し覚えにくいんですよね... 修正点等ありましたら、ご指摘お願いします。 [2020年10月24日追記] Flutter1.22より、ElevatedButtonやTextButton、OutlinedButtonなどのボタンWidgetが追加されたため、そちらも追記しておきます。 いろんなボタンまとめ 1.色付きボタン // Flutter1.22以降のみ ElevatedButton( child: const Text('Button'), style: El
![[Flutter]コピペで使える！ボタンのデザイン16種類をまとめました - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae7925d84dafd3587d412649113aa46d1b289b7d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCRmx1dHRlciU1RCVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyU5QSVFMyU4MSVBNyVFNCVCRCVCRiVFMyU4MSU4OCVFMyU4MiU4QiVFRiVCQyU4MSVFMyU4MyU5QyVFMyU4MiVCRiVFMyU4MyVCMyVFMyU4MSVBRSVFMyU4MyU4NyVFMyU4MiVCNiVFMyU4MiVBNCVFMyU4MyVCMzE2JUU3JUE4JUFFJUU5JUExJTlFJUUzJTgyJTkyJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUUzJTgxJUJFJUUzJTgxJTk3JUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kZDQwM2IwZmM4YTc2MzczNjFhMDYyZjVlMWY2OWMwMQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY29rYV9fMDEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU1OTY3ZjdmMTNmYTA2ZGFmNTg3ZGM3YjlmN2U0ZmJk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D368b2ca41d62d82729aa21149e9c90fd)
CSSで実装するボタンのホバーエフェクトまとめ|tamatuf
CSSで作成したボタンにカーソルをマウスオーバーした際に、色が変わる、大きさが変わるなど様々な効果を付けるホバーエフェクトのサンプルをまとめてみました。 色を変える ホバーするとボタンの背景色が変わるエフェクトです。 SAMPLE <a href="#">SAMPLE</a> a { color: #fff; font-size: 16px; font-weight: bold; background: #333; padding: 18px 30px; border-radius: 6px; transition: .3s; } a:hover { background: #13c3ac; } transitionを設定することで、色の変化にわずかにじんわりとした動きをつけています。 透過する ホバーすると、ボタン全体が透過するエフェクトです。 SAMPLE <a href="#">SA
モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが、これはモーダルとして開発者が求めているものとは、多くの面で異なる。 そのためなのか、モーダルを実現するためのライブラリは多数公開されている。 だが個人的な方針として、依存ライブラリはあまり増やしたくない。 かといって自分で開発するのもそれなりに手間がかかる。 そこで、HTML 5.2 で標準化されたdialog要素を使うことにした。 標準化された機能なら、知識やノウハウが陳腐化しにくく、第三者が作ったライブラリより採用しやすい。 そう考え、React アプリのモーダルをdialog要素で実装することにした。 だが、DOM を操作するため
時は2023年！リモコン上で繰り広げられる、どこで何を見るかの群雄割拠の現状→「白ボタン全部いらない」「白ボタン便利で結局使ってる」
kajiwoh(かじを) @kajiwoh @SHARP_JP フナイ製・Amazon or ヤマダデンキ専売の FireTV機能搭載テレビのリモコンはこんな感じ ダイレクトボタンが プライムとNetflixだけで、 あと、コンパクトだが、 逆に必要なボタンが、サブメニュー側からしか出てこないデメリットもある pic.twitter.com/cLCYTSH7WK 2023-06-01 12:08:50 kajiwoh(かじを) @kajiwoh @SHARP_JP まあ、お客様のニーズに応えるて、 画面上にある項目 （シャープの大型テレビの大半がGoogleTV搭載テレビ） 十字キー・決定キーの押すボタンの回数を減らす為に、 各社ネット配信のボタンがある訳だけど なかったらないで、言われるし付けたらつけたで言われる 2023-06-01 12:18:44
JavaScriptでイベントバインド（クリックしたらこの関数が動く、というプログラム）するときには、『addEventListener』をつかうことが多いと思います。 今回は、「addEventListnerで呼び出す関数に『引数』をわたしたい！」という場面で引っかかりました。ググってもパッとわかる解説記事がなかったので、備忘録も兼ねて書いておきます。 ・JavaScriptの基礎がわかる ・JavaScriptでアプリ開発をしたい という方にむけて書いていきます。なお、jQueryやReactなどのライブラリは使わず、ネイティブJavaScriptでの解説記事になります。 ふつう、addEventListenerをつかって引数をわたしたければ、次のようなコードを書きたくなりますよね。 <script> const userName = 'Ken'; const target = doc
【CSS】セレクトボックスのプルダウンをデザインできるselectmenuが便利すぎた。 - Qiita
はじめに みなさんは、<select> タグを使う時、<option> をいい感じのデザインしたいと思ったことはないでしょうか？ 多くの方は、妥協して、<select> タグを使うか、ライブラリーを使うか、 <div>・<button>などを使いWAI-ARIA補完するなどで実装しているのではないでしょうか？ 実は、Open UIから提出された、セレクトボックスのプルダウンをデザインするための草案が、 Google Chrome チームとMicrosoft Edge チームの協力で実験的な機能として、<selectmenu> が公開されました。 そのため、この記事では <selectmenu> の具体的な内容の紹介と実装方法の解説を行います。 動作環境 <selectmenu> は、まだ実験的なものであるため、限られた環境で再現できます。 そのため、<selectmenu> が動いているの
【CSS】<input type="file">は::file-selector-buttonでスタイルをつけよう - Qiita
<input type="file">は直接スタイル指定ができず、デザインの変更 が面倒だったのですが、::file-selector-button を使えば簡単に指定できることを知ったので備忘録です。 使い方 See the Pen ::file-selector-button by himeka223 (@himeka223) on CodePen. ::file-selector-button にボタンのスタイルを設定するだけです！ 「選択されていません（選択後はファイル名）」の文言のスタイルはinputの方で変更できます。 display: block; を追加すればボタンとテキストの間で改行も可能です。 すべてのブラウザで対応済み 既にすべてのブラウザで対応済みのようで、安心して使えます！ テキストも変更したい場合は疑似要素をのせる 残念ながら ::file-selector-b
Bootstrap のファイル選択を custom-file-input できれいにする - A Memorandum
はじめに テンプレート デフォルトの ファイル インプット カスタム・ファイル・インプット bs-custom-file-input を使う ラベルの変更 取消ボタン 取消イベントのマルチブラウザ化 まとめ はじめに Bootstrap の Forms コンポーネントは、デフォルトだと file input だけ統一感がなく残念な感じです。 custom-file-input を使って以下のような file input を作る手順を見ていきます。 なお、ここでは Bootstrap 4 を使います。 テンプレート 以下のような html を出発点とします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
id:Furutsukiさんがブログ内のランダムな記事にジャンプするボタンを作られて居て、良いなと思ったので真似してみた。 furutsuki.hatenablog.com 気に入った日記が出るまで、つぎつぎと飛んでいけるとおもしろそうだと思って、画面の右下にランダム記事にジャンプってボタンを固定で表示してみている。 RSSから記事を探してくるふるつきさんの実装方法とは違っていて、僕は2011年11月のはてなブログのリリース日くらいから、毎日欠かさず日記を書いている（忘れてる日もあるかも…）ので、日付だけ指定すればその日の日記が出る、という状態になっている。 他人のブログではこの実装ではうまく動かないだろうと思う…。 実装はこんな感じ。普通はこれでは全然記事が見つからないと思うけど、この実装で動くデータがある、というのがおもしろポイントだと思う。 var releaseAt = new D
cssbuttons.ioはCSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できるWebアプリです。 Githubのアカウントでログインすればエディタが使えるようになります。CodepenなどのJSタブが無いやつ、みたいな印象でした。じゃあCodepenでいいじゃないかという気もしますけどこちらはボタンとチェックボックスとトグルボタンに限定されている点、JS不要のもののみが掲載されている点が特徴となっています。 ボタンはCSS、HTMLに加えて、プレビューエリアも用意されています。個人的にボタン等のスタイリングで困った事はあまり無いので使うかは分かりませんが、これはこれで良いんじゃないかなぁと思います。 cssbuttons.io
A pure CSS library that provides you with a variety of nice-looking toggles.
以下のようなサイトに飛びます。 上記画面が表示されたら、次は下にスクロールしていきます。 Dokuwiki on a Stickの構築手順2:Dokuwiki on a Stickのサイトにアクセス 下にスクロールするとDokuwiki on a Stickのリンクが出てくるので、赤枠の部分のリンクをクリックします。 ※ここでDokuwiki on a Stick以外のインストールタイプのDokuwikiなどをインストールしたい人はそれ以外の自分にあったリンクにアクセスしてください。 Dokuwiki on a Stickの構築手順3:Dokuwiki on a Stickのダウンロードサイトにアクセス 手順２のDokuwiki on a Stickのリンクにアクセスすると以下のようなDokuwiki on a Stickのサイトに飛びます。 上記画面が表示されたら、赤枠のdownload
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub https://github.com/quilljs/quill Demo https://quilljs.com/ ・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある） ・クリップボードを経由して画像のアップロードが可能です。 ・highlight.jsを使用してコードブロックのハイライトが可能のようです 対象ブラウザ IEは非推奨のようです。 ライセンス BSD 3-clause サンプル 1.3.7のサンプル <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Quill</title> <!-- highlight.js を使う場合はq
「降りないの？」降車ボタン押され停車→男児がいつもと違う場所で降車。問題になりバス運営謝罪 同バスではボタンのいたずらが常態化 : 痛いニュース(ﾉ∀`)
「降りないの？」降車ボタン押され停車→男児がいつもと違う場所で降車。問題になりバス運営謝罪 同バスではボタンのいたずらが常態化 1 名前：スリーパーホールド(愛知県) [EU]：2022/05/19(木) 05:56:48.05 ID:zCeK1LMS0 長野県小海町の町営バスで、下校中の小学1年生の男の子が、自宅から4キロほど離れたいつもとは違う停留所でバスを降り、歩いて帰ろうとしたことが地元で問題となっています。 問題になってるのは小海町が運営する町営バスで、朝と夕方の時間帯は小海小学校前の停留所を経由し、児童は無料で利用できます。問題があったのは、16日の夕方。小海小学校に通う小学1年生の男の子が、本来降りるはずの停留所ではなく、自宅から4キロほど離れた停留所でバスを降り、歩いて帰ろうとしたのです。 バスを運営する町の担当課長は当時の様子をこう説明します。「降車ボタンが押されたという
失敗しづらいUIへのアプローチ - Qiita
「やっぱり自分にはUIは無理だ」 そう思う人もいるかもしれません。 でもちょっと待ってください。 実際に私が経験した失敗事例を聞いてください。 それで学びがあれば儲けもの、なければ「自分よりショボい奴がいるw」と思って自信を取り戻してください。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です とあるサイト作成の駄目UI サイトを作っていきながらダメな点を指摘していきます。 指摘は、センスによる美しさ的な指摘ではなく、ルールベースで誰にでも出来る内容の指摘です。 ということで、画面上部にメインのナビゲーションがあるサイトを作ってみます。 いきなり駄目ですねw メニューの文字と背景のコントラス比が薄くて読みづらいです。 暗めの背景の場合は明るめの文字にしましょう。 詳しくはエンジニアが知っておきたい色についてのお話を見てください。
HTMLFormElement: requestSubmit() method - Web APIs | MDN
submitter Optional A submit button that is a member of the form. If the submitter specifies form* attributes, they will override the form's submission behavior (e.g. formmethod="POST"). If the submitter has a name attribute or is an <input type="image">, its data will be included in the form submission (e.g. btnName=btnValue). If you omit the submitter parameter, the form element itself is used as
Androidのキーボードアプリ Gboard は多数の便利機能を備えていることが特長ですが、Googleはさらにキーボード上で削除したテキストを戻すための｢元に戻す (Undo)｣ボタンが追加することが報告されました。 ｢元に戻す｣という機能は、テキスト編集などをするときに文字を間違って削除してしまったり、うっかり消しすぎてしまったときなどに重宝します。もちろん、これまでにも機能として使うことはできましたが、あくまでアプリやサービス上で利用できるのであって仮想キーボード(Gboard)上で使えるわけではありませんでした。また、WindowsやmacOS、ChromeOSではCtrl+Zのようなキーボードショートカットもありますが、Gboardには用意されていません。 現在、GoogleはGboardに｢元に戻す(Undo)｣ボタンを追加することで、システム全体でこの機能を使えるようにしよ
Building a Magical 3D ButtonBet you can't click just once! IntroductionI had a neat realization recently: Buttons are the “killer feature” of the web. Every significant thing we do online, from ordering food to scheduling an appointment to playing a video, involves pressing a button. Buttons (and the forms they submit) make the web dynamic and interactive and powerful. But so many of those buttons
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マストドンのシェアボタンを自作した(追記あり)(今日から使えます) - Lambdaカクテル
CSSでさまざまなスタイルのボタンを簡単に実装できる！モジュール式の拡張可能なCSSライブラリ -Knopf.css
20 Amazing Pure CSS Animated Buttons - 1stWebDesigner
enumの使い方のおさらいと高機能enumとしてのSealedクラス - きしだのHatena
useEncapsulation | Kyle Shevlin
Bluetoothボタンシャッターを使ってスマートプラグを操作してみました
発達障害当事者デザイナーとウェブアクセシビリティ ｜Yuu Yamasaki
Don’t Use Inverted Color Cues on Toggle Buttons
アニメーションがステキなおしゃれすぎるCSSボタンデザイン｜デシノン
VB6開発環境をWindows 10にインストールする手順 – RIALAB.
[React]ContextAPIのアンチパターン
適切なリンクラベル：クリックを促す4つのS
ファイルをダウンロード保存する方法 - JavaScript 入門
Storybook’s Visual Tests addon enters beta
見た目はUIデザインによくある普通のボタン、でも触ると高電圧の電流が流れるエフェクトが美しくてかっこいい
一定期間より昔のGmailを自動的に削除する方法 (Google Apps Script を使う)
ソシオメディア | フリップフロップ問題を避ける
[Flutter]コピペで使える！ボタンのデザイン16種類をまとめました - Qiita
React アプリのモーダルを dialog 要素で実装する - 30歳からのプログラミング
【JavaScript】addEventListenerで関数に引数をわたす｜MI
記事をランダムに表示するボタン作った - hitode909の日記
CSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できる・「cssbuttons.io」
MoreToggles.css - All Styles
Dokuwiki on a Stickの構築から初期設定方法までを解説
GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
Android の Gboard アプリに｢元に戻す｣ボタンが追加されるようです | HelenTech
Building a Magical 3D Button
cyu-nen.com
news.yahoo.co.jp
japannewsnavi.com
ameblo.jp/momo1945815
www.asahi.com
makuring.jp