モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
PjaxとSPAの違い - falsandtruのメモ帳
PjaxとSPAが全く同じ技術構成なのを知らずにPjaxを過去の技術だと思ってる知ったかぶりが多いので最も高度で完成度の高いPjaxライブラリであるpjax-apiの作者の自分が説明しておこう。 SPAとはPjaxをバンドルしたフレームワーク Pjaxとはその語源からしてpushState+Ajaxである。そしてSPAの技術構成はフレームワーク+pushState+Ajaxである。すなわちSPAとは本質的にPjaxをバンドルしたフレームワークに過ぎない(Pjaxと対比されるSPAはツールセットとしてのSPAでありこれはアプリケーションフレームワークとしてしか存在し得ない。Reactはライブラリを自称しているがAngularやVueがフレームワークを自認していることからも明らかなようにSPAとして使用する場合はルーターなどと組み合わせフレームワーク化しなければならないものでありこれが主たる使
2020年 今知っておいたほうがいいHTML要素 - Qiita
こんにちは！ エイチームフィナジーアドベントカレンダー12日目を担当します @chika_hoge です。 推しタグは dl, dt, dd タグです。よろしくお願いします。 はじめに 最近ショックだったことがあります。 それはいつの間にか td の width や border 属性が非推奨になっていたこと…。 HTML 要素は、web 制作に携わる人なら重要な言語ですが、なかなかアップデート情報を拾いに行くことが少ないな、って感じます。 この記事では今知っておいた方がいい HTML 要素のお話をしたいと思います。 html5 あたりから情報のキャッチアップが怪しい…そんな人向けにご紹介します。 HTML ってどこが管理しているの？ WHATWG の Living Standard が HTML 標準仕様です。 元々 HTML の最新仕様の策定については、W3C と WHATWG それぞ
HTML�5 differences from HTML�4
About this specification This specification is like no other — it has been processed with you, the humble web developer, in mind. The focus of this specification is readability and ease of access. Unlike the full HTML Standard, this "developer's edition" removes information that only browser vendors need know. It is automatically produced from the full specification by our build tooling, and thus
copyrightのマークアップにsmallを使うことについて。
久方ぶりのブログです。そういうわけでオオコシです。 コードレビューをしているときに下記のようなマークアップを見かけて、 <footer> <p><small>©2020- EVOWORX</small></p> </footer> そういえばコレsmall要るんだっけ？と思い、改めて確認してみたんですが、最近の日本のリファレンス系サイトを見ると、わりとどのサイトもfooter > p > small で記載するよう書かれていました。 ※ちなみにコピーライトの書式については 著作権表示 – Wikipedia や 年号と©マークと何が必要？Copyright（コピーライト）表記の正しい書き方 を参照してみてください。©と発行年、権利者が書いてあればOKです。 なぜこの書き方に違和感を持ったかと言うと、2014年のものになってしまうんですが、下記の記事を見てからfooterの中身がcopyri
decoding="async"とloading="lazy"の違い| PerfData
画像の読込処理の違い ページ作成日 2019年12月19日 ページ更新日 2021年3月2日 著者: 竹洞 陽一郎 Webページにおいて、画像は重要な役割を果たしており、高解像度化と利用される枚数は増えていく傾向にあります。 その一方で、画像は、従来どおりの実装をしていると、HTMLのパース処理を遅延させる要因となります。 画像をいかに遅延要因としないようにするかの処理として、decoding="async"とloading="lazy"の違いを解説します。 decoding属性は、画像のデコード処理に関しての指示をユーザエージェントに明示する属性です。 decoding="async"と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。 記述の仕方としては、以下のようになります。 <img class
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
レイアウトプリミティブ
DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。 私が業務で携わるのはおもに、メディアサイトやコーポレートサイトのようなページ数がたくさんあるサイトの制作です。そのようなサイトでは特に、ページのテンプレートやコンポーネントをいかに堅牢な設計にできるかが重要だと感じます。 連想されるトピックとしては「CSS設計」がありますが、私見としては、CSS設計はセレクタの書き方やコンポーネントの整理の方法について述べたものであって、いかにしてレイアウトを組み立てるかという議論にはあまり踏み込んでいません。 具体的には、どのように宣言を組み合わせるか、どのようにレスポンシブにするかのような曖昧な領域については、実装において必ず意識される部分であるにも関わらず言及される場面は少ないのではない
Hands-on with Portals: seamless navigation on the web | Articles | web.dev
Making sure your pages load fast is key to delivering a good user experience. But one area we often overlook is page transitions—what our users see when they move between pages. A new web platform API proposal called Portals aims to help with this by streamlining the experience as users navigate across your site. See Portals in action: Seamless embeds and navigation with Portals. Created by Adam A
portal要素を使った画面遷移アニメーションをいくつか考えてみる | フロントエンドBlog | ミツエーリンクス
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの12日目の記事です。 昨今のWebサイトはアニメーションがいたるところにちりばめられていて、ネイティブアプリを触っているようで楽しいですね。 クリックなどのユーザー操作に合わせて要素の振る舞いを変えるもの、ロードアニメーションのようなサイトの状態を表すようなものがある中で、個人的には画面遷移アニメーションが一番好きです。 最近はSPAとして作られたサイトが増えて、画面遷移のアニメーションを見る機会が多いと思いますが、これを自分で試そうと思うと結構な学習コストが掛かってしまうんですよね...。 私もWebについて勉強したての頃は、「SPAってなに...ルーティング...？黒い画面だあ！」といった感じで目的のアニメーションにすら到達できなかったことを覚えています。 おそらく、この記事を読んでいる方も私と同じ経験をしたことが
中国語ウェブサイトの言語コード指定（lang属性） | 国際ウェブマーケティングのエクスポート・ジャパン
htmlのlang指定は端末の表示や、SEOに影響するので、正しく設定しましょう。 さて、中国語ウェブサイトの言語コードとして、これまで利用していた、 zh-CN（簡体字）、zh-TW（繁体字）は推薦しない書き方になってしまい、現時点で、古い端末の対応も考えて、正しい書き方は以下になります。 中国語簡体字サイト：html lang=”zh-cmn-Hans” 中国語繁体字サイト：html lang=”zh-cmn-Hant” 個々のコードは以下の通りになります。 “zh”はMacrolanguageで、つまり中国語です。（省くことも可） ”cmn”は”普通話”あるいは”国語”、中国の公用語です。対して、方言もいろいろあります。例えば広東語の指定は”yue”。 ”Hans”は”簡体字”ですが、”Hant”は”繁体字”です。 下記例ですが、 html lang=”zh-cmn-Hant” とい
Your Body Text Is Too Small | Marvel Blog
Body text is the key component in communicating the main bulk of a message or story, and it’s probably the most important element on a website, even if people sometimes read just the headlines. Why would we limit the effectiveness of body text by minimizing its size to a browser-default that’s now over 20 years old, even on large displays? What’s Too Small? The majority of websites are still anywh
HTMLを1999年のように書く
HTMLの実装、そしてセマンティックマークアップのすすめについて紹介します。 記事のタイトルは直訳しましたが、1999年というより、フレームワークやdivスープが増産される前の時代という意味だと思います。 Write HTML Like It's 1999 by Bradley Taunt 訳者注: 1999年のようには文字通りの意味ではなく、比喩として使用されていると思います。フレームワークやdivスープが増産される前の時代でしょうか。1999年だとtableレイアウトだったり、nav要素がないなど混乱するかもしれません。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1990年代の制約に縛られてHTMLを書く HTMLの悪い習慣 HTMLの良い習慣 「構造」の基本的な確認方法 最後に 追記 1990年代の制約に縛られてHT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web UIの実装で考えていることと気をつけたいこと - yamaScrapbox
HTML Standard 日本語訳
Astro
HTML Standard 日本語訳
Layouts
Chrome Platform Status
GitHub - WICG/portals: A proposal for enabling seamless navigations between sites or pages
