WWW WATCH

W3C Cheatsheet が HTML5 に対応

去年、W3C が公開していた 「W3C Cheatsheet」 ですが、今回更新されて HTML5 にも対応し、より使いやすくなったので紹介してみます。

残念ながら CSS3 のプロパティには未対応なのですが、HTML や CSS 等に関してさっと調べたいときにはとても便利だと思いますよ。iPhone や Android 携帯などでは Web アプリケーションとして動作するように作ってありますので、それらモバイル機器をお持ちの場合は、ブックマークしておくといいと思います。(iPhone なら 「ホームに追加」 しておくといいですよ。)

... more

Firefox 4 がサポート予定の calc() とは

FirefoxTwitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。

calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。

... more

CSS の情報サイト 「CSS HappyLife ZERO」

CSS HappyLife の中の人が新しい Web サイト始めたみたいです。

... more

HTML5 でソースコード書いてみた

今のところすぐに HTML5 を使う理由もないので、実際に HTML5 でソースコードを書いてみるってことをしていなかったのですが、思い立って簡単に書いてみました。この Blog のトップページを HTML5 で再コーディングしたらどんな感じかなということで、今ある構成要素をほぼそのままに、HTML5 でサンプルを作ってみました。

HTML5 サンプル

見ていただければわかりますが、超適当です。スタイルもさすがに全くなしっていうのもなんですので、最低限のレイアウトだけ適当に当ててあります。

... more

HTML5 を学ぶための情報源まとめ

ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。

やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。

ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか考えてたんですが、XML MIME タイプが使えない IE どうしよっかなとか、振り分けとかするの面倒だなとか考えてたらちょっとテンション下がっちゃいました。しばらくは HTML 互換の XHTML 1.0 を text/html で提供し続けるかも。。ホント IE なんとかしてくれよ。

... more

Web コーディング実践講座

すいません告知ですが、縁あってマルチメディアスクールWAVE さんで、「Web コーディング実践講座」 というビデオ講座を担当させていただきました。講座は 「PAL」 というオンデマンド学習方式で提供されますので、事前に教則ビデオを撮っておいて、それを使って生徒さんは自分のペースで学習していくという形式になります。

Web コーディング実践講座 講座の詳細

これから Webサイト制作の現場を目指そうという方を対象にしていますので、ほんとに基本的な内容が中心ですが、教本に私の共著である 「Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。」 を使っていただきましたので、この書籍の内容を主に、実際にサンプルソースコードを使って学習していく内容になっています。

... more

XHTML 2 策定終了 HTML 5 にリソースを集中

昨日のニュースですが、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

... more

<hr /> コンテスト 優勝は誰?

hr先日のエントリーでも紹介したとおり、Smashing Magazine で、hr 要素のデザインを競う 「<hr /> コンテスト」 が開催されていましたが、全応募作品(応募要件を満たした)と、最終選考に残ったファイナリスト、25作品が公開されています。

The <hr>-Contest Results - Download your fresh <hr>-line now! : Smashing Magazine

しかも、応募作品はダウンロード可能になってて、なんて親切な、というかありがたい。デザインの参考にできるかもしれないですね。

... more

Google Chrome のレンダリング

Google Chrome今日リリースされた、Google 発のブラウザ、Google Chrome のレンダリングを簡単にテストしてみました。Google Chrome のレンダリングエンジンは、Safari と同様、WebKit ということなので結果的にはおそらく同じ感じになるかなと思ってましたが、v8 の影響か acid3 テストでは結果が多少異なるみたいですね。

... more

<hr /> コンテスト?

hrSmashing Magazine で、hr 要素のデザインを競う 「<hr /> コンテスト」 が開催されてます。その名の通り、CSS と背景画像を駆使してクールな hr 要素を作っちゃおうという企画。単純に画像作成のスキルが勝敗を分けそうですが、試みとしては面白いかも。そういえば hr 要素とかってしばらく使ってないなぁ。。

The <hr /> Contest : Smashing Magazine

... more

clip プロパティで画像をトリミング

phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。

... more

W3C HTML 5 Working Draft

W3C から HTML 5 の最初の公開草案となる 「HTML 5 W3C Working Draft 22 January 2008」 が公開されました。

HTML Working Group のマイルストーンでは今年 2月の予定 (最初のマイルストーンでは 2008年 3月だった?) になっていましたが、ほぼ予定どおり公開されたことになります。

HTML 5 W3C Working Draft 22 January 2008

... more

Yahoo! UI Library: TabView 使ってみた

JavaScript によるタブの切り替え UI の実装というネタで言えば、以前にも 「JavaScript でタブ切り替え UI を実装する」 で紹介しましたが、今回は、Yahoo! UI Library の中から、「TabView」 を使用してちょっとしたインターフェースを作ってみました。

実はサイトのリニューアルと合わせてオススメ書籍とか紹介するページを作って、そこで浅ましくアフィリエイトしようとか考えていたんですが、ただ商品を並べてもつまらないし、ちょっと変わった見せ方ができないものかということで考えた結果が、今回の TabView を使った見せ方。メモもかねて作り方を解説してみようと思います。長くなりそうなので何回かに分けるかも。

... more

CSS 切り替えスイッチ用スクリプト修正

以前紹介した、「CSS レイアウト切り替えスイッチ」、及び 「12 のレイアウトを切替可能なテンプレート」 ですが、特定の状況でスクリプトエラーが発生して正常に動作しないとの指摘を受けましたので、ちょこっと修正しました。

原因は CSS の切り替え用スクリプトとして使用していた 「styleswitcher.js」 で、(X)HTML ソース内に、rev 属性を指定した link 要素が記述されていると 「Error: a.getAttribute("rel") has no properties」 のようなエラーが帰ってきて終了という状態になっていました。

... more

pre 要素に対する印刷用 CSS

サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。

Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。

... more