アクセシビリティを意識した CSS の書き方 - Frasco
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
HTML と CSS だけで Todo アプリを作りました。TodoMVC（今回デザインを使用使わせてもらいました）と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう？簡単に説明すると、HTML、CSS の一般兄弟セレクタ（~）、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること： Todo の追加（最大50件） Todo の完了 Todo の削除 フィルタリング（完了・未完了） 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと： ページリロード後の永続性の維持 「すべての Todo を完了にする（Mark all as done）」
HTTP APIの詳細なエラー情報をレスポンスに持たせるための仕様
今日では HTTP(s) で API が公開されることは当たり前の時代ですが、エラーをアプリケーションにどう伝えるかは、個々の API の設計に依存していました。特に、HTTP ステータスコードは有限であり、元々持っている意味があるので、自由に使うことはできません。API はそのドメインごとにもっと複雑で細かなエラー情報があるはずで、それらはレスポンスボディに載せてアプリケーションに伝えることになりますが、その書式に規定は今までありませんでした。 HTTP API にて、アプリケーションにエラー情報を伝達するための（レスポンスボディに載せられる）標準的な形式が、RFC7807 Problem Details for HTTP APIs で定められています。適用例としては、以下のようになります。 HTTP/1.1 403 Forbidden Content-Type: application
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
Web 関連仕様 日本語訳
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita
このポストは以下の記事を、筆者の許諾を得て意訳したものです。 JavaScript Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。 （以下、意訳） はしがき もしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。 モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。 それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。 このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。 注：簡素化のために、このポストは
![[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/58f9e1dba5f87913ec14c5cf5d9a2e3f11b0cce8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU1JTg4JTlEJUU1JUFEJUE2JUU4JTgwJTg1JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFSmF2YVNjcmlwdCVFMyU4MyVBMiVFMyU4MiVCOCVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MyVBQiVFOCVBQyU5QiVFNSVCQSVBNyUyMFBhcnQxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hYTQ5ZmJlMGE5NjIwYTFmODhlMzM2MTQzZTQ3ZmU5NA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2h1Y2swNTIzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYmU4Nzk0Mzg4MjBiNjRhMWVlMGFkNmI1NTI5MTg5ZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dbd4ac6fd099aa5ae2886019696fe1319)
この世で最も識別しやすいもの ― デスクトップ用Webサイトのハンバーガーメニューを使った、アイトラッキング研究 | POSTD
この世で最も識別しやすいもの ― デスクトップ用Webサイトのハンバーガーメニューを使った、アイトラッキング研究 おそらく皆さんは、「ハンバーガーメニューの使用についての別の意見か。まさにそれが必要なんだ」と思いながらこの記事を読んでいるでしょう。Appleは 「あなたが使っていないといいのだが…」 と言い、Googleの製品デザインのガイドラインには 「賛成だ。しかしこのようにデザインしよう」 とあり、Jacob Nielsenは 「代わりにピザにしてみよう」 と言い、例はまだまだ続きます。しかし、ちょっと待ってください。誓ってもいいのですが、この記事は違います。これは、あなたが自身のサイトをデザインする時に、興味深い考察が得られるような特定の質問に焦点をあてたものです。アイトラッキング・ソフトウェアと25人の親切な参加者の協力により、次のような質問に対する洞察を得るために実験を行うこと
【W3C current 見方】CSS3の日本語訳集 - 血統の森 web実験小屋
最終更新：2023-02-23 CSS3とは CSS3は、CSS 2.1仕様を核とし、CSS 2.1仕様の機能を追加・改訂するモジュール群です。CSS 2.1ではひとつの巨大な仕様にすべてのモジュールが定義されていましたが、CSS3では仕様を分割し個別のモジュールとして定義するものです。 現在のCSSは、CSS Snapshotで定義されています（2023年時点ではCSS Snapshot 2023でした）。 このページについて このページでは、CSS3の日本語訳を収集していましたが、管理人が興味をなくしてしまったこともあり、このページのメンテナンスを行わないことにしました。かつてのページの様子は、Waybackから見ることができます。 多数のCSSの日本語訳は、triple-underscore氏がWeb 関連仕様 日本語訳で公開していますので、そちらを参照するとよいでしょう。（CSS以
【翻訳】ビジュアルデザインはつまらなくなってしまったのか？ - MOL
Original：HAS VISUAL DESIGN FALLEN FLAT? （2015-01-20）by Emmet Connolly 2013年から2014年の劇的なUIフラット化により無数のピクセルが流れ落ちていった それはビジュアルデザインにおいて非常に大きな変化だった。Microsoftの急進的でモダンなMetro UIはその前兆だった。iOS7のリリースよって大衆化し、UIのトレンドは2極化した。Google Material Designによって、おおかた完成した。 フラットデザイン（未完成であるけれど便利な表現）はスキューモーフィズム（同前）を駆逐するだけでなく、それの墓の上で踊り、すべてのべべル、影、墓石のテクスチャさえ消し去ってしまった。 上図のようなデザインである。 発展、変化、流行は避けられないものだ。このような最新スタイルもまた、いつの日か廃れていくだろう。未来
デザインスプリントとブルーボトルのプロトタイピング（翻訳）
本記事は、最近日本にも上陸したBlue Bottle Coffeeが行ったデザインスプリントについての翻訳記事である。（オリジナル）。デザインスプリントとは、Googleの投資部門Google Venturesが投資先に行うデザインワークショップ。Googleはオンラインでの売り上げが伸び悩むBLUE BOTTLE COFFEEと彼らのエージェンシーに対し、一週間のデザイン／プロトタイピングワークショップを行い、大きな成果を出した。以下、そのプロセスとなる。 BLUE BOTTLE COFFEE 私たちはブルーボトルコーヒーの新しいサイトデザインを手伝い、売り上げと滞在時間を伸ばしました。 ブルーボトルは美しいカフェと精緻なコーヒーにより、熱狂的なファンを生み出しました。しかし彼らのサイトは、そのブランドを表現しきれず、ウェブによる売り上げは全体利益のたった10%でした。 チャレンジ ブル
Accessible Rich Internet Applications (WAI-ARIA) 1.0 日本語訳
[contents] Accessible Rich Internet Applications (WAI-ARIA) 1.0 W3C Recommendation 20 March 2014 This version:http://www.w3.org/TR/2014/REC-wai-aria-20140320/Latest version: http://www.w3.org/TR/wai-aria/ Previous version:http://www.w3.org/TR/2014/PR-wai-aria-20140206/Editors:James Craig, Apple Inc. Michael Cooper, W3CPrevious Editors: Lisa Pappas, Society for Technical Communication Rich Schwerdt
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
はじめに この話はGuillermo Rauch氏が書いたhttp://rauchg.com/2014/7-principles-of-rich-web-applications/ という記事の翻訳です。許可を得て翻訳しています。 ここ最近Web業界を賑わしているSingle Page Applicationの必要性、HTTP2/SPDYといった技術、リアクティブプログラミングやIsomorphicデザインという考え方について包括的にまとめたすごく良い記事になっております。 最初に断っておきますが、ものすごく長いです。各セクションがわかれているので時間がない方はセクションごとに書かれたtl;DRとまとめを読むだけでも参考になるかと思います。 ちなみに明日のNode学園祭には、本記事を記述したGuillermo Rauch氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。
ARIA Techniques | Techniques for WCAG 2.0
ARIA Techniques for WCAG 2.0This Web page lists ARIA Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. Technology-specific techniques do not replace the general techniques: content developers should consider both general techniques and technology-specific techniques as they work toward conformance. Publication of techniques for a specifi
ウェブ・タイポグラフィーのベスト・プラクティス
Translation of: The All-Inclusive Guide to Web Typography Best Practices インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。 懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャ
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
ウェブ関連仕様 日本語訳（ www.hcn.zaq.ne.jp/___/WEB/ ）
このページ は、このページの URL パス下にある，ウェブプラットフォーム関連の仕様の日本語訳の一覧と，各ページに共通する事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、日本語訳は公式のものではありません。 一部の仕様（特に WHATWG によるもの）は日々更新され続けているので、日本語訳には最新版ではないものもあります。 また、原文の更新に伴う，ページ更新の際に見落としがあるかもしれません（更新部分の日本語訳への複製／統合段階など）。 その完全性は保証されませんが、不定期に検証されてはいます。 Jacascript ／ CSS ／ DOM の対応が古いブラウザでは、表示が崩れたり，一部の機能が働かないかもしれません（特に IE 6〜8 はほとんど考慮されていません）。 例えば目次など，一部ページ内容はスクリプトで自動生成されていま
PHP Markdown Extra 仕様の全訳（意訳） ： 開発などブログ | HiBARA SOFTWARE
拙作の「MarkDown#Editor」ですが、次版では、Markdown Extraの実装を検討しています。 でも、そのためには本家Extraの仕様をよく理解していないとつくれません。 Michel Fortin – PHP Markdown Extra ただ、本家ホームページは全部英語。がんばれば読めないわけではありませんが、楽をしたいなあ、誰か訳していないかなあ、とウェブをうろちょろしてみたのですが、誰もしてくれてなくて・・・ うーん(笑)。 じゃあ、どうせしっかり調べるなら、僕が全訳してしまおうか、という感じでやってみました。 もし英語の得意の方で、かつMarkdown Extraに精通されていて、微妙に本家とニュアンスがちがうだとか、真逆のこと書いてあるということがあれば、適宜ツッコミを入れてください。修正を加えて行きたいと思います。 また、以下の場所に参照しやすいよう、ファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frasco - 海外で話題の記事を届けるエンジニアのためのメディア
CSS4セレクタ (Selectors Level 4) の新機能