この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
先日、HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになりました。この変更は6/25にリリースされたChrome 138やFirefox 140をはじめ、Edge, Safariも次のバージョンでサポートされる予定です。 この変更は主に、XSS脆弱性の防止に役立ちます。Web制作者に与える影響と潜在的な問題について紹介します。 HTML spec change: escaping < and > in attributes 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 変更点 変わらなかった点 何が壊れないのか 何が壊れるのか 終わりに はじめに 2025年5月20日にHTMLの仕様が変更され、属性内の<と>がエスケープされるようになりました。これによ
tl;dr foobarhogehoge.invalidは絶対にリクエストが飛ばないのでおすすめ あらすじ 書いていたコードは、とあるミドルウェア向けに内部利用するURLを環境変数で受け取るようになっていた。普段は実際の内部のURLが書かれているのだが、テスト時には以下のようにダミーを設定していた: FOOBAR_EXTERNAL_URL="https://example.com/foobardummy" テストではこのURLを利用しないのだが、内部で環境変数のバリデーションを行っている都合上、とりあえず適当なURLを指定しなければ起動してくれないから、こうなっていた。重ねて言うが、実際はこの環境変数を利用していないのでこれでいい。 しかしこれだと、うっかり内部の様子がおかしくなったりエンジニアが狂ってしまった場合に、example.comに本当にアクセスしてしまう。なおかつ、セキュリティ
公開日 : 2025年6月13日 (2025年6月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ EC サイトやクチコミなどで、商品やサービスに対するユーザー評価を、星の数で示すユーザーインターフェース (UI) があります。端的な日本語表現はなさそうですが、英語では「star rating」と言うようです。 白地の背景に黄色い星印という外観が一般的ですが、それだとコントラストが低すぎて (特にロービジョンや高齢者などにとって) 星が視認しにくい可能性があります。こうした問題をはじめ、星の数による評価 (star rating) の UI は、アクセシビリティがおざなりにされることが少なくないように (実際に EC サイトなどのアクセシビリティ診断をしていて) 感じます。 この記事では、星の数による評価 (star rating) をアクセシブルにする方法について、解
About this translation ボランティアによる本翻訳は原文（英語）の内容を正確に反映できていない可能性があります。 翻訳者 Hiroya UGA. 寄稿者 Naoki Nakamura. WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します その画像はテキストを含んでいますか？ Yes: かつ、そのテキストが実際のテキストとして近くに記載されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストが視覚効果のためだけに表示されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストがアイコンなど特定の機能を持つ場合 alt属性を、画像の機能を伝えるために利用します。詳細は機能を持つ画像 (英語版)を参照してください。 かつ、画像内のテキスト
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。 その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。 CSS Variablesとは CSS Variables（CSS変数）は、カスタムプロパティとも呼ばれ、CSSで変数を使用できる機能です。 CSS変数を使うと、ウェブサイト内で共通して使われるテーマカラーなどの値を使いまわしたり、動的にプロパティの値を変更することが可能です。さらに、CSSで用意されている色関数と組み合わせると、同じく動的に相対的な色の定義が行え、表現の幅を大きく広げることが可能です。 MisskeyのWebクライアントに
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主
Open UI はW3Cのコミュニティグループの一つ 以下の文章は上記サイトに書いてあることをまとめたもの 発足背景 WHATワーキンググループは、多数のWebサイトで見られる最も一般的なパターンをHTML自体で体系化する取り組みに着手した。 それにより、Web開発者がHTMLを使用するだけでリッチなフォームを実装できるようになった。 しかし、それらの最後の大幅な改定から15年以上経過し、現在のWebアプリケーションはより多くの複雑なインターフェースを提供するようになった。 したがって、HTMLをもう一度最新化し、今日のWebサイトのUIの最も一般的なパターンを作成するために必要な技術を標準化する時期が来ている。 目標 Web開発者が最新のカスタムなUIを作成するためには、どのようにHTML・CSS・JS・Web APIを組み合わせればいいかについて、構築計画を立てること 標準そのものを定
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは Table of Contents Table of Contents はじめに Link Area Delegationとは Link Area Delegation 提案の背景 - マークアップの制限 クリッカブルなコンテナを実現する既存の方法 既存方法とその問題 現状検討されている4つの実装方法 1. Link delegation attributes 2. <linkarea> Element 3. Use CSS pointer-area Property 4. Use Invokers おわりに Appendix はじめに Open UI Community Groupで、仕様の策定が検討されている Proposal の一つに、Link Are
ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目 フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。 でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！ デモ https://codepen.io/ginpei/pen/ByBjLYR <fieldset> <fieldset>: フィールドセット要素 – HTML: ハイパーテキストマークアップ言語 | MDN <fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。 disabled
Overview: コア学習モジュール 次のページ JavaScript フレームワークは、最新のフロントエンドウェブ開発に欠かせないものであり、開発者にスケーラブルでインタラクティブなウェブアプリケーションを構築するための試行錯誤されたツールを提供しています。現代の多くの企業では、フレームワークをツールの標準的な一部として使用しているため、多くのフロントエンド開発の仕事でフレームワークの経験が必要とされています。 フロントエンド開発者を目指していると、フレームワークを学ぶ際にどこから始めればいいのか悩むことがあります。フレームワークは常に新しいものが登場するため、多くの種類の中から選ぶことができます。これらはほとんど同じように動作しますが、いくつかの点において異なっています。そしてフレームワークを利用する上では、具体的に注意しなければならないこともあります。 この記事では、あなたがフレー
フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCFから Cloud Native Computing Foundation（CNCF）は、Webアプリのフロントエンドにおいて、任意の機能のオンオフを管理するフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」をリリースした。 ソフトウェアの機能追加や変更を行う際に、いきなり全ユーザーに新機能や変更を展開するのではなく、展開する範囲や時期をコントロールするための仕組みとして「フィーチャーフラグ」がしばしば用いられます。 例えば、最初は少数のユーザーにのみフィーチャーフラグをオンにすることで試験的に新機能を試し、問題がなければ全ユーザーに拡大する、といった場合などに用いられます。 クラウドネイティブの普及や推進のための団体「Cloud Nativ
公開日 : 2024年3月23日 カテゴリー : アクセシビリティ / ユーザビリティ フォームのパスワード入力欄 (<input type="password">) は基本的に、入力された文字列がマスキングされ、代わりに文字数の分だけ「黒い点」が提示されるようになっています。他人によるパスワードの盗み見を防ぐためですが、ユーザーは、大半のケースでは背後から覗く人が誰もいない状況でパスワードを入力するでしょうし、入力した文字列が視認できないと正しくタイプできているか不安になったり、タイプミスしたときの修正がしづらい (どの箇所でミスしたか確信が持てず、はじめから入力し直さざるを得なくなる) といった問題もあるでしょう。こうしたことを考慮に入れると、パスワードのマスキングはユーザーの任意で解除できる (入力した文字列を表示させる) ようにしたほうが、ユーザビリティの観点では望ましいと考えるこ
WebAssemblyでOpenJDKのJavaランタイムを実装、JarファイルをそのままWebブラウザで実行できる「CheerpJ 3.0」正式リリース Webブラウザ上で実行可能なWebAssembly製JavaVM 前バージョンのCheerpJは、Javaのバイトコードを事前コンパイルによりJavaScriptコードに変換することで、Webブラウザ上でJavaアプリケーションを実行可能にするコンパイラを中心とするツール群でした。 今回の新バージョン「CheerpJ 3.0」では、WebAssemblyによってOpenJDKのJavaランタイムを完全に実装したと説明されています。これにより、JITコンパイラなどを含むJavaVMの機能をWebブラウザ上で実行できるようになりました。 Javaアプリケーションのソースコードは不要で、ビルド済みのJarファイルをそのままWebブラウザで実行
CSS is going through a period of unprecedented progress. Between :has(), container queries, subgrid, and many more, new features are making their way to browsers seemingly every month. The consequence of all this growth is that things can get a bit overwhelming. Thankfully this year we had Chen Hui Jing to help design the survey and guide us through the CSS jungle. And speaking of the survey, did
1つのRailsアプリ内で複数ドメインのサービスを動かしたい時、皆さんはどうやって開発しますか？ 自分なら、ローカル環境で任意のドメインにアクセスできるように環境を作るところから始めます。 ホストPCのDNSの設定は変えたくないな〜と思いながら、Dockerだけでドメイン設定ができないだろうかと試行錯誤していました。 その時、大変な事を発見しました...!!!! Chromeだと、DNSの設定とかせずに localhost のサブドメインにアクセスできる！！ なんだって〜〜〜〜！！！ 衝撃すぎていままでDockerで頑張ってた設定は全部なかったことにしました。 どういうこと？ 普段皆さんは、ブラウザで localhost:3000 にアクセスして動作確認しますよね。 その localhost のサブドメインが使えるんですよ！！！ 例えば kanahebi.localhost:3000 とか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く