混合状態のチェックボックス - ARIA-Barriers
@nishimotz です。 ウェブアクセシビリティLT＆交流会 vol.4 に参加して、交流会で話したことを、あとで気になって調べてみたのが今回の記事です。 混合状態(部分的にチェック済み)のチェックボックスは、あるオプションが複数のサブオプションを統括しているような場合に便利な UI 要素です。 しかし、アクセシビリティを確保するためには、適切な実装が必要だとされています。 さて、どうしたらいいのでしょうか。 APGの実装 ARIA Authoring Practices Guide (APG) Checkbox Example (Mixed-State) の実装を見てみましょう。 テキストだけ日本語に翻訳しました。 <fieldset class="checkbox-mixed"> <legend> サンドイッチの具材 </legend> <div role="checkbox" c
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita
はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 「有給を使ってでも、25記事完走するぞ！💪🏻」という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞：【完走賞ゲットだぜ！】CSSでポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ
MDNとかをみんなで編集！翻訳！ のカレンダー | Advent Calendar 2023 - Qiita
オープン Web の開発者向けドキュメント MDN Web Docs には、Web アプリ開発に役立つノウハウなど、英語ドキュメントが日々どんどん追加されていっています。ただそのぶんドキュメントの日本語化(l10n=localization)は後手後手になっています。 新しいウェブ技術やウェブ標準に興味ある 翻訳に興味あるけど、どうしたらいいか分からない 英語は苦手だけど、日本語の文書を読みやすくするとかならできるかな Mozilla のコミュニティ活動に参加してみたい フォクすけに萌える MDN を翻訳してきたけど最近ご無沙汰気味 などなど、色々な方面からの参加をお待ちしています。 参考情報: みんなで編集！翻訳！カレンダー 2021 みんなで編集！翻訳！カレンダー 2020 みんなで編集！翻訳！カレンダー 2019 みんなで編集！翻訳！カレンダー 2018 MDN Web Docs ド
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用
当記事では「HTML Standardからインライン要素・ブロック要素の記述が削除されたことを受けても、それらの概念が消えたわけではない」という主張を展開しています。 そして、記事内ではMDN Web Docs にその表記があることを根拠のひとつとしています。 『MDNの記述が変更されたことの意味（inline-level element, block-level element）』に記したとおり、すでにMDNの記述は変更されています。 この記事の趣旨はそれによって変わることはありませんが、MDN から記述が消えていることにつきましては充分にご留意頂ますようお願い致します。 詳しくは記事をご確認くださいませ。 https://zenn.dev/coedo/articles/updated-mdn-contents Web制作に関するディスカッションの中で、HTML Standard の内容
『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用 https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element この記事では、『なぜインライン要素・ブロック要素概念は依然として有用なのか』という記事（以下「元記事」といいます）の説明について見ていきます。 この記事の対象者 この記事は、ウェブ制作を学んでいる人や、「インライン要素」「ブロック要素」という用語の扱いに困っている人を想定しています。 はじめに： 結論 この記事の結論は次の2つです。 今日のHTMLから「インライン要素」「ブロックレベル要素」という表記はなくなった。 ある要素にどのような要素を入れるのかは、「インライン要素」「ブロック要素」という考え方を使わなくてもできる。 詳しく説明したいと思います。
CSSのcanvasとviewportとposition:fixedとpinch zoom - saneyuki_s log
specを元にした概念の整理 間違いあったら教えて欲しい CSS 2.1におけるviewport CSS 2.1におけるviewportを説明するにあたり、以下のterminologyが必要となる canvas For instance, user agents rendering to a screen generally impose a minimum width and choose an initial width based on the dimensions of the viewport. viewport User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users co
ブラウザの仕組み: 最新ウェブブラウザの内部構造
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
Viewportまとめ - Qiita
HTML・CSS の viewport がよく分からなかったので、実験・調査した結果をまとめてみた。 モバイルとデスクトップで挙動が異なるので、その違いを中心に書いている。 本来は OS・ブラウザ・バージョンの組み合わせでも多少挙動が異なるが、今回はこの差異は考慮せず、MacBook Pro と iPhone XS に固定して検証した。 TL;DR モバイル対応するには、モバイル向けの basic.css とデスクトップ向けの desktop.css を用意し、HTML の <head> 内で次のように書く。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/basic.css" rel="stylesheet"> <link href="css/desktop.cs
imgタグで画像が読み取れなかったときになにも表示しないようにしたい - Qiita
読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。 やり方はこんな感じ。 <img src="https://example.com/noimage.png" alt onerror="this.onerror = null; this.src='';" /> ポイントは以下の2点 altを空文字で設定 onerrorでsrcを空にして、onerrorをnullにする 1. 「altを空文字で設定」について 画像が表示されなかった場合に、代わりにalt属性のテキストが表示してくれる このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。 なので、alt属性に空文字を指定しておくことで、 「画像が表示されなかった場合に、代わりに空文字を表示する」ようにしている。 2. 「onerrorでsrcを空にして」について onerror属性を設定しておくと
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように Mozillaは、マイクロソフト、Google、W3C、サムスンなどと協力して、それぞれのブラウザなどに対応した技術解説のドキュメントを一本化し、Mozilla Developer Networkの「MDN web docs」にまとめて掲載する取り組みを開始したと発表しました。 Webブラウザに関するHTMLやCSS、APIなどの機能の解説は、そのWebブラウザを開発するベンダのWebサイト、例えばマイクロソフトならMSDN（Microsoft Develpers Network）、GoogleならChromeのWebサイト、MozillaならMDN（Mozilla Developer Network）のWe
MS、無償のWeb制作者向けIEプラグイン「Internet Explorer Developer Toolbar」正式版公開：CodeZine
Microsoftは9日、IE用プラグイン「Internet Explorer Developer Toolbar」正式版をリリースした。以前からWeb開発者向けにリリースされていたプラグインだが、今回よりバージョン1.00の正式版となった（リリースされたのは、バージョン1.00.2188.0）。 Internet Explorer Developer ToolbarはMicrosoftのWebサイトより無償でダウンロードできる。IE7の場合、インストールするとブラウザの右上に小さなアイコンが現れ、これをクリックするとメニューが表示されるようになる。 Webサイトにおける画面デザインでは、HTMLのDOM構造やCSS適用内容、要素のサイズなど、実際にブラウザを通した表示を見ながら検証していく必要がある。Internet Explorer Developer Toolbarを使うと検証した
サイト作成における問題
簡略目次 リンクの諸問題 やってしまいがちなテクニック HTML/CSS解説 文書作成のはじめに HTMLリファレンス 要素索引 HTML文書サンプル CSSの書き方（製作中） CSSリファレンス（製作中） レイアウトサンプル -メニュー配置 レイアウトサンプル -3カラムデザイン レイアウトサンプル -擬似フレーム CSSデザインサンプル（製作中） このサイトについて 詳細目次 このサイトについて 著者名 Rju メールアドレス rju@rju666.com 掲示板 サイト作成関連BBS このサイトはサイトを作成する際に生じる問題を取り扱っています。 多くの問題は間違ったネチケット（ネット上でのエチケット）サイトや間違ったリファレンスサイトが原因でしょう。 今や誰でも手軽にウェブサイトを作成することが出来る時代となりました。特別な技術や特殊な知識をさほど必要としないため多くの情報が提供さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Customizable Select Element (Explainer) | Open UI
inline-blockの右側にゴミ文字が表示される（原因わからず） - Qiita
br要素だけがフレックスアイテムやグリッドアイテムにならない
IDEA * IDEA
HTMLクイックリファレンス