ワンランク上【謎】のアクセシビリティを確保するための18【嘘】のポイント
Web Accessibility Advent Calendar 2013(www.adventar.org)の8日目の記事です。 ウェブ制作におけるアクセシビリティについて、マークアップでのありがちなことなどを取り留めもなく書いていきたいと思います。 記事タイトルは釣りなので18もありません。あと、どこかで似たようなタイトルを見たことがあってもたぶん気のせいです。ゆるしてヒヤシンス。 代替テキストは基本中の基本ながら「適切な代替テキストとは」を突き詰めるとW3Cの文書がひとつできてしまうくらいには奥の深いものです。とくにHTML5では限定的ながらimg要素のalt属性が省略できるケースがあるなど[1]、文法的な変化も見られます。 ですが、従来のHTML仕様書ではalt属性についてほんの一文でしか説明されていなかったのに比べて、HTML5では専用の節を設けて様々なケースごとに詳細な説明が
Email Lab: A Starter Kit for HTML Emails
Coding emails can be a long, daunting, inlining-all-day process. Nathan shares a new open-source project that uses Grunt, Sass, Handlebars, and Assemble to let you building emails faster, easier, and with less stress. Meet Email Lab. Last year, as part of a large eCommerce project, I was asked to develop about a dozen transactional HTML email templates. It had been a long time since I had created
<a href="#top">がHTML5で正式仕様になってた件 - Qiita
これなんだけども: HTML - <a href="#top">Top of the Page</a>は該当するフラグメント（<div id="top">や<a name="name">）がなくても仕様的に正しい - Qiita 文書の先頭へのリンク · terkel.jp 仕様についてあんまり書いてなかったので自分で読んでみたまとめ書く。 href="#top"を指定すると自動的にページの先頭へのリンクになる ……というブラウザーの独自仕様があったわけなんだけども、これが正式に仕様として明記されたとの事。 MDNの説明が一発で分かる。 a 要素 - HTML | MDN href これは、ハイパーリンクのソースを定義するアンカー要素で唯一必須の属性です。（中略） 補足: 特別なフラグメントである "top" を使用すると、ページの最上部に戻るリンクを作成できます。例: <a href="
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
IDやクラス名でつかう英語の小話 - Qiita
Sidebar 先日、イベントの懇親会での質問で、 レスポンシブ対応で、サイドバーのカラムと落とすのがモヤっとするんですよね、サイドバーなのに。 というのがあった。 これ、確かにCSSのカラムレイアウトとか勉強しはじめると、右側・左側に#sidebarと名付けられたものがあり、なんとなく「メインに対し、位置的に横にあるやつ」っていうイメージあるんですが、別にSidebarはレイアウト上の名前ってわけではありません。 【名】〔新聞の主記事に対する〕補足［側面］記事◆【同】follow ; follow-up sidebarの意味・用例｜英辞郎 on the WEB：アルク 〔新聞の主記事に対する〕補足［側面］記事ってことで、別にレイアウト的に下にあったって、Sidebarです。 ※これはこれで、メインでないものをなんでもかんでも #sidebar の中にいれるのは正しくない気もしますね。 H
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート 白石 俊平（HTML5 Experts.jp編集長） この記事は、「Frontrend Conference The Final」の基調講演「Pragmatic Front-end Developer: From Artisan to Expert」についてのレポートです。 登壇されていたのはリッチメディアの斉藤祐也さん。HTML5 Experts.jpでも、No.10のエキスパートとして何度もご執筆いただいているので、ご存じの方も多いかと思います。 この講演タイトルは、アンドリュー・ハント氏の著作「The Pragmatic Programmer」をオマージュしたとのこと。「Pragmatic」というのは「実践的」という意味の単語で、フロント
2015年のWeb標準 | gihyo.jp
株式会社ミツエーリンクスの渡邉卓です。昨年の「2014年のWeb標準」と同様に、2015年もWebコンテンツのフロントエンド設計および実装に関連した各種標準や、周辺領域の動きに関する短期的な予測を寄稿させていただきます。 2015年のWeb標準については「より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加」「ECMAScript 6仕様の利用増加」「IE7・IE8 未サポートWebサイト増加」をキーワードとして取りあげます。 より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加 2014年10月28日、ついにHTML5がW3C勧告 (Recommendation) となりました。すでに多方面で利用されているHTML5仕様ですが、勧告になったことで、今まで利用を躊躇していた方々にも確実に浸透していくと予想できます。詳細は後述しますが、現役のWebブラウザでありながら
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
Private Presentation
Private content!This content has been marked as private by the uploader.
Don’t use <picture> (most of the time)
Browser support for the picture specification is landing and as Marcos Cáceres said, it is time to “go forth and <picture> all the things!” Except you shouldn’t. You shouldn’t <picture> all the things. But you should start using picture now for responsive images. No reason to wait. Confused? You’re not alone. Standards are developed in non-linear fashion. Ideas evolve and merge. And often at the e
Apple Shows Love for HTML5 with iOS 8
Build React Apps and Win $2000, $750, $250! – Enter the ReExt Contest We were as excited as everyone else with last week’s Apple iOS 8 release announcement. We have only had the iOS 8 GA bytes for a few days, but we wanted to do as quick and complete a write-up as we could to give the global web developer community an in-depth look at Apple’s latest release. There’s no doubt we’ll see a few items
横にはみ出すナビゲーション
今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも拘らずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。 ドロップダウン オーバーレイ ドロワー 極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。 これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ。
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
Google 検索結果内の検索ボックスを有効にするための Microdata マークアップ
Google の検索結果内に表示される検索ボックス （Sitelinks search box） を有効にするための schema.org 語彙による Microdata を使用したマークアップについて解説してみます。 Google ウェブマスター向け公式ブログで、Google の検索結果内に表示される検索ボックス （Sitelinks search box） について刷新され、見せ方が変わったほか、この 「Sitelinks search box」 を表示するために必要なマークアップについて紹介されていました。 検索結果内の検索ボックスが新しくなりました ： Google ウェブマスター向け公式ブログ Sitelinks Search Box ： Google Developers Sitelinks search box は、検索結果で表示されるサイトリンクの下部に表示されるもので、以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
GitHub - daikiueda/grunt-meta-excel: Update meta tags according to .xlsx file.
GitHub - hail2u/html-best-practices: For writing maintainable and scalable HTML documents
Support for theme-color in Chrome 39 for Android | Blog | Chrome for Developers
Commenting a commented markup (Nested comments)
Windows版Firefoxで同一srcの画像が荒れる - Qiita
