![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
![input[type=number] のステートを安易に number 型にしない - fsubal](https://cdn-ak-scissors.b.st-hatena.com/image/square/7158ad1623f38d46fa16bc786647d6587a63a968/height=288;version=1;width=512/https%3A%2F%2Fscrapbox.io%2Ffiles%2F633ade0e2efe22001d60e1ea.gif%3Ftype%3Dthumbnail)
![input[type="number"]をやめた話](https://cdn-ak-scissors.b.st-hatena.com/image/square/baca40dbd8892b9650741254db63ebc63ee954fa/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fy7q8dkG--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Ainput%25255Btype%25253D%252522number%252522%25255D%2525E3%252582%252592%2525E3%252582%252584%2525E3%252582%252581%2525E3%252581%25259F%2525E8%2525A9%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AHidetoshi%252520Ota%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4YmI2YjY4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252583%2525B3%2525E3%252582%2525BF%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252596%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IxZWY4MWQxNDUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
HTML属性を使い、ユーザーに優しい2要素認証を実現する方法
製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
「○○語ってどうやってキーボード入力するんだろう？」と時々思うけど、それは世界中の人が日本語に対して思ってるよという話！
ソウイチ @Soichi_ii 「XX語はどうやってキーボードで入力してるんだろう…」って時々思うけど、それ、実は世界中の人が日本語について思ってるんだよね。 2021-11-18 10:25:49 ソウイチ @Soichi_ii アルファベットのキーを2つか3つ叩くとそれがひらがなとか言うミミズ文字に変化し、スペースキーを押すとさらに別の文字に変化するとか意味わからん杉やろ。 2021-11-18 10:27:24
先日Twitterで「大学生がスマートフォンでレポートを書いている」というツイートが話題になっており、それに対して反応している方達もほぼ全員が「スマートフォンでレポートを書くのは効率が悪い」という前提で話をしていることに大変違和感を覚えました。 なぜなら私はこのブログはもちろん、技術書を執筆するときでさえ主にスマートフォンで下書きをしているからです。 PCを使うのは、ほぼスクリーンショットの撮影と最後の仕上げだけです。 その方が、最初からPCで文字入力するのに比べて圧倒的に効率が良いです。 この記事では、iPhoneとAndroidそれぞれで音声入力を効率よくおこなう方法について解説します。 iPhone・iPadの場合 先に結論から申し上げると、iPhone・iPad・Macの日本語音声入力は、AndroidのGoogle音声入力に比べて認識精度が低く、認識できる単語が少ないです。 仕事
今の学生はフリック入力は出来るけどブラインドタッチができない…しかし"両手フリック入力"をする子もいてローマ字入力より早い
大島堅一 @kenichioshima 今の学生さん、10年くらい前は良かったのですが、ここ数年でキーボード入力、ブラインドタッチができない人がめっちゃ増えました。いくらフリックが速いといっても、結局鈍行ですから、キーボードブラインドタッチの特急には負けますし、しょぼいです。 2020-09-12 08:42:42 リンク NEWSポストセブン 若者のPC離れ、キーボードよりフリックが速く上司嘆く 今春、男性新入社員が部下となった、大手商社勤務の30代会社員が嘆く。「配属直後、翌日の会議で使う資料を作るように指示したところ、左手でスマホを持ち、フリック入力でパパッと調べもの… 2 users 西郷達彦 @tsaigoh @kenichioshima @sunegebohbohman 学部1年生の情報処理の授業を担当し、タッチタイプを課題としています。 5月に4回で合計で30分くらいの講習を
なぜフットスイッチを入れたら仕事の効率が2割増になったのか考えてみる - 勝間和代が徹底的にマニアックな話をアップするブログ
とにかく最近の私のマイブームはフットスイッチです。こちらにブログを書いたところやけにバズりました。 katsumakazuyo.hatenablog.com 実はこの時点からさらにTABキーを増やしたかったので、もうひとつだけ買い足して7つになっています。 今7つはそれぞれ左からこのような形で、キーがアサインされています。 Googleドキュメント音声入力トグル(Shift+CTRL+S) 改行 TAB BS 、 。 Google Chrome VoiceIn音声入力トグル (Shift+CTRL+9) そしてこれを入れたら本当にびっくりするぐらい仕事が早く終わるようになりました。なぜそんなに早く終わるようになったかということを考えたのですが、結局これまでは その１ 安定しているけれども句読点があまり上手に入らない Google 音声入力 その２ 不安定だけれども句読点はそこそこちゃんと入
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
HTMLだけでスマホやタブレットのカメラにアクセスできる、HTMLのcapture属性を紹介します。 私はこの属性を知らなかったのですが、実際にiPhoneとiPadで試してみたところ、前面カメラにも背面カメラにもアクセスできました。JavaScriptなどは必要なく、簡単なHTMLでできます。 You Can Access A User’s Camera with Just HTML by Austin Gil (@heyAustinGil) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのcapture属性とは capture属性のサポート状況 終わりに はじめに 私は先日、今までに見たことがないHTMLの属性、captureに出会いました。capture属性は非常にクールなので、動画と記事を書くことにし
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいればどうぞというものです。 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。 大変つかれましたので、厳しいコメントは受け付けません。 気が向いたら、もう少しきれいにするかもしれません。 ソースコード 以下、に載せています。 完成概要 ページとしてはこんな感じ
想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
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)
まだinputに一々disabledかけている？
フォーム送信中にinput要素やbutton要素をdisableにしてデータが帰って来たら有効に戻すというのは多分よくやっていると思いますが、fieldset 要素一つで一括でdisabledにできる方法を最近知ったので、シェアしておきたいと思います。 普段👇 <div> <input disabled={loading} type="email" name="name" /> </div> <div> <input disabled={loading} type="password" name="password" /> </div> <div> <input disabled={loading} type="submit" value="submit" name="button" /> </div> <fieldset disabled={loading}> <div> <input
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
スマホでNintendo Switchを操作する 〜 USB GadgetでPro Controllerをシミュレート 〜
スマホでNintendo Switchを操作する 〜 USB GadgetでPro Controllerをシミュレート 〜 Mzyy94 Game 19 Mar, 2020 あつまれ どうぶつの森の配信が開始されましたね。いくつか積みゲーが増え始めたNintendo Switchも、また新たにゲームが増えて稼働時間が伸びる一方です。 物をよくなくす身として、ゲームがしたいときにコントローラーが見つからないことは日常茶飯事です。 テレビやエアコンのリモコンもよく消えるので、スマートフォンから操作できるようにしています。スマート家電、文明の利器ですね。 コントローラーが見つからないとき、スマートフォンから操作はできないのでゲームはお預けです。 家電はスマホでスマートに操作できるのに、ゲームはレガシーなコントローラーを探さなきゃいけないなんて、なんてスマートじゃないのでしょう。 どうぶつたちの住
中国語の文字入力で「ピンイン」が最終的に普及した理由
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 日本のスマートフォン世代の中には、PCのキーボード入力が苦手な人もいるという。一方で、中国の今どきの学生は、さまざまな入力方法が用意される中でも、フルキーボードを好むことが多く、慣れていないと恥ずかしいようだ。今回はその「なぜ」を考察したい。 中国語には文字入力の方法が多数あり、入力方式エディター（IME）をはじめとしたツールは「輸入法」と呼ばれる。例えば、PCでは日本語のローマ字入力のような「ピンイン」入力と、各キーに割り当てられた漢字の部首から入力する「五筆」入力がある。また漢字が多くて入力が難しい高齢者向けには、手書き入力用の外部入力機器やソフトウェアが用意されている。 スマートフォンではピンインと五筆が入力できるフルキーボードに
HTML attributes to improve your users' two factor authentication experience
There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don't detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other. In this post we will look at
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
ユニティ・テクノロジーズ・ジャパン株式会社
デジタルツインの疑問に答える ～スマートで、安全で、持続可能な現実世界の実現に向けたデジタルツインの役割とは～
An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
Everything You Ever Wanted to Know About inputmode | CSS-Tricks
Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid
Most inputs have something in common — they are happiest with a companion label! And the happiness doesn’t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too. A happy label and input pair In this post, I want to focus on situations where the lack of a semantic label and input combination makes it much harder for all sorts of people to
<input type="file" name="example" accept="image/jpeg, image/png">
Why the GOV.UK Design System team changed the input type for numbers - Technology in government
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ To provide users with a good service, government organisations usually need to collect data. Lots of data. The GOV.UK Design System team publishes patterns and components that let users enter their data in an easy and accessible way. The last thing we want to do is create barriers to use
「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか？ HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟に対応することが求められます。 だがしかし！この日付入力フォームのカスタマイズはなかなか曲者でして、苦戦している方も少なくないでしょう。 Chromeではうまく表示されても、IEでうまくいなかったり、ちょっと見た目をいじったら動かなくなってしまったり。 今回はそんな悩める日付入力難民の皆様のために、日付入力フォームをどんな端末から見ても同じ見た目・動きになるようカスタマイズする方法について書きました。少しでもお役に立てればなによりでございます。 ※結論から言うと「日付入力フォームのカスタマイズなら、プラグイン(datepicke
HTML チュートリアル: HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス: HTML 要素 <
【Unity】新しいInput System入門 - 従来のUnityEngine.Inputに代わる高機能な入力管理システム - LIGHT11
Unity2020のリリースと同時にverifiedとなった新しいInput Systemの使い方をざっとまとめます。 全体感を把握することを目的としているので細かい部分の説明は割愛します。 インストール 基本的な入力の受け取り方（UI以外） Input Actionアセットを作る Input Actionを制御するスクリプトを自動生成する 入力を受け取る 入力イベントの色々な受け取り方 インタフェースを実装する コールバックを登録する ポーリングする より手軽に入力を受け取れるPlayerInput ActionやActionMapをMonoBehaviourに直接シリアライズする uGUIとの連携 参考 Unity2020.1 Input System 1.0.0 インストール Input SystemのインストールはPackage Managerから行います。 （PackageMan
GitHub - mroderick/plete: Vanilla autocomplete component
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
ふつうにvalueを書くことができない<input type="file">ですが、ブラウザによっては動的な設定もほぼ自由に行えることが判明しました。 <input type="file">へ値を設定する 入力するものがファイルである以上、<input type="file">に対してvalueは（空にするvalue = ''を除けば）使えないのですが、別ルートとしてfilesというプロパティがあります（MDN）。ここには選択したファイルのリスト（multipleでなければ1つだけ）が入ったFileListオブジェクトが入っていて、また代入することで設定が可能です。 FileListって、何？ ところが、filesに代入するものもFileListオブジェクトでなければならず、代わりにFileの配列を持ってきてもエラーになります。しかも、new FileListも動かないため、一見すると他の
こんにちは、ryohei（@ityryohei）です！ 本記事では、ファイルをアップロードする際に使用する「input type="file"」を好みのデザインにカスタマイズする方法をご紹介しています。 端末のスペックやインターネットの速度が上がるにつれて、画像や動画のようなメディアファイルを取り扱うサイトやWebアプリケーションが随分と増えてきました。大手SNSはもちろん、個人開発のサービスにおいても顕著です。今後は5Gの普及に伴い、メディア、特に動画のような大容量のファイルを取り扱うことが増えていくと予想されます。そのためファイル処理を構築する機会も増えていくのかな、と考えています。 本記事でご紹介するのは、ファイルのアップロードに使用する「input type="file"」のボタンデザインをカスタマイズする方法です。デフォルトの状態ではグレー背景のデザイン性がない見た目をしているた
Javascript Input Mask
Features get and set value and unmasked value easily no external dependencies supports overwrite mode supports all major browsers supports web components supports contenteditable RegExp mask Function mask Number mask (integer and decimal support) Date mask (with various format support and autofix mode) Dynamic/on-the-fly mask Pattern mask show placeholder always or when needed unmasked value can c
小ネタである。 昔よりは便利になったとはいえ、Gmailのメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが（Atomはディスコンになってしまったし）、AtomやChromeだけではなくEmacsにもMozilla Firefo
【Unity】新しいInputSystemのEnhancedTouchで端末のタッチ入力を処理する - うどんてっくメモ
Unityの新しいInputSystemの機能であるEnhancedTouchという機能を使って手軽に端末のタッチ入力が処理できたのでメモです。 はじめに 本記事では新しいInputSystemの機能の説明や、導入手順などは省略します。 以下のリンク先が大変参考になりましたので、確認していただけると幸いです。（一番下のリンク先が公式ドキュメントになりますので、情報が多いです。） 【Unity】新しいInput System入門 - 従来のUnityEngine.Inputに代わる高機能な入力管理システム - LIGHT11 Unityの新しい入力システムInputSystemを使ってみる | Unityを使った３Dゲームの作り方（かめくめ） Namespace UnityEngine.InputSystem | Input System | 1.0.2 検証しているツールとパッケージのバー
【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする - Qiita
はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
🌼 はじめに フロントエンドエンジニアなら誰でも一回はボタンコンポーネントを作ったこと、もしくは使ったことがあるのではないかと思います。私もUI実装のときよく触ってました。 最近 <input type="button" value="保存" /> のようなボタンコンポーネントを見かけて、「なんで buttonじゃないんだろう、てかなんでボタン作る要素が button と input の２つあるわけ？」という気持ちになりました。 気になったら調べるしかないので、今から調査結果を共有します。 1. input要素とbutton要素は似てる さっそくフォームの中にinput要素とbutton要素でボタンを作ってみました。 <form action=""> <label> 好きな食べ物は？ <input type="text" /> </label><br /> <div class="but
NTTドコモのモバイル社会研究所は、スマートフォンにおける「フリック入力」の利用実態について調査した結果を公表した。15～24歳の女性は約半数がフリック入力を利用しており、職業別に比較すると、学生は43％と他属性と比べて利用率が顕著に高いことが分かった。 NTTドコモのモバイル社会研究所は11月9日、スマートフォンの文字入力における「フリック入力」の利用状況を調査した結果を発表した。今回の調査では、「スマートフォンの操作」について尋ね、選択肢から「フリック入力を使っている」を選択したユーザーを「フリック入力利用者」として集計している。 若年層ほど「フリック入力」 ただし男女差あり 調査によると、男女共に若年層ほどフリック入力を利用している割合が高い傾向にあり、特に15～24歳の女性は、約半数がフリック入力を利用していた。この年代は他の年代と比べて利用率の男女差も大きく、男性は14ポイントほ
あんにょんはせよ 韓国語入力中 キーボードで한/영変換する場合 なーーんも考えず クリックして変換してたんだけど この度キーボードで 変換しなくてはならない事がありまして 「んな時は右Aｌｔキー押すんだっけなー」とパソコンを見たら 右Altキーがないではないか！！ 「んなパソコンあるんかいなー」 と調べてみたところ 右Altキーは出番が少ないからとかで ないものもあるそーだ 諦めの早い私 右Altなしでもなんとかする 方法探しの旅に出た 使ってないキーを 右Altにできるってのが出てきたので それをダウンロードしてみたが 上手く作動してくれないので 諦めの早い私 何だかてきとーにいじくってたら できちゃったのでございます 素晴らしー機能なのでご紹介 右Altキーなくてもケンチャナ♡ Hangul/English Toggle を切り替える術。 はじまりはじまり～ ↓ ↓ ↓ ↓
Hello World!
Using this project This is the Glitch Hello Website project. You can use it to build your own site. Check out the code in the editor and open the TODO for next steps!
ブラウザからIME状態を制御する方法 - Qiita
概要 WebアプリのUIとしてフォームを作成する場合は、HTMLの<input>タグを利用する。 この入力フォームに対して入力を始める前に入力できる文字種に応じた入力モードになるようにIMEを制御したいという要件が（特に業務アプリでは）ありうる。 ここではその方法を解説する。 これでIMEがオンの状態になる。ime-modeは以下の値を取りうる。 * active: IMEをオンにする。ただし、ユーザはオフにする操作ができる。 * inactive: IMEをオフにする。ただし、ユーザはオンにする操作ができる。 * disabled: IMEを無効にする。ユーザが状態を変えることはできない。ただし、これは使用してはならない。理由は後述する議論-UXについてを参照。 議論 対応ブラウザについて このime-modeというスタイルはCSS3の標準ではない。 そのため、必ずしも全てのブラウザが対
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhone・Androidで高速に日本語音声入力するためのベストプラクティス
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
HTMLだけでスマホのカメラにアクセスできるの知ってた？ 前面・背面カメラにアクセスできるHTMLのcapture属性
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
label で input[type="file"] を装飾するな
モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック
【Mac Info】 Macでかんたん文字起こし!「Google ドキュメント」で自動化しよう
HTML attributes vs DOM properties
HTML Inputs and Labels: A Love Story | CSS-Tricks
input type="file"でファイルをアップロードする方法｜HTMLリファレンス
日付入力フォームのカスタマイズでもう迷わない【IEにも対応】 – 東京のホームページ制作 / WEB制作会社 BRISK
inputmode - HTML: HyperText Markup Language | MDN
FileListは作れる！～file inputの中身も自由自在～ - Qiita
input type=fileのデザインを変更する【ファイル名出力対応】
GmailなどのtextareaをEmacsで編集する - Qiita
HTMLでボタンを作るとき使うべき要素は <input>？<button>？
若年女性は約半数、学生は43％が「フリック入力」を利用――ドコモ「モバイル社会研究所」が調査
『右Altキーがなくても韓国語入力を切り替える方法。』
pass13.blog.fc2.com
www.as-web.jp
monomax.jp
sayuri0.nk.awe.jp
expression-of-gratitude.com
jp.motorsport.com