1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。

• CSS だけで作るタブ切替ユーザインタフェース

先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。

タブ切替の UI は、よく使われますが、JavaScript で実装するケースが多いので、今回は全部 CSS のみで実装してみるテスト。目新しいことをやっているわけではありませんので、すでにやられている方もいるかもしれませんが気にせずいきます。

使うのは :target 疑似クラスで、IE9 以降は対応していますので、比較的動作環境も広いし、フラグメント識別子つきのリンク （要するに #hoge がついたリンクです） で、各タブを直接指定したリンクが簡単に張れるので、JavaScript でやるより楽に使い勝手のよいタブ切替が実装できる場合もあります。

Google ウェブマスター向け公式ブログで紹介されていましたが、Microdata （schema.org） による、組織ロゴの意味づけをサポートし、組織を象徴する画像と Web サイトを関連づけることで、Google 検索結果で使用される組織ロゴの画像を指定できるようになったそうです。

ということで、実際に使用する場合のサンプルソースなど挙げてみようと思います。

• 組織のロゴの schema.org マークアップのサポートを開始しました ： Google ウェブマスター向け公式ブログ

HTML5 で input 要素の type 属性として追加された 「range」 は、数値を表す文字列をセットするための、スライダー形式やそれに準じた入力コントロールを作りますが、この input type="range" でちょっとしたお遊び。

昔の人気番組、「トリビアの泉」 でおなじみの、「へぇボタン」 を、input type="range" と CSS、簡単な JavaScript で作ってみました。完全な再現ではなくて、ボタンを押すと input type="range" で表示したスライダーの数値が上がるっていう、ちょっとだけ実用的 （？） なサンプルです。

本日 （私の環境では 23時ごろ自動更新がきました）、Firefox 21 が正式にリリースされましたが、HTML5 関連では、main 要素への対応、style 要素の scope 属性への対応が行われました。また、JavaScript 関連では E4X が完全に削除され、使用不可になりました。

• Firefox 21 サイト互換性情報 ： Mozilla
• Firefox 21 for developers ： Mozilla

4月のはじめに、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration: blink; による点滅エフェクトのサポートをもうやめようぜっていう提案が承認されて、今後リリースされるバージョンに反映されることが確定したようですと書いたのですが、今、Firefox 23 のサイト互換性情報を見ていたら、実際に削除されたようです。

• text-decoration: blink; と blink 要素終了のお知らせ
• Firefox 23 サイト互換性情報 ： MDN

Google Developers Blog で、Web ページ上にある画像やファイルを、ワンクリックで Google Drive に保存できるボタン、「Save to Drive」 ボタンが紹介されていました。

ボタンを設置する簡単なコードを追加するだけで、すぐに自分の Web ページに、このボタンを設置することが可能です。

• An easier way to save files to Google Drive ： Google Developers Blog

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

本の虫さんで、「Blink、新機能に対して新たなベンダープレフィクスを追加しない決定」 という記事が上がっていた （ちなみに border-radius は現状、-moz- も -webkit- も不要で使えますよ） のですが、これ、確か Blink レンダリングエンジンが発表された時から FAQ とかに書かれていましたよね？ なので今さらだと思いますが、当 Blog では当時触れていなかったし、いい機会ですので簡単に書いてみたいと思います。

Google の Chromium プロジェクトにおいて、レンダリングエンジンを Webkit から、Webkit をフォークして開発された新しいオープンソースレンダリングエンジン 「Blink」 に切り替えますよとの発表がされたのは、今年の 4月 4日ですが、その時に Blink プロジェクトのページもあわせて公開されています。

• Chromium プロジェクトの新しいレンダリングエンジン Blink のご紹介 ： Google Japan Developer Relations Blog
• Blink ： The Chromium Projects

ちょっと前に 「hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね （Editor's Draft では）。

ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。

• HTML5 W3C Candidate Recommendation 17 December 2012
• hgroup 要素が HTML5 勧告候補から削除される