ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり

2024/04/27 103 users テンキー ウェブページ 挙動 数値 ウェブページ上

ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみま... 続きを読む

文章から画像を生成するAI「DALL・E2」を使ってみた｜柞刈湯葉 Yuba Isukari｜note

2022/07/30 245 users Note 柞刈湯葉 Yuba Isukari 行列 職業 文章

文章から画像を自動生成する DALL・E2 が先日一般公開された。画像の商用利用も可能とのことなので、うまくすれば note 記事のアイキャッチ作成に使えるかもしれない。 使用は基本無料だが申請制である。かなり待ち行列が長いらしく、僕は7月6日に申請したら7月30日に通った。住所や職業や使用目的などの面倒な入力欄は... 続きを読む

「全ての住所フォームがこうなってほしい」　SIerが公開した“使いやすい入力欄”の作り方が話題　ソースコードも掲載

2022/03/01 305 users SIer 知見 ひとまとまり ソースコード 住所フォーム

SIerのオープンコレクターが公開した、使いやすい住所入力フォームを作る知見をまとめたブログ記事が話題だ。「郵便番号を入れる枠はひとまとまりに」といった機能の必要性などを説明しており、デモページやソースコードも掲載している。 「郵便番号を入れる枠はひとまとまりに」「郵便番号を基にした住所の自動入力を搭... 続きを読む

ぼく「嫌な予感がするから警告いっぱい出したれ」データ削除は三重確認設計に→？？「なんかデータ消えたんですけど？」 - Togetter

2020/03/13 353 users Togetter Delete Yes 予感 警告

ぼく「なんか嫌な予感がするから警告いっぱい出したれ」 『このデータを削除すると復活できませんが本当に削除しますか？YES／NO』 『あなたは削除データが復活できないことを確認しました。YES／NO』 『以下の入力欄にDELETEと入力して削除を実行』 ？？？「なんかデータ消えたんですけど？」 続きを読む

Slack の WYSIWYG を無効にしたい - Qiita

2019/11/22 70 users WYSIWYG Markdown Qiita Slack 悲鳴

Slack のテキスト入力欄に WYSIWYG エディタが実装され、Markdown のまま編集したい派は悲鳴を上げている人が多数。 苦情もたくさん来ているみたいなので、そのうち無効にできるようなオプションが付きそうですが。 Aa ボタンがあるじゃん。ちがう、そうじゃない ※ 入力欄よこにある Aa というボタンを押すと、スタイル... 続きを読む

日本語のフリーフォントをまとめて試せる神サイト「ためしがき」爆誕　フォント遊びが捗りそう - ねとらぼ

2018/07/04 90 users フリーフォント nabettu なべ とらぼ 作者

さまざまな商用利用可能の日本語フリーフォントをまとめて試せるサイト「ためしがき」が7月4日にオープンしました。作者はナベ（@nabettu）さん。あなたが神か……！ 日本語のフリーフォントを試せる「ためしがき」オープン 使い方は非常に簡単。トップ画面にある入力欄に好きな言葉や文章を入力すると、フリーフォントで... 続きを読む

Twitterの新UIで使用されているような、丸みがあって可愛いシンプルタイプのアイコンセット 10＋ | NxWorld

2017/07/04 51 users アイコンセット Twitter NxWorld 丸み ご存じ

ご存じの方も多いように少し前にTwitterのデザインがリニューアルされ、大きな特徴のひとつとして入力欄・ボタン・アイコンなど全体的に丸みを帯びた印象のデザインになりました。全く同じものでなければTwitterのアイコンに比べると丸みが少なめなものもありますが、同じようなアイコンを使いたいときに利用させてもらえそうな、丸みがあって可愛いシンプルタイプのアイコンセットを集めてみました。 ※以下で紹介... 続きを読む

国勢調査「名前入力できない」続出 （web R25） - Yahoo!ニュース

2015/09/17 149 users 国勢調査 続出 困惑 Yahoo ツイッター

5年に一度実施される国勢調査がスタート。今年は、初めて全世帯を対象にインターネット回答を実施しており、ネットでの回答期間は9月10日から20日までとなっている。ツイッター上には、実際にネットで回答したという人からの報告が続々とあがっているところだが、困惑する声も散見される。 その困惑のひとつは、「名前の入力欄」に関するものだ。ツイッターには、 「国勢調査をインターネット対応しました。名前入力欄でい... 続きを読む

分かりやすいWeb入力フォームのための十戒 | デザイン | POSTD

2015/06/24 587 users POSTD ユーザフレンドリー ユーザネーム 十戒 デザイン

Web入力フォームを、読みやすく、入力しやすく、ユーザフレンドリーにデザインするために注意すべきことはなんでしょう？本記事は、その問いの答えとなる十戒(+1)について、実際の適用のグラフィカルな例を示しつつ詳しく紹介していきます。1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネーム... 続きを読む

[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック | コリス

2014/07/22 94 users コリス some active CSS フォーカス

ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 実際の動作は下記ページで楽しめます。 上記以外にもたくさんのアニメーションがあります。 Some :active ... 続きを読む

WordPressにYoutubeの動画URLをペラッと貼り付けただけで自動再生などのパラメーターをお好みで付ける方法 | 今村だけがよくわかるブログ

2014/07/13 53 users YouTube パラメーター 今村 松たか子 女王

WordPressの埋め込み機能を使うと、例えばYoutubeの動画URLを貼り付けるだけで自動で投稿や固定ページ内に埋め込むことができます。 具体的にやってみよう 試しに、ディズニー公式YouTubeチャンネルで公開されている「一緒に歌おう♪『アナと雪の女王』「Let It Go＜歌詞付Ver.＞」 松たか子」を埋め込みます。下のURLを、WordPressの投稿や固定ページの入力欄に貼り付ける... 続きを読む

入力フォームのプレースホルダを使ってはいけない – U-Site

2014/06/16 678 users プレースホルダ 要旨 U-Site 原文 著者

入力フォームのプレースホルダを使ってはいけない 公開：2014年6月17日付（日本語版）、2014年5月11日付（原文）　著者：Katie Sherwin 原文（英語）：Placeholders in Form Fields Are Harmful 要旨 入力フォームのプレースホルダテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また... 続きを読む

【WordPress】プラグインなしでカスタムフィールド設置！All in One SEOも不要に - ゆめぴょんの知恵

2014/02/26 63 users 自力 カスタムフィールド ゆめぴょん 軽量化 知恵

ブログのWordPressテーマを自作した時に、カスタムフィールドも自力で設置しました。今まではプラグインを利用してましたが、個人ブログの簡単な入力欄のみなので軽量化・簡素化しました。その方法を紹介します。ブログのWordPressテーマを自作した時に、カスタムフィールドも自力で設置しました。今まではプラグインを利用してましたが、個人ブログの簡単な入力欄のみなので軽量化・簡素化しました。その方法を... 続きを読む

iOS 7のSpotlightに「.（ピリオド）」を入れるとインストール済みのアプリ一覧が見られる : ライフハッカー［日本版］

2013/11/07 65 users Spotlight ピリオド ライフハッカー iPhone

Apple , iPad , iPhone , ビジネスガジェット iOS 7のSpotlightに「.（ピリオド）」を入れるとインストール済みのアプリ一覧が見られる 2013.11.07 18:00 iOS 7からはホーム画面上部にお引越しした検索ツール「Spotlight」。ホーム画面を下にスワイプすると出てきます。Spotlightの入力欄が表示されたら「.（ピリオド）」を入れてみてください... 続きを読む

[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ | コリス

2013/10/16 70 users コリス Dribbble スクリプト gif アニメーション

先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。 まずは、dribbbleでのコンセプトから。 [GIF] Mobile Form Interaction フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移... 続きを読む

フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法 | コリス

2013/06/18 92 users セマンティック placeholder コリス スクリプト

フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベ... 続きを読む

テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio | コリス

2013/04/09 52 users RGB アクセシブル コリス 組み合わせ テキスト

テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応してい... 続きを読む

HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」 | memobits

2012/08/24 87 users memobits jQueryプラグイン テキスト フォーム

HTML5ではフォームの入力欄にあらかじめテキスト表示しておくplaceholder属性が使えますが、対応していないIEでも同様の動きを実現してくれる便利なjQueryプラグインを使ってみました。HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」 HTML5ではフォームの入力欄にあらかじめテキスト表示しておくplacehol... 続きを読む

[JS]ウェブページのUIエレメントにちょっとだけ便利な機能を加えるスクリプト -minjs | コリス

2012/05/14 110 users コリス ウェブページ UIエレメント モジュール スクリプト

minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄... 続きを読む

電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」:phpspot開発日誌

2011/10/24 66 users フォーマット jQueryプラグイン 特定 背景 プラグイン

EasyType Dev 電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」。 このプラグインを使うと予め指定したフォーマットで特定のインプットフィールドを初期化すると、指定の文字しか入れられないようにしつつ、背景に入力ヒントを表示させられます。 初期化を次のようにします $('#phone_number').easytype('(###) ###-####'); 入力... 続きを読む

IT戦記 - それすぐ実行！JavaScript！

2006/10/15 264 users IT戦記 実行 JavaScript Firebug 関数

javascript 思った JavaScript はすぐに実行してみましょう！ブラウザの URL 入力欄に javascript:(function() { /*実行したいコードを書く*/ })() FireBug を使ってる人は、コンソール開いて実行したいコードを書く。 たとえばこんなことができます。これらの例は僕が日頃使っているものです。 グローバルで使える関数を列挙する(Firefox O... 続きを読む