明日から使える inline-block

3月13日(土)にあったWCAN 2010 SpringのLightning Talkで「明日から使える inline-block」というタイトルで発表させていただきました。

実は14日から15日まで学会で不在なので、「明日から使える」と言っておいて月曜までにフォローアップできていないのはダメだなと思ったのでスライドをとりあえず公開して学会行ってきます。
WCAN本番では時間の都合上、2例の紹介だったのですが、紹介したかった例をもう一つ加えた3例版になっています。また、参考サイトも紹介していますのでぜひご活用ください。

後日、SlideShare版や、懇親会できかれたテーマの裏話とかスライドの作り方とかについて追記したいと思います。続きに追記しました。

“明日から使える inline-block” の続きを読む

  1. Licensed under BY-NC-SA Creative Commons License [back]

VERSIONFIVE Renewal!

画像 : VERSIONFIVE リニューアル

versionfive.jpに移転してから2年と3ヶ月。まだ完全ではありませんが、やっっと、リニューアルできました!

一番はじめのカンプを作ったのが2007年8月で、気に入らなくなって作り直しては寝かせ、を繰り返していたのと、これまで利用させていただいていたVicunaがとても使い心地のよいテンプレートでしたので、記事を書くだけでこれまでのそのそとやってきてしまいました・・・。

まだ月別アーカイブページと404ページ、検索結果用のテンプレート、そしてプロダクトページができていないのですが、とりあえず公開してみました。3月中に完成させますが、不具合などあればぜひコメントやTwitter等でお知らせいただければと思います。
今後ともこのサイトよろしくお願いします!

続きに技術的な話など。

“VERSIONFIVE Renewal!” の続きを読む

HTML5 で試しに Web ページを組んでみた (改訂版)

このエントリは、「HTML5 で試しに Web ページを組んでみた」の記事の続きです。

先日のGoogle I/Oで大きく取り上げられたように、最近HTML5のニュースが増えていて注目度が上がっているようです。canvas要素やvideo要素、オフラインキャッシュのような、アプリケーション開発におけるHTML5が主に注目されているようですが、Safari 4のウェルカムページがHTML5で描かれていたり、国内でもlivedoorのラボが積極的に採用したりと事例も増えていますね。

そこで、約半年前に作ってみたサンプルのコードを見直して修正してみました。参考にしたのは以下のページです。

“HTML5 で試しに Web ページを組んでみた (改訂版)” の続きを読む

CSS3 で新しいボックスレイアウト

先日、WCAN mini Markup Vol.10がありました。第10回を数える今回は「CSS3+jQueryを実際に使ってみよう!」というテーマで、WCAN x CSS Nite 2009 SPRINGでの益子さんのセッションを実践し紹介し合おうというものです。

僕が紹介したのは、CSS3のレイアウトに関する新しいプロパティ[1]。新しいプロパティを使うとこれからすごくレイアウト組が楽になるよね!ってことがいいたかったので、説明は他所に任せてサンプルを見ていただいくことでイメージしてもらう形にしています。

なお、今回のサンプルは一部のブラウザのみしか動作しません。オススメはSafariかGoogle Chromeです[2]

“CSS3 で新しいボックスレイアウト” の続きを読む

  1. jQueryの紹介は他の方にお任せってことで;-P [back]
  2. Chromeは一応ベータ版ですがMac版もありますよ。 [back]

HTML5 で試しに Web ページを組んでみた

このエントリは、「HTML5 で試しに Web ページを組んでみた (改訂版)」の記事によって加筆されています。あわせてご覧ください。

このエントリは、「CSSロールオーバーのアクセシビリティを少し考えてみた」や「CSSでボックス要素を画面中央に表示させてみる」に続く試しにやってみたシリーズです。

先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。

HTML5で書かれた典型的なブログ記事のマークアップ例などはありますが、今回使用したサンプルのような企業サイトのマークアップ例を見つけることができませんでした。ですので上で挙げた仕様書や記事のサンプルを見つつ手探りで書いています。これをみて、そこはおかしいよ!などのご指摘ぜひお待ちしてます!

“HTML5 で試しに Web ページを組んでみた” の続きを読む