去年、W3C が公開していた 「W3C Cheatsheet」 ですが、今回更新されて HTML5 にも対応し、より使いやすくなったので紹介してみます。
残念ながら CSS3 のプロパティには未対応なのですが、HTML や CSS 等に関してさっと調べたいときにはとても便利だと思いますよ。iPhone や Android 携帯などでは Web アプリケーションとして動作するように作ってありますので、それらモバイル機器をお持ちの場合は、ブックマークしておくといいと思います。（iPhone なら 「ホームに追加」 しておくといいですよ。）
Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。
calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。
今のところすぐに HTML5 を使う理由もないので、実際に HTML5 でソースコードを書いてみるってことをしていなかったのですが、思い立って簡単に書いてみました。この Blog のトップページを HTML5 で再コーディングしたらどんな感じかなということで、今ある構成要素をほぼそのままに、HTML5 でサンプルを作ってみました。
見ていただければわかりますが、超適当です。スタイルもさすがに全くなしっていうのもなんですので、最低限のレイアウトだけ適当に当ててあります。
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。
やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。
ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか考えてたんですが、XML MIME タイプが使えない IE どうしよっかなとか、振り分けとかするの面倒だなとか考えてたらちょっとテンション下がっちゃいました。しばらくは HTML 互換の XHTML 1.0 を text/html で提供し続けるかも。。ホント IE なんとかしてくれよ。
すいません告知ですが、縁あってマルチメディアスクールWAVE さんで、「Web コーディング実践講座」 というビデオ講座を担当させていただきました。講座は 「PAL」 というオンデマンド学習方式で提供されますので、事前に教則ビデオを撮っておいて、それを使って生徒さんは自分のペースで学習していくという形式になります。
これから Webサイト制作の現場を目指そうという方を対象にしていますので、ほんとに基本的な内容が中心ですが、教本に私の共著である 「Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。」 を使っていただきましたので、この書籍の内容を主に、実際にサンプルソースコードを使って学習していく内容になっています。
昨日のニュースですが、W3C からの正式な発表として XHTML 2 の策定作業が終了 （年内で期限が切れる XHTML2 Working Group Charter を更新しない） 、以降そのリソースを HTML 5 に集中することが発表されました。
XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5
先日のエントリーでも紹介したとおり、Smashing Magazine で、hr 要素のデザインを競う 「<hr /> コンテスト」 が開催されていましたが、全応募作品（応募要件を満たした）と、最終選考に残ったファイナリスト、25作品が公開されています。
The <hr>-Contest Results - Download your fresh <hr>-line now! ： Smashing Magazine
しかも、応募作品はダウンロード可能になってて、なんて親切な、というかありがたい。デザインの参考にできるかもしれないですね。
今日リリースされた、Google 発のブラウザ、Google Chrome のレンダリングを簡単にテストしてみました。Google Chrome のレンダリングエンジンは、Safari と同様、WebKit ということなので結果的にはおそらく同じ感じになるかなと思ってましたが、v8 の影響か acid3 テストでは結果が多少異なるみたいですね。
Smashing Magazine で、hr 要素のデザインを競う 「<hr /> コンテスト」 が開催されてます。その名の通り、CSS と背景画像を駆使してクールな hr 要素を作っちゃおうという企画。単純に画像作成のスキルが勝敗を分けそうですが、試みとしては面白いかも。そういえば hr 要素とかってしばらく使ってないなぁ。。
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。
W3C から HTML 5 の最初の公開草案となる 「HTML 5 W3C Working Draft 22 January 2008」 が公開されました。
HTML Working Group のマイルストーンでは今年 2月の予定 （最初のマイルストーンでは 2008年 3月だった？） になっていましたが、ほぼ予定どおり公開されたことになります。
JavaScript によるタブの切り替え UI の実装というネタで言えば、以前にも 「JavaScript でタブ切り替え UI を実装する」 で紹介しましたが、今回は、Yahoo! UI Library の中から、「TabView」 を使用してちょっとしたインターフェースを作ってみました。
実はサイトのリニューアルと合わせてオススメ書籍とか紹介するページを作って、そこで浅ましくアフィリエイトしようとか考えていたんですが、ただ商品を並べてもつまらないし、ちょっと変わった見せ方ができないものかということで考えた結果が、今回の TabView を使った見せ方。メモもかねて作り方を解説してみようと思います。長くなりそうなので何回かに分けるかも。
以前紹介した、「CSS レイアウト切り替えスイッチ」、及び 「12 のレイアウトを切替可能なテンプレート」 ですが、特定の状況でスクリプトエラーが発生して正常に動作しないとの指摘を受けましたので、ちょこっと修正しました。
原因は CSS の切り替え用スクリプトとして使用していた 「styleswitcher.js」 で、(X)HTML ソース内に、rev 属性を指定した link 要素が記述されていると 「Error: a.getAttribute("rel") has no properties」 のようなエラーが帰ってきて終了という状態になっていました。