2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
実践 popover 属性 〜HTMLのみのモーダルで実案件に使えるのか確認〜
こんにちは森田です。 前回、HTMLのみでモーダルが作れる popover 属性の概要についての記事を書きました。 2024年はHTMLのみでモーダルが作れそう。popover属性を試してみる。 前回の記事内では軽い動作しかしていなかったので、今回は実際に案件でどこまで使うことができるか確認したいと思います。 popover 属性を試してみる ではさっそく popover 属性を色々試してみましょう。 まずは動作確認として超シンプルなモーダルを作ってみます。 動作確認用超シンプルなモーダル まずは前回の記事のおさらいで、動作確認用の超シンプルなモーダルです。 モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。 <button type="button" popovertarget="po
Code Guide
Golden rule Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what’s incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub. Every line of code should appear to be written by a single person, no matter the number of contributors. HTML Syntax Don’t capitalize tags, including the doctype. Use soft tabs with two spaces—they
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
DevFest 2021 Web Session_UIT編
よしこ@yoshiko_pg Google Developer Experts for Web 2022.03.25 UIT Meetup vol.15 Relearn Modern Web Standard 今までああ書いてたアレ、これからはこう書けそう About Speaker よしこ - @yoshiko_pg 株式会社ナレッジワーク フロントエンドエンジニア 2021年10月からWebのGDEになりました。 SPAでGUIツールを作るのが好きです。 About Session このセッションについて Webフロントエンド開発で頻出するパターンの中で、専用の仕様がなかったために 既存の仕様を使って工夫して実現していたようなものがありました。 日々新しく提案・実装されていくWebの仕様の中で、モダンブラウザでの実装も進んでおり、 利用したくなる機会も多そうなものについてbefore/
デザインシステムのa11y対応に役立つ新しいWeb Standard
デザインシステムのa11y対応に役立つ新しいWeb Standard Alan Dávalos ( https://twitter.com/AlanGDavalos ) アクセシビリティー（以下a11y）の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムなどの様々なプロジェクトで使う目的で作成するコンポーネントではa11yをより意識する必要があります。このセッションでは、そのa11yの対応を格段にやりやすくする新しいWeb Standardを紹介します。 2022年3月25日開催「UIT Meetup vol.15 『Relearn Modern Web Standard』」 https://uit.connpass.com/event/242359/
HTMLのdialog要素をスタイリングするときに気をつけること - Qiita
この記事の概要 dialog要素、ご存じですか？ その名の通りダイアログ的な振る舞いや役割をする要素です。 モーダルウィンドウと言えばより広く伝わるでしょうか。 簡単なダイアログならライブラリを使わなくても事足りるのですが、スタイルを当てる際に気をつけた方が良さそうなことがあったので記事にしてみました。 注意 Chrome（とEdge）はよっぽど大丈夫ですが、FirefoxとSafariはまだ本番投入してもブラウザが対応していません。 もう少しすれば使えるようになると思うので、今のうちに素振りをしておくのが良いかもと思います。 ポリフィルもあります。 デフォルトのスタイル 2022 年 3 月 4 日現在、ChromeとFirefoxではこのような感じです。 <dialog> <p> 秋も更けて、暁闇がすぐに黄昏となり、暮れてゆく年に憂愁をなげかけるころの、おだやかな、むしろ物さびしいある
今から使える、いつか使える日本語ウェブ文字組みの機能
今から使える、いつか使える 日本語ウェブ文字組みの機能 CSS Nite 『CodeGridから読み解くイマドキのCSS 第二弾』 2021-11-19（金） 自己紹介 名前 國仲（くになか）義則（よしのり） / Online: matori 所属 PixelGrid Inc. フロントエンド・エンジニア Twitter @ub_pnr ウェブサイト Unformed Building 日本語のウェブサイト 日本語でもウェブサイトは問題なく作れるし見られる 書籍などで使われる文字組みの機能はかなり制限されていた 少しずつではあるが、できることは増えてきている それらの機能をいくつか紹介 今すぐ使える機能 ルビ 基本的なHTML 必要な要素は3つ ruby, rt, rp 春（はる） 以前までのHTML 春（はる） rb要素は削除され、非標準となった ルビの3要素 ruby ルビ全体を囲む要
GitHubのポップアップメニューはdetailsタグと:beforeが使われててクレバーだった - Qiita
概要 普段使ってるGitHubのUIパーツの実装を見てみたら真似したいエッセンスがあったので紹介します。 GitHub上でちょいちょい使われてるポップアップメニュー 図 マイページのコンテキスト切り替えメニュー 図 プルリクエストページのプロジェクト選択メニュー なにが優れてる？ Javascript使ってない メニュー外をクリックしたらメニューが閉じる サンプルコード <div class="wrap"> <details> <summary>button</summary> <div>menu</div> </details> </div> *, *:before, *:after { box-sizing: border-box; } .wrap { width: 500px; height: 500px; margin: 0 auto; padding: 50px 50px; }
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
疑似要素が適用できない HTML タグについて ｜https://wp.yat-net.com/name
before, after といった疑似要素は単一の HTML タグに装飾を加える場合非常に便利。 ところが全てのタグに対して疑似要素が使えるわけではないので、例えば img タグに疑似要素を使おうとすると途端に思った描画がされず、驚いた人も少なくないかと。 本記事ではこれについてまとめておきます。 疑似要素が効かない HTML タグ まず HMTL5 のタグで疑似要素が効かないものは以下の通り brwbrcanvasembedobjectaudioiframeimgvideoinputtextareaselectlegendbuttondetailsfieldset 2021年8月17日加筆：button タグのコードに閉じタグが無かったため CodePen で正しい表記が出来ていませんでした。legend, button, details, fieldset には疑似要素が有効です。
iOS で input の focus 時にズームインしてしまうのを viewport で解決する
2024/04/17 追記 この記事の結論としては maximum-scale=1.0 にすることとなっていますが、これはアクセシビリティ違反となる対応方法です。 自戒の意を込めまして記事自体はそのまま残しておきますが、もしこの対応をされた方は再度対応を見直していただき、もしこの対応を継続する場合はアクセシビリティ違反であることを念頭に置いていただければ幸いです。 参考: https://developer.mozilla.org/ja/docs/Web/HTML/Viewport_meta_tag#maximum-scale こんにちは。ひらやま（@rhirayamaaan）です。 Web を作っているときに input タグや textarea タグで入力領域を作ることがあるかと思います。 実装をし、いざ確認をしてみると、iOS のときに入力しようとした際に少しばかりズームインしてしま
meta要素のname=color-schemeについて
ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それだけでは、例えばテキストエリアで出てくるスクロールバーが明るいままなので、かなり浮いてしまう。meta要素でname=color-schemeを適切に設定すると、そういったスクロールバーの色も含めたあらゆるものの色を暗く(明るく)できる。 書き方は特に難しくない。ダーク・モードへ適応しようと、prefers-color-schemeメディア・クエリーを使って、明るい背景と暗い背景を切り替えるなら、以下のようにHTMLファイルのhead要素以下に書けばいい。viewportと似たようなものだ。 <meta name="color-scheme" content="light dark"> lightとdarkの順序は、逆でも意味は変わらない。これだけでユーザーのOSやブラウザーでのダーク・モー
Google HTML/CSS Style Guide
Background This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained. General General Style Rules Protocol Use HTTPS for embe
Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
IE亡き後のマークアップを調べてみる｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の4日目の記事です。 この記事を執筆するのは、食べログでフロントエンドチームに所属する佐伯です。 皆さんマークアップはお好きでしょうか。僕は好きです。 HTML、CSSでWebサイトが作れるのはもちろんのこと、CSSやSVGを駆使すれば、JavaScriptが必要になりそうであろう複雑なUIなども簡潔に作成出来るからです。 JavaScriptはBabelなどのおかげでIE11も比較的対応しやすいですが、マークアップはそうはいきません。Polyfillが対応していないことや、対応していたとしてもReactなどのフレームワークとの共存出来るかなど問題点があるため、IE11に合わせるしかありませんでした。 しかしながら、IE11の情勢も変わってきました。 2020年3月よりIEでYoutubeを閲覧するとアラートが表示されるようになっています。 ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年に起きたフロントエンドの変化
英字の大文字・小文字・小文字＋CSS uppercaseの読み上げ確認
https://codepen.io/me_tks_/pen/bGKVmQo