「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プロジェクト」代表。 主

ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目 <input> は適切に type 属性を使いましょうとは言いますが、メールアドレスの type="email" は入力内容の検証が古いのでやめた方がよくないですか……。 デモ： https://codepen.io/ginpei/pen/dPbWQKB @ だけ見るのが良いのでは 先に結論なんですけど、もう基本は試しにメールを送って届いたら OK くらいのつもりが良いんじゃないのと思います。とはいえ入力内容は @ の有無くらいは見ておくと、爆速コピペでつい他の項目を入力してしまった際に気付けるかもしれません。 というわけでこれでどうですか。 メールアドレスの検証 メールアドレスの書式って実はだいぶ心が広くて、意外な文字や記号が利用可能だったりします。@ の右側もドットなしの localhost とか IP ア

Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは2024-12-16 Open UI Community Groupで、仕様の策定が検討されているProposalの一つに、Link Area Delegationがあります。 本エントリでは、Link Area Delegationの仕様がどのような背景から検討され、何が可能となり、これから私たちがどのように利用していけるのかを紹介します。 Link Area Delegationとは Link Area Delegation（= リンク領域の委譲）Proposal は、コンテナがインタラクティブな領域を特定の要素に委譲することで、コンテナを「クリッカブル」にする機能を標準的に導入しようとする試みです。 例えば、提案されている手法のひとつである、linkar

フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCFから Cloud Native Computing Foundation（CNCF）は、Webアプリのフロントエンドにおいて、任意の機能のオンオフを管理するフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」をリリースした。 ソフトウェアの機能追加や変更を行う際に、いきなり全ユーザーに新機能や変更を展開するのではなく、展開する範囲や時期をコントロールするための仕組みとして「フィーチャーフラグ」がしばしば用いられます。 例えば、最初は少数のユーザーにのみフィーチャーフラグをオンにすることで試験的に新機能を試し、問題がなければ全ユーザーに拡大する、といった場合などに用いられます。 クラウドネイティブの普及や推進のための団体「Cloud Nativ

Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始 Web開発者の開発体験を改善することなどを目的としたW3CのWebDX Community Groupは、つねに新たな機能などが登場し変化し続けるWeb標準のうち、Web開発者が安心して使える機能群を示す新たなステータス「Baseline」を発表しました（Googleによる発表、MDNによる発表）。 現在、Web標準はリビングスタンダードとしてつねにアップデートが行われており、ChromeやFirefox、Safariなどの主要なWebブラウザは、Web標準で新たに策定される機能をそれぞれ実装し、最新版に反映させています。 そのため、それぞれのWebブラウザがWeb標準のどの機能をいつ頃実装し、最新版に反映させるのかは時期が異なりま

鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。 各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/

CSS 条件付き規則 （CSS Conditional Rules） Level 5 仕様 （草案） に追加された @when と @else 規則について つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに加わった @when、および @else 条件付き規則について面白そうだったので簡単に紹介。 つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに @when、および @else 条件付き規則が加わりました。 CSS Conditional Rules Module Level 5 - W3C First Public Working Draft, 21 December 2021 CSS

知名度が低いウェブ標準ひとり Advent Calendar 2021 – 14 日目 今日は <input> とかで使える属性 enterkeyhint です。ソフトウェアキーボードを指示できる属性 inputmode とはまた別で、エンターキーのみを対象とします。 enterkeyhint – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/wvrggWQ 基本的な使い方 取り得る値。 enter done go next previous search send Android 日本語入力のエンターキー部分が紙飛行機の、メール送信アイコンになっている様子。 <input enterkeyhint="▒▒▒▒" /> の様子（右下エンターキー） pic.twitter.com/lXzMppC3

Intro 筆者は、 Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、 Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Pro

この記事はNikkei Advent Calendar 2020 19 日目の記事です。 日経電子版ウェブチームの伊藤です。 この記事では CSS Containment の紹介と電子版での利用例について書きます。 CSS Containment とは 概要 CSS Containment は DOM のレンダリングを開発者側で調整できるようにするパフォーマンス系のプロパティです。 web サイトが効率的にレンダリングされるようユーザーエージェントに伝えることができます。 次のような値を取ります。 contain: none | strict | content | [ size || layout || paint ] プリミティブな値として size, layout, paint があり、strict と content はこれらを複合した値のエイリアスで、それぞれ size layo

Long-requested but still underused, CSS custom properties for cascading variables offer revolutionary possibilities for collaboration and code reuse. Variables in CSS have been a highly requested feature of the World Wide Web Consortium’s CSS Working Group, which I joined in 2012, since the group’s humble beginnings in 1997. By the late 2000s, the developer community—in its quest to reduce duplica

はじめに この記事はJava Advent Calendar 2019の13日目の記事です。13日の金曜日です。不吉ですね。 不吉といえば、OS依存ってなんか不吉な感じがしませんか？ たとえばWindows環境で動作確認を行った時は問題なかったけど、Linux環境で動かしたらエラーになった…なんてことがあったりします。Write once, run anywhereなJavaですが、OSごとの違いを考慮しなくていいわけではありません。 そこでこの記事では、Javaの標準ライブラリでOS依存が隠れている例をいくつか紹介してみます。 この記事における「OS依存」 一口にOS依存といっても色々なことが考えられますが、この記事ではプログラムの実行結果がOSによって変わってしまう場合のことを「OS依存」と表現することにします。 内部的にOSネイティブなAPIを呼ぶメソッドはたくさんありそうですが、ど

W3Cの WebAssembly Working Groupは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の仕様が勧告に到達したことを発表しました。 今回勧告になったのは、WebAssemblyに関連する3つの仕様です。 1つ目はWebAssemblyのバイナリファイルを実行する仮想マシンの仕様を定義した「WebAssembly Core Specification」。これは一般的なマイクロプロセッサの動作を模倣するような作りにすることで、WebAssemblyのバイナリファイルでプロセッサのネイティブコードに近い実行速度を実現するようになっています。 2つ目の「WebAssembly Web API」は、さまざまなプラットフォームでWebAssemblyを利用可能にするため、WebAssemblyバイナリファイルのシリ

morishitaです。 いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。 シェアボタン 現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、 モバイルに於いてはWeb Share APIを使っても良い状況ではないか？　と思って調べてみました。 ちなみにCan I use... ではこんな感じです。 Can I use ... Web Share API スマホに限るとiOS SafariもAndroid Chromeもサポートしているようです。 モバイルでは使えそう?! コード とりあえず、試すためのページを用意をしないと、ということで Web Share APIを使ったシェアボタンだけのページを作りました。 コードは次の通りです。 <html lang="ja"> <head> <meta charset

この記事は、ブログ記事を色々した版です（提案文書読んでブログに書き終えてからドラフトに入ってることに気付いた）。 基本的に、以下の文献に基づきます。 N4800 - Working Draft, Standard for Programming Language C++ P0542R3: Support for contract based programming in C++ by G. Dos Reis, J. D. Garcia, J. Lakos, A. Meredith, N. Myers, B. Stroustrup この機能はC++23に延期になりました、ご注意ください Contract programming 或は Design by Contract (DbC) とは Wikipedia - 契約プログラミング D4Cではない。 三行で Contract Programm

const arr1 = [11, 22, 33]; const arr2 = [44, 55]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // => [ 11, 22, 33, 44, 55 ] const arr4 = [0, ...arr1, 0, ...arr2, 0]; console.log(arr4); // => [ 0, 11, 22, 33, 0, 44, 55, 0 ] 次の個所で利用可能です。 配列初期化子 [] オブジェクト初期化子 {} 関数呼び出し時の引数 () 分割代入 = 、関数の仮引数 () 配列初期化子 [] ... に続けて反復可能 (iterable) なオブジェクトを置きます。まあ普通は配列ですね。 ECMAScript® 2018 Language Specification 12

皆さんこんにちは。今回はJavaScriptの👻globalThis👻について解説しようと思います。globalThisはJavaScript (ECMAScript) の新機能です。現在TC39プロセスのStage 3にあり1、このまま何事もなければ近いうちにECMAScript2に正式採用されることになります。 この記事はJavaScript2 Advent Calendar 2018の5日目の記事です。 さて、皆さんはこのglobalThisを使ったことがあるでしょうか。私はありません。というか、現在のところglobalThisが利用可能なのは、つい今日安定版がリリースされたばかりのGoogle Chrome 71のみです。この記事にはglobalThisを使ったコード例が出てきますが、実際に動かしたい場合はちゃんとGoogle Chromeが最新版になっているか確認してください

結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc