2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

2024/04/19 257 users フォームバリデーション ユーザビリティ ICS MEDIA

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があり... 続きを読む

ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

2024/03/26 92 users プロパティ カーニング 垂直方向 ダークモード ライトモード

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む

JavaScript なしで動作するモダンなコードの書き方

2023/11/19 209 users コード JavaScript 書き方 SvelteKit 近年

Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HT... 続きを読む

行動変容 自分と世界を変える技術 / Behavior change techniques

2023/10/19 221 users 行動変容 サステナビリティ 技術 ディスカッション 世界

＜Ver.1.0＞ 社会の変化や、サステナビリティの観点で注目されている「行動変容」についてまとめています。 ＜シェア・共有歓迎です＞ ■解説＆ディスカッション会 こちらの資料をベースに、簡単な解説＆皆さんとのディスカッションをしました。 10/18(水) 上のイベントはすでに終了しましたが、今後も様々な形で機会を作... 続きを読む

CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

2023/10/10 149 users content textarea CSS 新しいプロパティ

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-h... 続きを読む

1Password のオートコンプリート機能をサービス提供側で無効化する

2023/09/01 75 users オートコンプリート機能 1Password dialog

Leaner Technologies の @corocn です。 最近フォームを作っていて、意図しないタイミングで 1Password のオートコンプリートが表示されてしまい困っていたので解決法を残しておきます。 画像はshadcn/ui - dialogから拝借 結論 input に data-1p-ignore 属性を付与する autocomplete="off" しても空気読んで無効化して... 続きを読む

無料で商用可、ChatGPT（3.5）に匹敵する生成AI「Llama 2」　Metaが発表、Microsoftと優先連携

2023/07/18 234 users Meta chatgpt 米Meta 生成AI 商用可

米Metaは7月18日（現地時間）、大規模言語モデル「Llama 2」を発表した。利用は無料で商用利用も可能としている。最大サイズの70億パラメーターモデルは「ChatGPT（の3月1日版）と互角」（同社）という。 ダウンロードには、Metaが用意するフォームから名前とメールアドレス、国、組織名を入れ、利用規約に同意した旨を... 続きを読む

Threads人気ランキング

2023/07/07 253 users threads 申請 アカウント 総フォロワー数 以下

Threads人気ランキング いま話題になっているThreadsの人気ユーザーをランキング調査。 総フォロワー数,前日からのフォロワー増加数でランキングを掲載しています。 ユーザー登録申請 自分のアカウントがランキングに掲載されていなかった場合、以下のフォームから登録の申請ができます。 申請してから掲載されるまで、... 続きを読む

ほしいアプリを入力すると、ChatGPTが爆速で作るサービス「GPTApp」

2023/04/07 289 users chatgpt ゲームアプリ 爆速 GPT-3.5 テキスト

ほしいWebアプリの説明を書くだけで、ChatGPTが作って即Web公開してくれるサービス「GPTApp」を、ゲームアプリの企画・開発を手掛けるミリオンダウト代表のTakayuki Fukudaさんが公開した。 アプリのイメージを考えてフォームにテキストで入力すると、ChatGPT（GPT-3.5）がコードを出力してWebに実装する。開発にかかる... 続きを読む

プログラミング用フォントとUIデザインのどちらにも使える！ 美しさと読みやすさを兼ね備えたフォント「Martian Mono」

2023/02/08 164 users フォント プログラミング用フォント UIデザイン 美学 人目

Webデベロッパーとデザイナー向けに、Groteskの人目を引く美学と読みやすさと分かりやすさを追求したオープンソースのフォントを紹介します。 ボタン・フォーム・リストなど、限られたスペースのWebサイトやスマホアプリのUIデザインにも適しています。 Martian Mono -GitHub Martian Monoは、Martian Grotesk（myfonts.... 続きを読む

はてなブックマーク 2022年12月度ユーザーアンケートご協力のお願い - はてなブックマーク開発ブログ

2022/12/19 119 users はてなブックマーク はてなブックマーク開発ブログ 末尾 対象

いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チーム、ディレクターの id:yone-yamaです。 はてなブックマークをご利用中のみなさまを対象に、サービスに関するアンケートを実施いたします。 ご協力いただける場合は、以下概要をご覧の上、この記事の末尾にあるフォームか... 続きを読む

<form>の外側に送信ボタンを配置する

2022/12/15 117 users Form signin input Label 外側

Web アプリなどの UI でよくあるのですが、フォームの外側に送信ボタンがあるようなデザインのときに HTML だけで解決する方法があるので紹介します。 form 属性で紐付け <input> 要素の form 属性に <form> 要素の id 属性値を指定することで、フォームと送信ボタンを関連づけられます。 <form id="signin"> <label> メ... 続きを読む

リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

2022/12/09 235 users ICS MEDIA HTML・CSS ボタン リンク 17選

ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクシ... 続きを読む

総務省の「Excel方眼紙で意見募集」にツッコミ殺到　河野太郎氏「次からフォームで対応」

2022/10/07 219 users Excel方眼紙 ほど遠い メタバース ツッコミ殺到 総務省

総務省の研究会が、メタバースの未来像に関する提案書を“Excel方眼紙”で公募していることについて、河野太郎デジタル大臣が「次からちゃんとフォームで対応します」とコメント。 総務省の研究会が、メタバースの未来像に関する提案書をいわゆる“Excel方眼紙”で公募していることについて、「メタバースとほど遠い、旧時代... 続きを読む

【阪神】「にじさんじナイター」実施　サウスポー謎ノ美兎がファーストピッチセレモニー - プロ野球 : 日刊スポーツ

2022/08/24 124 users 阪神 日刊スポーツ サウスポー プロ野球 バーチャルライバー

阪神－DeNA21回戦が「にじさんじナイター」として実施され、所属タレントでバーチャルライバー（ライブ配信を行う人）の月ノ美兎（つきのみと）の配信に度々登場する謎ノ美兎がファーストピッチセレモニーに登場した。サウスポーからダイナミックなフォームでボールは左打者の外へ。ワンバウンドスローとはなったが、ド... 続きを読む

新入社員たちに社内システムで「フォームに適当に文字を打ってみて」と言ったら「おまんじゅう」って打ち込んでる子がいてかわいかった。

2022/04/05 125 users 新入社員たち おまんじゅう 文字 社内システム 砂川

砂川 @kaonai_ 新入社員たちに社内システムの使い方を説明するのに「ここまでできた？じゃあ次はその下のフォームに適当に文字を打ってみて」と言ったら「おまんじゅう」って打ち込んでる子がいてかわいかった。 2022-04-04 19:53:09 続きを読む

ナイジェリア在住の日本人、警察で「部族名を書け」と言われて「JAPANのグンマー族」と自己申告。「群馬族ってなんだよ…」

2022/04/04 304 users Tribe 警察 自己申告 pic.twitter Japan

F@Nigeria @fumi_aoki 警察署に無犯罪証明書をとりに行ったらフォームにTribeの項目があり、何書こうか考えてたら、担当者の人が「ヨルバ族とかイボ族とかあるやろ。」と。Japanでもいいかと聞いたら「それは国だ。」と怒られたので、適当に出身地書いたけど、TRIBE GUMMAって何か嫌だな。群馬族ってなに。 pic.twitter.... 続きを読む

React Hook Formを1年以上運用してきたちょっと良く使うためのTips in ログラス（と現状の課題）

2022/03/25 71 users Form React React Hook 特段 Tips

はじめに 早いものでこちらの記事が公開して約1年、ログラスでReactを書き始めて1年以上が経ちました。 今回はフロントエンドのアプリの中でも特段重要なフォーム、特にReact Hook Formについての解説をしていきます。 今回のTipsは公式がベストプラクティスとして発表しているものではなく、あくまで個人が1年間の経験... 続きを読む

サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable

2021/10/14 125 users ユーザーインターフェース インタラクション ユーザビリティ

公開日 : 2021年10月14日 カテゴリー : ユーザビリティ / アクセシビリティ / ユーザーインターフェース (UI) / ユーザーエクスペリエンス (UX) ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化するインタラクションがあります。たとえ... 続きを読む

デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ | コリス

2021/09/14 207 users コンバージョン コリス UIデザイン ユーザー 翻訳記事

フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト... 続きを読む

Reactでウェブフォームを作る2021

2021/03/07 81 users フォームライブラリ ベストプラクティス Form React

Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 Re... 続きを読む

CSSの疑似クラス「:focus-within」が素晴らしい理由 | コリス

2020/11/17 199 users セレクタ コリス 意訳 CSS フォーカス

CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳... 続きを読む

もしあなたが東証のCIOだったらどうした？ ~あの記者会見から学ぶインシデントレスポンスのスキル~ | 一般社団法人 日本CTO協会

2020/10/04 357 users 技術 組織 機会 規模 コミュニティ

日本CTO協会は「技術」を軸に規模や業種の異なる様々な人や組織が集まっているコミュニティです。会員は本社団の活動内容、調査テーマについて参加、提案し、他の技術者・技術組織とともに成長する機会が得られます。ご興味のある方は法人会員向け申し込みフォームからお問い合わせください。 2020年10月1日夕方に行われ... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス Button モーダル インタラクション CSS

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

ワークフロービルダーが新登場 : Slack で簡単にタスクを合理化 | The Official Slack Blog

2019/10/15 659 users Slack ワークフロービルダー オフィスワーカー タスク

ワークフロービルダーが新登場 : Slack で簡単にタスクを合理化 フォームやメッセージなどの自動化で面倒な雑務にさよなら Slack の調べでは、オフィスワーカーの 70% が業務の遂行に他のチームや同僚の助けを必要としていることが分かっています。協力してプロジェクトを進めるには、リアルタイムで適切な担当者に適切... 続きを読む