[B! html] lilpacyのブックマーク

https://x.com/clockmaker/status/2012796302342369773?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw

lilpacy 2026/01/20

html
modern

リンク

人に優しいフォームを作ろう、特に日本人に

皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょうの一言に集約されます。多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

lilpacy 2024/10/06

html
form

リンク

鹿野壮 Takeshi Kano on X: "inputの値が不正なときのスタイル設定✏️ input:invalidは論外、input:user-invalidでも足りない。私はinput:user-invalid:not(:focus)派だ。 ■ input:invalid 😡 ページを開いた瞬間からエラー表示になる ■ input:user-invalid 🤔… https://t.co/UOy5tKgNKY"

lilpacy 2024/06/17

html
css

リンク

HTMLの標準機能で作るフォームバリデーション - ICS MEDIA

すべてのフォームが要件を満たしている場合のみ、送信できます。フォームバリデーションのデザイン上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。エラー時のスタイルエラーメッセージの出し方バリデーションエラーの表示タイミング以下では、それぞれについて深堀りします。エラー時のスタイルエラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。しかし、この疑似クラスには欠点があります。required属性を

lilpacy 2024/04/20

リンク

きりしま on Twitter: "html/cssの練習用のコード！PC/SPのデザインファイル・figmaもreadmeも完備製作者がエンジニアとして成長する過程で必要だったものをまとめているらしい。経験からくるものはすごく良いスクールと並行してやると… https://t.co/3n9kO4Edqc"

lilpacy 2021/05/15

リンク

catnose on Twitter: "「重要度ゼロ」に区分されてるtime、label、details/summary、audio、sour ce、preは使う機会が多いです。「重要度★★」に入れられてるsmallよりよっぽど使う。 https://t.co/OeFHXkIF4C"

lilpacy 2021/04/29

html

リンク

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説 | 模写修行メディア

セール中弊社で作った教材がセール中！ Web制作会社が教えるFigmaからのコーディング50本ノックWeb制作会社が教えるCSS設計入門 - 基礎から実践まで【超実践】FigmaからのHPコーディング - Web制作会社が教える静的サイト制作※ 上記リンクからご購入いただければ、最安値(1,300円)で購入できます。サイトを制作する際、画像の最適化は複雑でベストプラクティスがわからなかったり、疎かにしている人は多いのではないでしょうか？レスポンシブイメージ decoding="async" loading='lazy' レイアウトシフト WebPやAVIF等の次世代画像フォーマット画像周りでは知っておかないといけないことが多くあります。この記事では、その中でも特にややこしい、srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説します。 👇 メンター