WWW WATCH

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

• CSS HappyLife ZERO
• ZERO｜CSS HappyLife

... more

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

HTML5 サンプル

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

... more

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

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

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

... more

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

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

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

... more

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

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

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

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

... more

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

... more

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

The <hr /> Contest ： Smashing Magazine

... more

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

... more

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

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

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

... more

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

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

... more

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

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

... more

Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。

じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。

... more

アイデアとしては面白いと思うし、こんなこと書くと細けーなぁと言われそうなのでなんですが、それでもできるだけ valid な (X)HTML を書いた方がいいよと思っている者としては一応書いておきます。参考までに。

SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」 ： phpspot開発日誌

ちなみに元ネタは Sprinkle Javascript library by Jon Davis。

... more