WAI-ARIA はじめの一歩。サンプルソースで学ぶ WAI-ARIA 導入方法
WAI-ARIA をマークアップに取り入れるはじめの一歩として、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら紹介します。 この記事は、Web Accessibility Advent Calendar 2013、4日目の記事です。ベタな内容なのでもしかすると他の方とかぶるかもしれませんが、気にせずいきます。 とはいっても、WAI-ARIA の仕様をすべて詳細に取り上げるのは大変なので、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら、紹介してみたいと思います。まだ WAI-ARIA をマークアップに取り入れたことがない方が、初めて使うきっかけになれば幸いです。 WAI-ARIA の仕様は下記にあります
HTML5 仕様が W3C 勧告に
HTML5 仕様が無事、W3C 勧告 （W3C Recommendation） となりました。直近の更新としては、2014年 9月 16日に勧告案 （Proposed Recommendation） として公開されていましたが、事前に公開されていた Plan 2014 で 2014年第4四半期中の勧告予定になっていた通り、2014年 10月 28日付けで勧告へと進みました。 HTML5 is a W3C Recommendation ： W3C News HTML5 A vocabulary and associated APIs for HTML and XHTML - W3C Recommendation 28 October 2014 HTML5勧告 - オープン・ウェブ・プラットフォームの重要なマイルストーンを達成 #HTML5 is a W3C Recommendation ht
jQuery は次期リリースから 1.x 系、2.x 系共にメジャーバージョン番号を jQuery 3.x で統一へ
jQuery 公式 Blog は、10月 29日付けで投稿された記事「jQuery 3.0: The Next Generations」 で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x 系の後継を 「jQuery Compat 3.0」 と名称変更し、今までメジャーバージョン番号が異なっていた 2つの jQuery を、jQuery 3.x に統一すると発表しました。 jQuery 3.0: The Next Generations ： Official jQuery Blog 該当の Blog 記事が公開されたときに Twitter でもつぶやいたんですが、簡単に言えば下記のようなメジャーバージョン番号の統一と、名称変更が、次のリリースから行われます。 2.x系 → jQuery 3.0、1.x系 → jQuery Compat 3.0 に
個人的に常用中のオススメ IFTTT レシピ 10個
最近、iPhone アプリがリリースされたこともあって話題に挙がることの多い IFTTT ですが、個人的に気に入ってるレシピ （IFTTT ではユーザーが設定した自動処理を 「レシピ」 と呼んでいます） を 10個ほど共有。 レシピ紹介してる Blog とかたくさんあると思いますので、なるべくかぶってない感じのやつをと思ったのですが、定番なのもいくつか混ざってます。 Blog を書く人向け、「Blog を更新したら○○に投稿」 系 Blog を運営している人なら、Blog に新しい記事を投稿したとき、同時に SNS などに更新通知を送るってことはよくやると思いますが、それ系で 5つほど。 1. Blog を更新したら Twitter に投稿 これはもう、定番過ぎる感じではありますが、Blog に新しい記事を投稿したら、その通知を Twitter に流すやつ。 WordPress をはじめ、
Google が Microdata による組織ロゴの意味づけに対応したそうなので
Google ウェブマスター向け公式ブログで紹介されていましたが、Microdata （schema.org） による、組織ロゴの意味づけをサポートし、組織を象徴する画像と Web サイトを関連づけることで、Google 検索結果で使用される組織ロゴの画像を指定できるようになったそうです。 ということで、実際に使用する場合のサンプルソースなど挙げてみようと思います。 組織のロゴの schema.org マークアップのサポートを開始しました ： Google ウェブマスター向け公式ブログ このたび、Google では組織のロゴについての schema.org マークアップのサポートを開始いたしました。このマークアップによって、組織を象徴する画像とサイトを結び付けることができます。ウェブマスターの皆様は、Google 検索結果で組織のロゴとして使用される画像を指定することができます。 組織のロ
WebKit （Nightly Builds） で srcset 属性がサポートされたらしい
WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようですので、簡単に srcset 属性の仕様について解説してみます。 WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようです。 srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ （デバイスピクセル比に応じて） 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images （レスポンシブ イメージ）」 を HTML のみで実現することができます。 Improved support for high-resolution displays with the srcset image attribute ： Surfin' Safari WebKit Nightly
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
CSS からベンダプレフィックスという仕組みが消える日
Google Chrome が採用する新しいオープンソースレンダリングエンジン 「Blink」 のプロジェクトページの記述や Mozilla の方針から、今後ベンダプレフィックスがなくなるかもというお話 本の虫さんで、「Blink、新機能に対して新たなベンダープレフィクスを追加しない決定」 という記事が上がっていた （ちなみに border-radius は現状、-moz- も -webkit- も不要で使えますよ） のですが、これ、確か Blink レンダリングエンジンが発表された時から FAQ とかに書かれていましたよね？ なので今さらだと思いますが、当 Blog では当時触れていなかったし、いい機会ですので簡単に書いてみたいと思います。 Google の Chromium プロジェクトにおいて、レンダリングエンジンを Webkit から、Webkit をフォークして開発された新しいオ
HTML5 や CSS などのリファレンスサイト （未完成） を公開したよ
実はずいぶん昔に一回作ろうと思って途中で挫折した結果、しばらく放置状態だったんですけども、暇を見つけてはちょっとずつ進めていた Web 界隈の方々向けリファレンスサイトがとりあえず公開できそうな感じになったので晒してみますよ。 作ってるのは下記です。 W3 Watch Reference ： Web クリエイターのための HTML5, CSS, jQuery... クイックリファレンス ただし、なんとか形になってるのは HTML5 タグリファレンスの部分だけなんですけどね...... HTML5 タグリファレンス ： W3 Watch Reference 未完成のまま晒すんじゃねぇという声が聞こえてきそうですが気にしない気にしない。かつ、巷には多くの優れたリファレンスサイトがすでにありますので、今さらなんですが、よく調べる内容について 1つのサイトにまとまってたら便利だし、自分のお勉強を兼
Pocket の未読記事をランダム表示してくれる RandomPocket
Pocket に保存している未読の記事を、ランダムに表示して読むことができる Web サービス、「RandomPocket」 の紹介。 クラウドブックマークサービスの 「Read It Later」 は、所謂、「あとで読む」 系のサービスとしては老舗ですが、ちょうど 1年ほど前に、Pocket と名前を変えてリスタートしてから、無料化されたこともあって一気に利用数も増えたみたいですね。 この Blog でも少し前から Pocket ボタンを記事ページに設置していますが、Pocket されている数を見ると、はてブよりも多い記事もあったりと、日本でもかなり多くの方が使っているのがわかります。 で、その Pocket に保存している未読の記事を、ランダムに表示して読むことができる Web サービス、「RandomPocket」 が、CreativeStyle さんで公開されていましたので紹介。
Firefox 21 が正式リリース、main 要素などに対応
本日 （私の環境では 23時ごろ自動更新がきました）、Firefox 21 が正式にリリースされましたが、HTML5 関連では、main 要素への対応、style 要素の scope 属性への対応が行われました。また、JavaScript 関連では E4X が完全に削除され、使用不可になりました。 Firefox 21 サイト互換性情報 ： Mozilla Firefox 21 for developers ： Mozilla 細かい修正点は Firefox 21 for developers に書かれていますが、HTML / CSS 関連では、main 要素への対応、style 要素に対する scope 属性への対応などが行われています。 main 要素については、過去に下記の記事を書いていますのでご参考まで。 HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削
Selectors Level 4 の Working Draft が更新される
5月 2日付けですが、Selectors Level 4 の Working Draft （草案） が更新されました。 Selectors Level 4 自体は 2011年 9月 29日の Selectors Level 3 仕様の勧告とあわせて最初の Working Draft が公開されていますが、そこから今回で 2回目の更新となります。 Selectors Level 4 W3C Working Draft 2 May 2013 Working Draft 内の、「Selectors Overview」 に Selectors Level 4 を含めた、セレクタの一覧がありますので、下記に引用しつつ簡単に日本語での解説も付け加えておきましたが、Selectors Level 4 ではセレクタがより一層便利になっていますので、早いところブラウザ側で実装されるといいですね。 ちなみに、
HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除
ちょっと前に 「hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね （Editor's Draft では）。 ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。 HTML5 W3C Candidate Recommendation 17 December 2012 hgroup 要素が HTML5 勧告候補から削除される main 要素とは？ main 要素は元々、Steve Faulkner 氏 （Web アクセシビリティ関連の方） が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークア
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
Firefox 22 に使用フォントが確認できる Font Inspector が搭載
現在、Aurora （プレベータ版） がリリース済みの Firefox 22 ですが、Web コンソールに新機能として、Web ページで指定されているシステムフォントや Web フォントの一覧を確認したり、特定の要素に指定されているフォントを確認したりできる、「Font Inspector」 が搭載されています。 Font Inspector は 「Inspector」 の中に、Fonts というタブが追加されるのでそこから確認できます。 その他 Web コンソールの強化も ついでに Web コンソールも色々と強化されていて、Web ページのパフォーマンス計測ツールが統合されたり、 デバッガも UI が変更されて使いやすくなっています。Firefox 21 以前は確認、編集したいリソースをプルダウンメニューから選択してっていう UI だったのですが、Firefox 22 からは、サイドの一
hgroup 要素が HTML5 勧告候補から削除される
今さら感がハンパないのと、ちょっと前の話になってしまいますが、hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです。 WG Decision on request to drop hgroup from HTML5 ： W3C Mailing lists plan on removing hgroup from spec ： W3C Mailing lists as per the chairs decision I plan to remove hgroup from the HTML5 spec. It will be made non conforming, but the implemented parsing rules and user agent CSS rules will remain (as is u
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
