記事を読むうえでの注意点 一部おかしな記述があるかもしれません。 そのためもし間違いなどがありましたらご指摘いただけると幸いです。 FAQなんかのUIでよく使われる、クリックしたら関連するコンテンツがニュッと表示されるアレ。 みなさんは普段どのように実装されていますか？ アコーディオンUIを実装するにあたって、マークアップに最適なタグとしてdetailsとsummaryがあると知りまして、このタグを使って実装してみたいと思います。 実装してみた まずは結論から。 実際に今回実装していくアコーディオンUIのソースコードはこちらです。 details・summaryタグは何が良いの？ details summaryタグを使用しない実装では、アクセシビリティな実装をする場合、考慮する事項が多く、網羅しようと思うと工数がかかります。 ですが、details summary要素を使用することでアクセ
【Blender & Three.js】3DモデルをThree.jsでWEBブラウザ表示する方法｜WEB CREATES
Blenderで作成した3Dモデルを、Three.jsでWEBブラウザに表示する方法をご紹介。 blenderで作ったモデルをthree.jsでブラウザに表示してみました!https://t.co/YCZO2y4Aec pic.twitter.com/YVpIT702YL — くまミックス@blender (@artKumamix) December 6, 2021 Blenderで作成した3Dモデルを、Three.jsでWEBブラウザに表示する方法 下記のような手順となります。 Blenderで3Dモデルを用意する 3DモデルをglTFファイルとしてエクスポートする Three.jsをダウンロード ファイルを作成 ①Blenderで3Dモデルを用意する まずは、Blenderで表示したい3Dモデルを作成してください。 モデルが作成後、下記のことに注意してください。 （WEBブラウザで表示
リンクとボタンをちゃんと区別する
株式会社COUNTERWORKSでフロントエンドエンジニアとして働いている@2_a8udです。 最近UXとアクセシビリティを学ぶ中で、ボタンのように見えるリンク(以下リンクボタン)はよくないみたいな話を耳にするのですが、実際に何でよくないんだっけ？どうやったら解決できるの？という話を書いていこうと思います。 リンクボタンとは この記事でリンクボタンは、ボタンのような見た目のアンカーリンクのことを指します。 ボタンのように見えながらもクリックすると別のURLに遷移したり、ファイルをダウンロードなどの動作をします。 例 Spotify登録サイト (https://open.spotify.com/intl-ja?) Node.jsのダウンロードリンク(https://nodejs.org/en) そもそもリンクとボタンってなにが違うの 画面上のリンクやボタンの役割は、ユーザーを次のアクションへ
HTML for People
HTML is for people HTML isn’t only for people working in the tech field. It’s for anybody, the way documents are for anybody. HTML is just another type of document. A very special one—the one the web is built on. I’m Blake Watson. I’ve been building websites since the early 2000s. Though I work professionally in the field, I feel strongly that anyone should be able to make a website with HTML if t
font-sizeはCSSのcalcとvwを使った公式にあてはめて、画面枠に応じた最適なサイズを自動計算できます。 必要なのはフォントの最小値と最大値、画面枠の最大値と最小値の4つの数値です。 calcの公式自体を丸覚えしてfont-sizeやpaddingの算出に流用できるようにしておきましょう。 レスポンシブルデザインの見やすさを決める「フォント」 レスポンシブデザインは、WEBの世界において必須のレイアウトになっていますよね。 その中でユーザー目線の優れたサイト作りをするための要因の一つが、「文字の見やすさ」を保つ事でしょう。 常に見やすいページを作るためには、表示デバイスごとに最適な大きさの文字を表示する必要があります。 ユーザーのデバイスはコントロールできない ただ、ユーザーがどんなデバイスで閲覧するかを制限する事はできませんよね。 となれば理想とするのは臨機応変に対応できる仕組
＊2025/5/30更新： ・プロンプト文をすごく短くしました 1. 実行例 どんなインプットでも、左サイドバーに目次がついてきれいなレポートに仕上がるプロンプト文を作りました。いろんな情報を整理するときに役に立ちます。 以下の実行例をご覧ください。 ２. プロンプト文 １）以下を生成AIに貼り付けます。 ２）2回目のチャットで、インプットを追加で貼り付けてください。 ３）HTMLが出力されますので、メモ帳などで拡張子を.htmlにしてください。 インプットの情報を網羅的に理解して、デジタル雑誌の特集記事を作るイメージで、 洗練された単一HTMLお客様向けのビジネスレポートを作成してください。左サイドバーの固定目次が最重要です。 Appleのサイトやnoteを参考に、ミニマルかつ高品質な静的デザインのレポートを目指してください。 提供情報に基づき、読者が情報を心地よく深く理解できるような非
Portable EPUBs
A proposal for the next generation of portable documents.
Flexboxで子要素(flexアイテム)の大きさを均等幅(同じサイズ)にしたい この記事ではサンプルを用いてFlexboxで子要素(flexアイテム)の大きさを均等幅(同じサイズ)にする方法を紹介します。 この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。 Flexboxの使い方をどこよりも詳しく解説！図解やサンプルもあり！ 図のようにflexアイテムを均等に配置する方法となぜ均等になるのかを解説します。 <div class ="flex-container"> <div class ="flex-item">1</div> <div class ="flex-item">2</div> <div class ="flex-item">3</div> </div> .flex-container { display: flex; ...
The story of how I gained two world-firsts, somehow. This might sound hard to believe but, as far as I know, I published the first ever Language Server for HTML that reports syntax errors, and then I also gained a second world-first after that. VSCode extension (OpenVSX) (or search “SuperHTML” in VSCode directly)Source code and prebuilt binariesSetup instructions for other editors.Note that, while
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
HTML with Superpowers | HTML with Superpowers
Introduction to Web Components
Those HTML Attributes You Never Use — Smashing Magazine
In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects. This post is the result of his research, and he hopes you’ll find some of these useful to you, as you build HTML pages in the coming months. In January, Madison Kanna asked her Twitter followers: W
弊社のheading levelがめちゃくちゃだった件と 解決のためにしたことの話 - SmartHR Tech Blog
こんにちは。プロダクトエンジニアの@atsushimです。 smarthrでは社内でひろくsmarthr-ui が利用されています。 大変便利なのですが、使っていく上で色々問題も発生し、その都度対応してきています。 今回は発生した問題の一つ、Headingのレベルがめちゃくちゃになってしまった、という問題とその解決のためにしたことを紹介しようと思います。 Headingのレベルってそもそも何？なんで重要なの？ HTMLの見出し(Heading)要素は <h1> から <h6> まで、6種類存在します。 h1がレベルとして最上位、h6が最下位になり、ページ内のコンテンツの構造に合わせて、h1から順に指定していきます。 基本的に見出しはレベルが飛ばされることなく、階段状になっていることが良いとされています。 例えば以下のようなマークアップの場合、スクリーンリーダーユーザーなどは 読み飛ばしてし
と依頼します。 その際、 必要なHTML要素 そのHTMLに必要なCSS 必要に応じてJavaScript だけを残し、関係のないコードは除外してもらいます。 こうしておくと、次にAIへ渡す参考資料として使いやすくなります。 JavaScriptを含めるかどうか HTML資産にJavaScriptを含めるかどうかは、用途によって変わります。 見た目だけを参考にしたい場合は、HTMLとCSSだけでも十分です。 一方で、JavaScriptも含めておくと、 ボタンを押したときの動作 ダイアログの表示 ファイルのドラッグ＆ドロップ 読み込み表示 など、見た目だけでなく動作もAIへ参考として渡せます。 似た機能を実装するときや、不具合を修正するときにも役立つ場合があります。 ただし、JavaScriptには処理を実行するコードも含まれるため、出所が不明なコードをそのまま実行しないなどの注意は必要で
The HTML capture attribute is interesting because it allows you to activate a user's camera with just HTML. This article covers it in more depth. 日本語で読む The other day I came across a cool HTML attribute I had never heard of before; capture. So I decided to make a video and blog post about it. Here’s a video format if you prefer that: You can put the capture attribute on inputs with the type of fil
この記事は HTML アドベントカレンダーの 4 日目の分です。 HTML の dl 要素 (説明リスト、いわゆる定義リスト) は、名前と値 (用語と説明) からなるグループの連なりを表します。ひとつのグループには dt 要素と dd 要素がそれぞれひとつ以上含まれます。 よく見るのは dl 要素の直下に dt 要素と dd 要素が来る形でしょう。以下の例では dl 要素にふたつのグループが含まれます。 <dl> <dt>琥珀</dt> <dd>寒天を使い透明感のある菓子の総称。</dd> <dd>琥珀糖のこと。</dd> <dt>琥珀糖</dt> <dt>干琥珀</dt> <dd>寒天を煮て固め表面を乾燥させた菓子。シャリっとした表面とプルっとした中身の対比が癖になる。</dd> </dl> スタイルシートを適用したり、マイクロデータの項目を作成したりするために、グループひとつずつを表す
HTMXを試してみたいのでWebSocketでSymbolの新規ブロックをリアルタイムで表示してみる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
articlestoday i learnedtagscontact Using static websites for tiny archives Tagged with digital preservation, static sitesPosted 16 October 2024In my previous post, I talked about how I’m trying to be more intentional and deliberate with my digital data. I don’t just want to keep everything – I want to keep stuff that I’m actually going to look at again. As part of that process, I’m trying to be be
An origin trial for a new HTML <permission> element | Blog | Chrome for Developers
There are a number of imperative methods for asking for permission to use powerful features like location access in web apps. These methods come with a number of challenges, which is why the Chrome permissions team is experimenting with a new declarative method: a dedicated HTML <permission> element. This element is in origin trial from Chrome 126, and ultimately we hope to standardize it. Imperat
#フロントエンド #HTML 私はそもそも #HTML の <form> 要素が（少なくとも素のまま使うものとしては）好きではない #React の Server Action に関する話とか、「このフレームワークはWeb標準だからいい」とか、「単純なフォームなら #Rails の方が便利」とか、そういう話を見るたびに毎回この前提が自分の中で引っかかってしまう これらのツールや設計を良しとする人（そっちに寄せたいと思ってる人）、本当に HTML の <form> 要素好きですか？（便利だと思ってますか？）というのが気になっている たとえばブラウザの「戻る」で「フォームの再送信」ダイアログが出るサイトは現代では「品質が低い」と言っていいだろう これが出うる段階で、私は POST でのページ遷移というものをあまりやりたくないと感じてしまう まぁ流石にこれは大抵のフレームワークで回避する方法が存
【CSS】Grid・Flexの子要素にContainer Queriesを使ったら、子要素の幅がなくなる!? - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【セキュリティ ニュース】複数言語向けの「HTMサニタイザ」に脆弱性 - XSSのおそれ（1ページ目 / 全1ページ）：Security NEXT
「OWASP Java HTML Sanitizer」をはじめ、「HTML要素」を除去するために複数言語で利用されている「HTMLサニタイザー」において、適切に処理が行われず、クロスサイトスクリプティング（XSS）が可能となる脆弱性が明らかとなった。 「SELECT」「STYLE」「OPTION」要素を許可している場合に、ポリシーが適切に反映されない脆弱性が明らかとなったもの。 同脆弱性の影響により、スクリプトなどのサニタイズが行われず、クロスサイトスクリプティング（XSS）が可能となるもので、実証コード（PoC）も公開されている。 「OWASP Java HTML Sanitizer」では、「CVE-2021-42575」が採番された。米国立標準技術研究所（NIST）の脆弱性データベース「NVD」において、共通脆弱性評価システム「CVSSv3.1」のベーススコアは「9.8」、重要度は「ク
Popover APIが便利そう - Qiita
Popoverの機能 Popover APIには便利な機能が標準で搭載されているため紹介します。 最上位のレイヤーに配置される ポップオーバーが最上位に出現するため、z-indexを調整する必要がありません。 ライトディスミス機能 簡易非表示という概念であり、 ESCキーで閉じる ポップオーバーの外側をクリックすると閉じる という機能で、ポップオーバー外をクリックして閉じるという動作を標準で対応しており、ESCキーで閉じることができるためアクセシビリティにも配慮されています。 複数のポップオーバーがあった場合は勝手に他を閉じてくれる 一つ目のポップオーバーを開いた状態で二つ目のポップオーバーを開くと自動的に一つ目のポップオーバーを閉じてくれます。 実装方法 実装方法は至ってシンプルです。 ポップオーバーにしたい要素にpopover属性と任意のidを付与 ポップオーバーの開閉を制御したい要素
React Email - React Email
Why We believe that email is an extremely important medium for people to communicate. However, we need to stop developing emails like 2010, and rethink how email can be done in and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.
【HTML・CSS】class属性を複数指定するには？CSSセレクタを並べる方法もサンプルコードで解説 - WEBCAMP MEDIA
CSSでスタイルを記述する際に、CSSセレクタに複数のclass属性を使いたいときがありませんか？ 複数のclass属性に同じスタイルの指定ができれば、CSSの記述が簡略化され、動作が軽くなりますよね。 また、HTMLの要素内でclass属性を複数指定すると、複数のスタイルを組み合わせることができます。 今回は、HTMLとCSSでclass属性を複数使いたいという方のために、 以上の項目に沿って、解説していきますね。 この記事を読めば、HTMLとCSSでclass属性を複数指定する方法が分かるようになりますよ。 ぜひ最後まで読んでくださいね！ HTMLでclass属性の値を複数指定 HTMLの要素にclass属性を指定すると、CSSで個別にスタイルを指定することができるようになります。 このclass属性には、複数の値を指定することができます。 <div class="sample blu
【2023/3/23 更新】 こちら、使いやすいようにバージョン1.0.0にアップデートして settings.jsonにオプションを追加出来るようになりました！ 正規表現でセレクターのフィルタリングをできたり、 生成するcssセレクター内に挿入するコードを設定しやすくしました。 詳細はgithubのissueをご確認ください。 成果物 ※良かったら使ってみてください〜 なんで作ったか 突然ですが、 htmlのclassを、cssでセレクタにする作業、 ダル辛すぎませんか？ ページ数、要素数が多くなると、「何回同じ作業やるねん、、」 という思いになります。 朝起きたら、「セレクタ抜き出して用意しときましたよ！！」、って誰かにやって欲しいレベルです。 <div class="l-wrapper"> <div class="p-hoge p-hoge--up js-hoge">aaa</div
Intro このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。 popup が紆余曲折を経て popover 属性になり、2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、popover の実装は各ブラウザで一気に話が進む。 Release Notes for Safari Technology Preview 166 https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/ News from WWDC23: WebKit Features in Safari 17 beta https://webkit.org/blog/14205/news-from-wwdc
3カ月ほど前にさかのぼりますが、2023年11月2日に開催されたCSS Nite主催のイベント「#朝までマークアップ」において、私は「HTML軽視されすぎ問題」と題した講演を行いました（#朝までマークアップ 開催のお知らせ参照）。講演の録画や、使用したスライドは共有できませんが（セミナーアーカイブ：#朝までマークアップ（2023年11月2日開催）で販売中）、本記事では講演の概要をご紹介します。 まず、業界的にHTMLが軽視されていると考える根拠として、The WebAIM Millionの調査結果やJens Oliver Meiert氏による調査結果を紹介。アクセシブルではない、あるいは仕様に準拠していないHTMLがWebにあふれている現状を共有しました。また、CSS-Tricksの記事「The Great Divide」が論じたフロントエンド職の分断に言及しつつ、相対的にHTMLよりもJ
Figma からコードを生成するツール
※動作確認できなかったものは省いてあります。全て Figma のプラグイン想定です。 ※1 Builder はボタンが CSS ではなく画像で出力されてしまう。 公式 CodeGenerator Beta デザインの小さい分割単位を React コード生成するツール（小さい分割なので基本はコンポーネント単位） 一括で出力できない Figma 内部でコードが簡単に確認できる 普段の開発には活かせるところはある anima Figma - Export Design to Code - Anima 有料 一括で出力可能 出力結果は全体で一番綺麗 React と HTML+CSS どちらも出力可能 レスポンシブ もある程度できる clapy Install the plugin - Docs React のコードのみ 一括で出力可能 anima と比較したら結構崩れた コード品質は悪くはないしコ
背景 モーダルを作るってダルくないですか？ モーダル自身を作成して・・・ モーダルの背景を作成して・・・ モーダル内のボタンを押すとモーダルと背景が非表示になって・・・ モーダルの位置を固定して・・・ 背景とz-index調整して・・・ etc・・・ 実装しないといけない要素が複数あるので面倒という話です。 そこで、この dialogタグ の登場です。 簡単にいうと上記で列挙した機能を簡単に作ってくれるすごいやつです。 実は結構前（2014年）から存在していたのですが、対応しているブラウザがChromeやOpera のみでした。それが、2022年に 標準ブラウザで対応できるようになり、実用性が出てきたので、これを機に触って理解しようと思います。 WEB+DB vol.135 でも紹介されていますが、 実際に使ってみて「便利だな！」と思ったので、備忘録として残しました。 使い方 dialog
HTML+CSSでPhotoshop風選択範囲のアニメーションを再現しようとしたら凄く面倒くさかった - Qiita
ことの発端 先日、息子からの夏休みの宿題として個人でアイロンビーズエディタ(IBE)というのを開発しました。 今回はその時に実装しようとした選択範囲のUI/UX(↓こんなの)を再現する話です。 実物を触って見てもらった方が良いと思いますので、こちらに用意しています。 開発秘話的なものはnoteに記載しているので省略しますが、一言で言えばペイントツールにありがちな「選択範囲」と「コピペ」を実装しようと思ったからです。 エクセルやAdobeのphotoshop的なUI/UXにしたい。 言うまでもありませんが、後発のツールのUI/UXは他のツールからの影響を多大に受けます。 簡単なもので言うと、多くのアプリケーションがCtrl(Command)+ZでUndoを実装していたり、Ctrl+Cでコピーできるのは当たり前の世界になっています。 そのスタンダードなUI/UXの1つに「選択範囲」を示すものが
Boost Resource Loading With fetchpriority, A New Priority Hint — Smashing Magazine
Loading experience is crucial to the user’s first impression and overall usability, so Google defined Largest Contentful Paint (LCP) metric to measure how quickly the main content loads and is displayed to the user. This new attribute will enable us to fine-tune relative resource priority, improve LCP performance, deprioritize JavaScript fetch calls, and much more. Let’s check out fetchpriority an
Did you know the HTML coming from the server might not be what Google Search sees? Martin Splitt, Developer Relations Engineer, explores the relationship between source HTML, rendered HTML, the Document Object Model (DOM), and the rendering process. Learn how to inspect the DOM in a browser, the differences between what Google tools show when inspecting a URL and when using 3rd party view-sources,
Tip - Use fetchpriority=high to load your LCP hero image sooner
Tip - Use fetchpriority=high to load your LCP hero image sooner August 14, 2022 Tip: Add fetchpriority="high" to your Largest Contentful Paint (LCP) image to get it to load sooner. Priority Hints sped up Etsy’s LCP by 4% with some sites seeing an improvement of up to 20-30% in their lab tests. In many cases, fetchpriority should lead to a nice boost for LCP. Code snippets Priority Hints let you ad
What a good website does. A platform-agnostic specification of the technical features every decent website should have — from <title> to /.well-known/security.txt, from WCAG contrast to llms.txt. Written for humans and agents.
This is an announcement post for my “Grace browser” project, which you can find here: trygrace.dev This project is a web page which can dynamically convert a wide variety of functional programming expressions to their equivalent HTML. This conversion can even auto-generate interactive web forms from functions, which means that people without web programming knowledge can use the Grace browser to c
GitHub - webui-dev/deno-webui: Use any web browser as GUI, with Deno in the backend and HTML5 in the frontend.
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
Dialog (Modal) Pattern
How to build accessibility semantics into web patterns and widgets About This Pattern A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, a
この記事について 2022 年 3 月、Safari15.4で HTML の dialog 要素が標準でサポートされました。 これにより、全ての主要ブラウザ（Chrome, Edge, Safari, Firefox）で dialog 要素が利用可能になり、今まで@react-ariaなどのライブラリに依存していたモーダル実装を見直したいと思っている方も多いのではないでしょうか。 本記事では、HTML の dialog 要素の使い方からアクセシブルなモーダルの要件、それらを全て満たすアクセシブルなモーダルの実装例についてご紹介します 🫡 そもそもアクセシブルなモーダルの要件って何？ そもそもアクセシブルなモーダルの要件とはどのようなものを指すのでしょうか。 Accessible Rich Internet Applications (WAI-ARIA) 1.1やARIA Authorin
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
details・summaryタグで開閉アニメーション付きアコーディオンUIを作ろう
calcでフォントサイズを自動計算する方法（レスポンシブデザイン必須）
どんなインプットも読みやすいHTML+CSSのレポートにするプロンプト文（改 - Qiita
Flexboxで均等幅(同じサイズ)で横並び配置する方法！ | 模写修行メディア
The First HTML LSP That Reports Syntax Errors
Considerations for making a tree view component accessible
自分のHTML資産を増やすと、AIで見た目の良いサイトを作りやすくなる - Qiita
TIL: You Can Access A User's Camera with Just HTML
HTML の dl 要素内のグループを明示する: Days on the Moon
Using static websites for tiny archives
そもそも HTML の <form> がそんなに好きじゃない - fsubal
HTMLタグからcssセレクターを生成するVSCode拡張機能を作った
Dialog と Popover #5 | blog.jxck.io
「HTML軽視されすぎ問題」講演概要 | フロントエンドBlog | ミツエーリンクス
【HTML】便利そうな dialog 使ってみた感想 - Qiita
Redirecting...
Source HTML vs. Rendered HTML
The Website Specification
Generate web forms from pure functions
dialog要素を使ってアクセシブルなモーダルを作ってみよう
www.hurights.or.jp
note.com/mitsukage
leelin.hatenablog.com
note.com/hatoboy
rincoro.hatenablog.com
scan.netsecurity.ne.jp