Intro 前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視 (display: none) な要素となっている。open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() 基本的に <dialog> は動的に表示されるため、JS で開くことになるだろう。しかし、open 属性を動的に付けるのではなく、show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEventLis
問題 <img src=""> をブラウザで表示した時、どうなるか知っていますか？わざわざimg要素のsrc属性を空文字列にする機会がないので意外と知らないかもしれません。 もちろん画像は表示されず、(指定していれば)altが表示されます。 img要素のsrc属性を空文字列にすると、リンク切れになることがわかりました！いかがでしたか？(？) そのときHTMLImageElementは JavaScriptでsrcが空文字列のimg要素のDOMインスタンスを確認してみましょう。例として https://zenn.dev/stin を開き、Chrome開発者ツールを使ってsrc属性に空文字列を指定したimg要素を埋め込んでおきます。 そして次のJavaScriptを実行します。 const element = document.querySelector('img[src=""]'); con
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに フロントエンド開発を進める際に、Next.jsでのSVGでの扱い方について考える機会があったので、Zennで共有しようと思った次第です。 本来、Webサイト内でSVGファイルを表示させる方法は、大きく分けて以下3点だと思われます。 imgタグのsrcにSVGファイルへのパスを設定して読み込ませる。 CSSファイル内のbackground-imageにパスを設定して読み込ませる。 HTML内でSVGをインラインコードで埋め込む。 ※ 細かく話すとSVG以外の拡張子の画像でもインライン化できたり、CSSでもSVGをインラインで読み込ますことが可能ですが、今回は割愛させてください🙏 1と2の方法だと、他の画像ファイル同様、簡単に読み込ませることができますが、SVG内のスタイルをHTMLもしくはCSSで変更できません・・・ 3の方法だと、HTMLやCSS、JavaScriptによるスタ
Webページの画像やスタイルシートなどをまとめて1つのHTMLファイルとして保存してくれる機能拡張「SingleFile」のSafari版がリリース。
ブラウザで開いているWebページを画像やスタイルシート、フォントなどを含めて1つのHTMLファイルとして保存してくれる機能拡張「SingleFile」のSafari版がリリースされています。詳細は以下から。 SingleFileシリーズはフランスのGildas Lormeauさんがオープンソースで開発しているブラウザ機能拡張で、現在ブラウザで開いているWebページを画像やスタイルシート、フレーム、フォントなどをまとめて1つのHTMLファイルとして保存してくれる機能がありますが、この機能拡張のSafari版「SingleFile for Safari」がMac App Storeでリリースされています。 SingleFile is a Safari extension that helps you to save an entire webpage including images, sty
よしこ@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/
Forking Chrome to turn HTML into SVG November 11, 2022 I've been working on a program called html2svg, it converts web pages to SVG. It's based on a fork of Chromium to support modern web standards. This post explains most patches. Take a picture SkiaBlinkPDF<div style="width: 50px; height: 50px; background: red" />canvas->drawRect(0, 0, 50, 50, SkPaint { .fill = SkColor::Red })(GPU)GaneshRaster(C
[レベル: 中級] この記事では、Google によるタイトルリンクの書き換えを防ぐのに役立つ 10 個の施策を紹介します。 先日、Cyrus Shepard（サイラス・シェパード）氏が調査した title タグ書き換えの分析と対策について Web担当者Forum の連載コラムで取り上げました。 その続編になります。 1. title タグの長さを適切に title タグを適切な長さに調整します。 具体的には、（半角で）51 〜 60 文字程度が好ましいとのことです。 検索結果の幅（現在は約 650 ピクセル）にちょうど収まる長さです。 長すぎるのはもちろん、短すぎても書き換えが発生しやすくなります。 極端に長いもしくは短い title タグは実に 95% が書き換えられていました。 2. h1 タグと一致させる title タグと h1 タグの記述を一致させます。 アップデート後のタイト
GitHub - mackee/go-readability: Extract readable content from web pages - Mozilla’s and Mizchi Readability ported to Go
package main import ( "fmt" "log" "net/http" "github.com/mackee/go-readability" ) func main() { // Fetch a web page resp, err := http.Get("https://example.com/article") if err != nil { log.Fatal(err) } defer resp.Body.Close() // Read the response body body, err := io.ReadAll(resp.Body) if err != nil { log.Fatal(err) } // Parse and extract the main content options := readability.DefaultOptions() ar
Unicorn Platform AI-powered drag and drop website builder for startups, mobile apps and SaaS Shadcn Space Free & pro Shadcn UI blocks, components, and templates for websites and admin dashboards
本記事は虎の穴ラボ Advent Calendar 2022 - Qiita 8日目の記事です。 前日はrhさんの「国産ヘッドレスCMS「Newt」を使ってみた」でした。 こんにちは。最近引っ越しを考えている虎の穴ラボの大場です。 先日、とらのあな通販開発チームの開発環境にHTML用のLinterとして HTML-ESLintを試験導入しました。 当記事では、その導入理由やツールの選定に際して考慮したことについて紹介いたします。 導入理由 ECチームでは以下の3つの状況と課題を踏まえてLinterの導入を行いました。 HTMLのLinterが未導入だった フロントエンド実装のレビュー負担増加 レビュー指摘にばらつきがある 1.HTMLのLinterが未導入だった とらのあな通販開発チームではJavaに対してSpotbugs、JavaScriptに対してESLint、CSSに対してstyle
Today we are excited to announce the latest in our series of courses on web.dev. Learn HTML is a brand new course written by Estelle Weyl that will take you through all you need to know about HTML today. We're landing the first five modules today, the rest will follow in staged launches over the next couple of months. You can work through these modules beginning to end, or dip into those that inte
Intro HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初にあ
[レベル: 中級] モバイル検索結果にサイト名を表示する機能を Google は正式に導入しました。 関連する技術ドキュメントも検索セントラルサイトに公開しています。 こちらのキャプチャのように URL の上にサイト名が表示されます。 この記事では、モバイル検索のサイト名表示に関して、僕が個人的に特に重要だと感じた内容を解説します。 日英ほか 4 か国語で導入 モバイル検索の結果で URL の上にサイト名を Google が表示し始めていることを 9 月初めにこのブログで紹介しました。 このときはテスト機能なのか正式機能なのかがはっきりしなかったのですが、今は正式な機能として導入されています。 次の 4 言語のモバイル検索でサイト名が現状では表示されます。 日本語 英語 フランス語 ドイツ語 グローバルではなく言語を限定して公開した機能に、日本語が含まれているのは嬉しいですね。 サイト名を
MDN Curriculum
The MDN Curriculum provides a structured summary of the essential skills and practices for being a successful front-end developer. The Learn web development Core modules are based on this structure, as well as partner courses such as the Scrimba Frontend developer career path Last updated: October 2025 Beginner's level Self-paced Free Defines the essential skills and knowledge every front-end deve
hoverを指定するならany-hoverメディア特性を使いなさい！俺流hover実装例も紹介します – TAKLOG
hoverメディア特性には@media (hover: hover)と@media (any-hover: hover)の2種類があります。 @media (hover: hover): 主な入力デバイスがhoverに対応している場合に適用する@media (any-hover: hover): 入力デバイスのいずれかにhoverに対応している入力デバイスが含まれる場合に適用する少し前までは@media (hover: hover) and (pointer: fine)で「主な入力デバイスがhoverに対応していて、かつマウスのような正確なポインターがあるデバイスの場合」にのみhoverを適用するやり方を行っていましたが、この方法ではiPadのMagic Keyboardのカーソル操作でhoverが適用されないようです。 そのため、Magic Keyboardが接続されている時のみhov
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
ウェブ開発者を対象にHTMLの使用状況について調査するアンケートプロジェクト「State of HTML」が開始しました。このプロジェクトはGoogleとニジボックスによる協賛を得ており、ブラウザ開発におけるロードマップの優先順位にも影響を与えるとのことです。 State of HTML https://stateofhtml.com/ja-JP/ State of HTML 2023 now open! • Lea Verou https://lea.verou.me/blog/2023/state-of-html-2023/ ウェブ開発において、HTMLはJavaScriptやCSSと並んでよく使われる言語であり、さらにさまざまなウェブサービスやウェブページの基盤として機能しています。World Wide Webの国際標準化団体・World Wide Web Consortium(W3
アクセシビリティ観点で必須の<label>要素について、 その重要性 なぜ重要なのか。メリット・デメリット placeholderじゃダメなのか などについてまとめます。 labelの重要性 アクセシビリティ観点でlabelはどのくらい重要なのでしょうか？ 適合レベル A 適合レベルとは、アクセシビリティ上の重要度を示す指標のことです。 WCAG 2.1の適合レベルは、レベルA、レベルAA、レベルAAAの3つに分かれています。 その中でレベルAとは、 最低限のレベルであり、達成できていないと、スクリーンリーダーや拡大鏡などの支援技術を用いてもサービスを利用できないことを意味します。 なぜそんなに重要？ label要素があることのメリット 1. 選択が容易になる ラジオボタンやチェックボックスなどの小さな選択欄の場所を正確にクリック/タップできなくても、隣接するラベルをクリック/タップするこ
今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2025年、Web制作者がチェックしておきたいCSSの新機能: カスタマイズ可能な新しいコンポーネント編を紹介します。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに コンポーネント: JavaScriptなしで<dialog>のモーダルで表示する方法 コンポーネント: dialog要素のclosedby属性 コンポーネント: popover=hint コンポーネント: select
GitHub - wilsonzlin/minify-html: Extremely fast and smart HTML + JS + CSS minifier, available for Rust, Deno, Java, Node.js, Python, Ruby, and WASM
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Redash (https://redash.io/) でデータをクエリしたとき、長い値が入ったカラムがあると、クエリ結果が縦に長くなってしまいがち (画像では 3行しかないけど、 100行とかあると見づらいことも多い)。 長い値があるクエリ結果 / 縦に長くなりがちで見づらいこともある Redash では、なんとクエリ結果に HTML が書かれているとレンダされるので、 details タグで囲うことで畳むことができる。便利。*1 長い値をdetailsタグで畳むことができる / クリックしたら全部見れる リンクを張ることもできる。管理画面の URL などで、クエリ結果の id をクエリパラメータに入れたり、名前や時刻をリンクテキストにしたりすると便利。おもてなしとして target="_blank" をつければ、新しいタブで開くことができる。 リンクを張ることができる / target
Web Platform Dive into the web platform, at your pace.
この記事は「Happy Elements Advent Calendar 2023」および「AWS for Games Advent Calendar 2023」12月15日の記事です。 はじめに Happy Elements 株式会社でインフラグループのグループリーダーを務めております、長谷川です。 普段は全社横断で AWS, GCP, Azure といったクラウドでのサービス設計・構築・運用を担当するグループのリーダーを担当しています。 Happy Elements カカリアスタジオでは、少人数かつ限られた期間内でゲームを企画から開発まで行うチャレンジプロジェクト「SuperLite アプリ」という取り組みを始めました。 Super Lite アプリでは、新しいチャレンジを希望するメンバーでチームを結成し、およそ1ヶ月程度の作業時間を使って1つのゲームを作り上げます。 限られた作業時間
HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css
プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログ、プロトタイプなどをさくっと作成したい時に便利で、リセットCSSに利用してもよさそうです。 dev.css dev.css -tangled dev.cssの特徴 dev.cssのデモ dev.cssの使い方 dev.cssの特徴 dev.cssはnew.cssにインスパイアされた、シンプルでclassレスの超軽量CSSフレームワークです。あらゆるプレーンなHTMLファイルをモダンでレスポンシブ対応のデザインにするために設計されました。 CSSファイルのミニファイされた容量は4.8Kbで、オプションのサイドバーやヘッダ固定やページトップに戻るなども用意されています。 dev.css 超軽量4.8KbのCSSフレームワーク。 用
<!doctype html> <meta charset="utf-8"> <script async type="module"> import {transpile, ScriptTarget} from "https://esm.sh/typescript@5.6.3?target=esnext"; import {minify} from "https://esm.sh/terser@5.36.0?target=esnext"; // esnext-polyfill Uint8Array.prototype.toBase64 ??= function() { return btoa(Array.from(this, (v) => String.fromCharCode(v)).join("")); } for(const {type, textContent} of docume
58 bytes of css to look great nearly everywhere
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CSS Gridのしっかりとした知識とレイアウトやUIコンポーネントを実装するテクニックを学びたい人にお勧めの解説書 -作って学ぶ HTML+CSSグリッドレイアウト
※本ページは、アフィリエイト広告を利用しています。 CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。 Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。 本書は、先週発売されたばかり！ Web制作に携わる人すべてにお勧めの解説書。HTMLとCSSに携わるコーダーの人はもちろん、こういうレイアウトやコンポーネントができるというのがよく分かるのでデザイナーやディレクターの人にもお勧めです。
Agentation
How you use itClick the icon in the bottom-right corner to activateHover over elements to see their names highlightedClick any element to add an annotationWrite your feedback and click AddClick to copy formatted markdownPaste into your agentNote: With MCP, you can skip the copy-paste step entirely — your agent already sees what you're pointing at. Just say “address my feedback” or “fix annotation
The Static Site Guide
This is a book about creating and publishing static websites using HTML, CSS, and the Hugo static site generator. It’s still a work in progress, but you can read the draft chapters here. Table of ContentsA Note From the AuthorIntroductionMaking Your First Web Page (Part 1: Getting Started)Publishing Your Web PageBuilding a Basic Static WebsiteStyling Elements With CSSCreating a Static Website Usin
behavior token は、フォーカスナビゲーションの動作と ARIA ロールを結び付けます。たとえば <div focusgroup="tablist"> のように、明示的なロールもネイティブのセマンティクスも持たない汎用的な要素へ tablist token を指定すると、ブラウザはコンテナを tablist、子の <button> を tab としてアクセシビリティツリーに公開します。同時に、tablist のデフォルトである inline wrap が適用され、インライン軸の矢印キーでフォーカスが循環します。 focusgroup は、要素がすでに持つネイティブのセマンティクスや明示的な role を上書きしません。たとえば <ul focusgroup="menubar"> は自動的に menubar へ変わらず、リストのセマンティクスを保ちます。リストをアプリケーションの
Twenty self-contained .html files an agent produced instead of a wall of markdown. Each one trades a document you'd skim for one you'd actually read — open any of them directly in a browser. Grouped by the kind of work they replace.
デザイナーの沢登です。 以前、コンテンツに関するアクセシビリティ勉強会をPRチーム森本さんに開催してもらいましたが、今回もアクセシビリティアドバイザーのfreee 伊原さんに協力いただきエンジニア向けの勉強会を開催しました。当日参加されたみなさん、伊原さん、ありがとうございました！ この記事では、目的や結果をオープン社内報でお届けします。 ❓ オープン社内報とは 一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。 当日の勉強会資料 勉強会資料を確認 なぜやったのかアクセシビリティチームには、エンジニア・CS・ディレクターなど様々な職種・メンバーがサイドプロジェクトとして関わっています。しかし、ウェブエンジニアのアサインは深谷さん1人となっており、ウェブ版noteを1人でアクセシビリティ向上を行っていくことに限
準備｜クリエイティブコーディングの教科書
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? (2022/4/12) 英語版を書きました。よろしければ拡散お願いいたします。 説明する必要も無いと思うが、阿部寛さんと言えば日本を代表する名優の一人であり、数々の作品でその巨躯以上の存在感を見せつける、映像業界にはなくてはならない存在だ。実写に疎い私ですら、「TRICK」のポンコツだがプライドは一人前な上田教授、「テルマエ・ロマエ」の『未来』の日本に驚嘆し、その工夫を当時の技術で貪欲に取り込むローマ人温泉技師ルシウス、「下町ロケット」の熱血でより良い製品の開発に力を注ぎ、町工場の高みを目指す佃社長と、その名演はふと思い出せるくらい、語
All modules in the Learn HTML course are now available. This course was written by Estelle Weyl and takes you through an in-depth journey to really understand HTML. You can read them in whatever order you'd like. The final modules, launched today, are: Forms Images Audio and video Template, slot, and shadow HTML APIs Focus Other inline text elements Details and summary Dialog I've been writing HTM
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today. A Progressive Web App (PWA) is a website that can be installed on your device and provide an app-like experience read more How to use this app This app is itself a PWA so you can install it on your device and then check the demos below to see what is supported on your device. When the button below becomes enabled, you can install this
Vue.js+textlint+機械学習でRPGツクールMZ用文章校正プラグインを開発して得られた知見
成果物 これを作るときにいろいろ問題にぶつかったので得られた知見をまとめます。 開発期間は3か月です。 目標 RPGツクールMZで動作する実用レベルの文章校正プラグイン 実現できた機能 それなりに誤りを検出できる ゲーム内のどのデータを校正するか選べる 校正の進捗がわかる 校正中はいつでも実行を停止できる プラグインだけで簡易的にチェックするかサーバーを使って精密にチェックするか選べる 配布するファイルは1ファイルだけで他のプラグインと同じように使用できる 画面 構成図 主な使用技術と選定理由 Vue.js 慣れている。使いやすいようにいくらかリッチなUIにしたかったため。 textlint ルールベースの文章校正ができるOSS。必須。 T5 sonoisa/t5-base-japanese ルールベースのアルゴリズムでは検出に限界があり、漢字の誤字や送り仮名の誤りなどのカバーが困難なので
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dialog と Popover #3 | blog.jxck.io
空世界 〜HTMLの永遠仕様探訪記、或いは、文字なきsrcにまつわる寥々たる考察について〜
ウェブの最新情報 | Blog | web.dev
HTML 仕様のメールアドレス正規表現に最小限の修正を加える - Qiita
Next.jsにおけるSVGファイルの表示方法を考える
DevFest 2021 Web Session_UIT編
Forking Chrome to turn HTML into SVG - Fathy Boundjadj
Googleのtitleタグ書き換えを防ぐ方法×10
https://helios.hashicorp.design/
Free HTML CSS Templates & Themes on HTMLrev
HTML-ESLintを試験導入しました - 虎の穴ラボ技術ブログ
Introducing Learn HTML | Blog | web.dev
Dialog と Popover #1 | blog.jxck.io
モバイル検索結果にサイト名を表示する機能をGoogleが正式導入、構造化データでサイト名を指定可能
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版 | PhotoshopVIP
ウェブ開発の未来を左右するかもしれない大規模アンケート「State of HTML 2023」がスタート
アクセシビリティ第一歩、labelが超重要な話。~ placeholderじゃダメなの？~
2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: カスタマイズ可能な新しいコンポーネント編
Redashではクエリ結果にHTMLを使えるので便利 長いカラムをdetailsで畳める ほか - hogashi.*
Learn Accessibility | web.dev
Unity 製 WebGL ゲームを AWS でお手軽公開
HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？ - Qiita
矢印キーによるフォーカス移動を宣言的に実装する `focusgroup` 属性
The unreasonable effectiveness of HTML — examples
noteの虚空ボタンを顕現させる社内勉強会を開催しました｜sawa / ston
「阿部寛のホームページ」はHTML界のシーラカンスである - Qiita
All of Learn HTML! is available | Blog | web.dev
togetter.com
www.pekepekepeke.com
marin0.lo.gob.jp
www.nicovideo.jp
diamond.jp
gaba-fortnite.hatenablog.com